Forum Discussion

jpjonesie's avatar
9 years ago

Display images associated with messages

We're working on a featured content carousel to pull featured messages from different areas of our site. As part of the carousel, we'd like to include the first image associated with each message. I have the SELECT statement and Freemarker <#list> set up to display the other information associated with the featured messages (subject, teaser, view_href, etc.), but I can't figure out how to retrieve the first image associated with each post. I know that you can SELECT images as part of the query, but that only returns an objectInstance. 

 

Is there a way to drill into the images object to return the details of a given image? I would have expected that images would have returned an array, and that I could then use images[0] to get the details of the first image.

 

Any help would be greatly appreciated. Here's what I have thus far:

<#assign boardID = "discussions"/>
<#assign apiVersion = "2.0"/>
<#assign featuresQuery = "SELECT id, conversation.featured, conversation.style, conversation.last_post_time_friendly, view_href, subject, author, search_snippet, images FROM messages WHERE conversation.featured = true AND board.id='" + boardID + "'"/>
<#assign featuredItems = rest(apiVersion, "/search?q=" + featuresQuery?url + "&restapi.response_style=view").data.items![] />

<ul> <#list featuredItems as features> <li><a href="${features.view_href}">${features.subject}</a><br/> ${features.search_snippet} <#assign imageQuery = "SELECT count(*) FROM images WHERE message.id='" + features.id + "'"/> <br/> <!--Here's where I'm stuck; I'd like to parse details of the first image associated with this message-->
${features.images} </li> </#list> </ul>

 

  • Hi,

     

    Don't know if answer is still needed but here is a solution. Just change the query

    <#assign imageQuery = "SELECT count(*) FROM images WHERE message.id='" + features.id + "'"/>

    in 

    <#assign imageQuery = "SELECT * FROM images WHERE message.id='" + features.id + "' LIMIT 1"/>

    then you will have to parse the answer to get image url in the format which suits your ui needs.

    <#assign imagesItems = rest(apiVersion, "/search?q=" + imageQuery?url + "&restapi.response_style=view").data.items![] />
    <#assign imageUrl = imageItems[0].large_href />

     

     

    I created a macro to render image by dimensions and message id

    <#macro getMessageImage imageDimensions messageId>
    		<#assign messageImageURL = "" />
    		<#assign messageImageDescription = "" />
    		
    		<#assign coverImageQuery = rest("2.0","/search?q=" + "SELECT cover_image FROM messages WHERE id = '${messageId}'"?url) />	
    	
    		<#if coverImageQuery.data.items[0].cover_image?? >
    			<#assign messageImageId  = "${coverImageQuery.data.items[0].cover_image.id}" />
    			<#assign messageImageWidth  = "${coverImageQuery.data.items[0].cover_image.width}" />
    			<#assign messageImageHeight  = "${coverImageQuery.data.items[0].cover_image.height}" />
    			<#switch imageDimensions>
    				<#case "tiny">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.tiny_href}" />
    					<#break>
    				<#case "small">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.small_href}" />
    					<#break>
    				<#case "medium">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.medium_href}" />
    					<#break>
    				<#case "large">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.large_href}" />
    					<#break>
    				<#case "">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.original_href}" />
    					<#break>		
    				<#default>
    					<#assign messageImageURL = "/t5/image/serverpage/image-id/${messageImageId}/image-dimensions/${imageDimensions}/crop-image/true?v=v2" />
    			</#switch>
    			
    			<#if coverImageQuery.data.items[0].cover_image.description !="">
    				<#assign messageImageDescription = "${coverImageQuery.data.items[0].cover_image.description}" />
    			<#else>
    				<#assign messageImageDescription = "${coverImageQuery.data.items[0].cover_image.title}" />
    			</#if>
    			
    		<#else>
    			<#assign messageImagesQuery = rest("2.0","/search?q=" + "SELECT * FROM images WHERE messages.id = '${messageId}' LIMIT 1"?url) />
    			<#if messageImagesQuery.data.size gt 0>
    			
    				<#assign messageImageId = "${messageImagesQuery.data.items[0].id}" />
    				<#assign messageImageWidth  = "${messageImagesQuery.data.items[0].width}" />
    				<#assign messageImageHeight  = "${messageImagesQuery.data.items[0].height}" />
    			<#assign messageImageheight  = "${messageImagesQuery.data.items[0].height}" />
    				<#switch imageDimensions>
    					<#case "tiny">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].tiny_href}" />
    						<#break>
    					<#case "small">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].small_href}" />
    						<#break>
    					<#case "medium">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].medium_href}" />
    						<#break>
    					<#case "large">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].large_href}" />
    						<#break>
    					<#case "">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].original_href}" />
    						<#break>		
    					<#default>
    						<#assign messageImageURL = "/t5/image/serverpage/image-id/${messageImageId}/image-dimensions/${imageDimensions}/crop-image/true?v=v2" />
    				</#switch>
    				<#if messageImagesQuery.data.items[0].description !="">
    					<#assign messageImageDescription = "${messageImagesQuery.data.items[0].description}" />
    					<#else>
    						<#assign messageImageDescription = "${messageImagesQuery.data.items[0].title}" />
    				</#if>
    				
    			</#if>
    		</#if>
    	</#macro>

     

