Issue in image background URL

Question

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?

Answer 1

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.

Answer 2

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