Dynamically Getting Image Url in Portal Page Template

Gopala Padibandla asked on October 31, 2016 06:16

Hi there,

Can anyone help me in getting document property (image url) in portal page template.

I want to change page header image based on the page teaser image property.

Following is the markup I am trying to use

<div class="clinImage" style='background-image:url({% CurrentDocument.GetValue["TeaserImage"] %});'>

But no luck.

Any help is highly appreciated.



Correct Answer

Gopala Padibandla answered on November 1, 2016 02:38

Finally, issue fixed!!!!!!!!!!!

I used HeadHTMLCode webpart and put following snippet in script to change the background image of div


$cmsj('.page-header').css("background-image", "url(/CMSPages/GetFile.aspx?guid={% TeaserImage %})"); 


0 votesVote for this answer Unmark Correct answer

Recent Answers

Richard Sustek answered on October 31, 2016 09:00 (last edited on March 24, 2018 12:15)

If you are using Direct Uploader or Upload file form controls as a field inside a Page type you can use following code to get the url of the attachment:

<img src="{% Transformation.GetAttachmentUrl(CurrentDocument.NodeAliasPath, CurrentDocument.MenuItemTeaserImage)|(user)zbynekh|(hash)95744cfb21eb6b810d51d3a3a34b485a827dea090e3c62b68e41211f345986e7%}" />

I've tested this code on our sample Corporate site with the teaser image for the "CMS menu item" page type.

2 votesVote for this answer Mark as a Correct answer

Gopala Padibandla answered on October 31, 2016 23:25 (last edited on March 24, 2018 12:15)

Hi Richard, Thank you so much for the quick response.

But it did not fix my issue, I am trying to use image as background for div.

Please look at the snippet

<div class="content-header page-header" style='background-image:url({% Transformation.GetAttachmentUrl(CurrentDocument.NodeAliasPath, CurrentDocument.TeaserImage)|(user)zbynekh|(hash)30ae8ed469a50530bbf234fe45a3e4be6df40972d1a62b1bb24da0b8c83ab61a%});'>

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.