3

In the HTML there is a div with background image as below:

<div class='item' style="background-image: url('../dummydata/images/carousel-chef.jpg');'>

I uploaded this image in Tridion, and created one component and selected that image. Now I am creating component template DWT and in that i am writing code as below to fetch the image from the component:

<div class="item" style="background-image: url('@@FieldStartMarker('hero_item_list[${TemplateRepeatIndex}].image')@@
                                                      @@FieldValueStartMarker()@@
                                                        @@GetFieldValue('hero_item_list[${TemplateRepeatIndex}].image', 0)@@
                                                      @@FieldValueEndMarker()@@
                                                    @@FieldEndMarker()@@');">

Note: hero_item_list is an embedded field containing image.

but after publishing/previewing the component it is not resolving the link properly and generating output as:

tcm:55-711 ');"> 

extra characters are coming ');">

What should be the correct way of doing this?

3
  • Welcome to the community Navdeep. It would be helpful if you review your question and provide missing details (The code you mentioned is missing). Also, tag the question with proper version of SDL Tridion. Jul 23, 2014 at 8:53
  • Tagging with the Tridion version should only be necessary if this issue is specific to a particular version.
    – Dominic Cronin
    Jul 23, 2014 at 9:02
  • ok, looks like the editor and formatting issue...let me try to edit. Jul 23, 2014 at 9:25

2 Answers 2

3

Using the @@FieldStartMarker(field)@@ and @@FieldValueStartMarker(index)@@ generates TCDL and SPAN tags around your content (coming from @@GetFieldValue(field, index)@@).

This won't work when you use it inside an HTML tag attribute, since that will render the entire HTML invalid. So since you need the image to be resolved as a background image in a style attribute, you should only use its value and skip the XPM inline editing information there:

<div class="item" style="background-image: url(@@GetFieldValue('hero_item_list[${TemplateRepeatIndex}].image', 0)@@);">

This will properly render your image, and if you want to also have it inline editable in XPM, you will have to do something additional. Like rendering an additional image outsite of this in the normal way, and making that only appear when you are in the XPM editing environment, see also my blog post about that sort of thing on Tridion Developer.

If you are looking for more information about what the @@FieldStartMarker(field)@@ and @@FieldValueStartMarker(index)@@ generate during DWT rendering and the execution of the Enable inline editing for Content TBB, you can check out the presentation I gave during the TDS workshops.

1

Remember the Internal Link resolving will work with tridion:hrefattribute in the anchor tags so as to have a hyperlink with appropriate URL.

For the above case, there may be multiple options to achieve it, however, I have always used following option:

  • Create Multimedia component with the image
  • Publish the multimedia component directly on the file system
  • In the CSS, have this path in the url as a relative path

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.