5 Replies

  • Hi,

     

    Don't know if answer is still needed but here is a solution. Just change the query

    <#assign imageQuery = "SELECT count(*) FROM images WHERE message.id='" + features.id + "'"/>

    in 

    <#assign imageQuery = "SELECT * FROM images WHERE message.id='" + features.id + "' LIMIT 1"/>

    then you will have to parse the answer to get image url in the format which suits your ui needs.

    <#assign imagesItems = rest(apiVersion, "/search?q=" + imageQuery?url + "&restapi.response_style=view").data.items![] />
    <#assign imageUrl = imageItems[0].large_href />

     

     

    I created a macro to render image by dimensions and message id

    <#macro getMessageImage imageDimensions messageId>
    		<#assign messageImageURL = "" />
    		<#assign messageImageDescription = "" />
    		
    		<#assign coverImageQuery = rest("2.0","/search?q=" + "SELECT cover_image FROM messages WHERE id = '${messageId}'"?url) />	
    	
    		<#if coverImageQuery.data.items[0].cover_image?? >
    			<#assign messageImageId  = "${coverImageQuery.data.items[0].cover_image.id}" />
    			<#assign messageImageWidth  = "${coverImageQuery.data.items[0].cover_image.width}" />
    			<#assign messageImageHeight  = "${coverImageQuery.data.items[0].cover_image.height}" />
    			<#switch imageDimensions>
    				<#case "tiny">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.tiny_href}" />
    					<#break>
    				<#case "small">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.small_href}" />
    					<#break>
    				<#case "medium">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.medium_href}" />
    					<#break>
    				<#case "large">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.large_href}" />
    					<#break>
    				<#case "">
    					<#assign messageImageURL = "${coverImageQuery.data.items[0].cover_image.original_href}" />
    					<#break>		
    				<#default>
    					<#assign messageImageURL = "/t5/image/serverpage/image-id/${messageImageId}/image-dimensions/${imageDimensions}/crop-image/true?v=v2" />
    			</#switch>
    			
    			<#if coverImageQuery.data.items[0].cover_image.description !="">
    				<#assign messageImageDescription = "${coverImageQuery.data.items[0].cover_image.description}" />
    			<#else>
    				<#assign messageImageDescription = "${coverImageQuery.data.items[0].cover_image.title}" />
    			</#if>
    			
    		<#else>
    			<#assign messageImagesQuery = rest("2.0","/search?q=" + "SELECT * FROM images WHERE messages.id = '${messageId}' LIMIT 1"?url) />
    			<#if messageImagesQuery.data.size gt 0>
    			
    				<#assign messageImageId = "${messageImagesQuery.data.items[0].id}" />
    				<#assign messageImageWidth  = "${messageImagesQuery.data.items[0].width}" />
    				<#assign messageImageHeight  = "${messageImagesQuery.data.items[0].height}" />
    			<#assign messageImageheight  = "${messageImagesQuery.data.items[0].height}" />
    				<#switch imageDimensions>
    					<#case "tiny">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].tiny_href}" />
    						<#break>
    					<#case "small">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].small_href}" />
    						<#break>
    					<#case "medium">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].medium_href}" />
    						<#break>
    					<#case "large">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].large_href}" />
    						<#break>
    					<#case "">
    						<#assign messageImageURL = "${messageImagesQuery.data.items[0].original_href}" />
    						<#break>		
    					<#default>
    						<#assign messageImageURL = "/t5/image/serverpage/image-id/${messageImageId}/image-dimensions/${imageDimensions}/crop-image/true?v=v2" />
    				</#switch>
    				<#if messageImagesQuery.data.items[0].description !="">
    					<#assign messageImageDescription = "${messageImagesQuery.data.items[0].description}" />
    					<#else>
    						<#assign messageImageDescription = "${messageImagesQuery.data.items[0].title}" />
    				</#if>
    				
    			</#if>
    		</#if>
    	</#macro>

     

  • jpjonesie's avatar
    jpjonesie
    Guide
    8 years ago

    Thanks jferrandis. I had figured out a similar solution sometime back, and we have a content carousel in place in several places on our community that pulls the featured posts and their associated images. I hadn't tried using the macro as you suggest. Perhaps I'll try that out at some time. Thanks again!

  • rahulsrao24's avatar
    rahulsrao24
    Guide
    8 years ago

    Hi.Could you guide  me through the solution as to how  you had to pull the images as I have the same issue.

     

    Any help will be greatly appreciated. Thank you 

  • jpjonesie's avatar
    jpjonesie
    Guide
    8 years ago

    rahulsrao24, it's been a while since I wrote this, and I've since turned over primary development responsibilities to someone else on my team. However, here's the code that I used. The key is the import function at the beginning, and searching to see if a given post is marked as featured.

     

    Also, I've omitted a step in the code that assigns a boardID variable based on the name of the node. This allows me to style differently based on which area of the site this component is being used.

     

    I hope you find this helpful.

    <#import "common-functions.ftl" as utils /> 
    <!--Query for featured messages-->
    <#if boardID !="">
    <#assign apiVersion = "2.0"/>
    <#assign featuresQuery = "SELECT id, conversation.featured, conversation.style, conversation.last_post_time_friendly, view_href, subject, author, search_snippet, images FROM messages WHERE conversation.featured = true AND depth=0 AND board.id='" + boardID + "'"/>
    <#assign featuredItems = rest(apiVersion, "/search?q=" + featuresQuery?url + "&restapi.response_style=view").data.items![] />
    <!--Check to see category has featured items-->
    <#if featuredItems?size gt 0>
    <!--Loop through featured messages-->
    <#list featuredItems as feature>
    <#assign feaImg = utils.executeLiQLQuery("SELECT original_href FROM images WHERE messages.id = '${feature.id}' limit 1") />
    <!-- check for existence of image associated with the post; set background image style if it exists.--> 
    <#if feaImg?size gt 0>
    <#assign feaImg = feaImg[0] />
    <#assign bgStyle = "{background-image: url(" + feaImg.original_href + ")}"/>
    <style>
    .messageImgWrap ${bgStyle} 
    </style>
    </#if>
    <a href="${feature.view_href}" >
    <div class="messageImgWrap" >
    <div class="messageScreen">
    <h4>${feature.subject}</h4>
    <p>${feature.search_snippet}</p>
    </div>
    </div>
    </a>
    </#list>
    </#if>
    </#if>