3

While defining style properties inline in DWT code , the Default Finish Actions TBB ( Containing Link Resolver TBB ) was NOT able to resolve the url of image contained in style property: background-image:url(@@Components.Fields.ProductListBackgroundImage@@).

Below is the DWT code: 

  <div class="ProductsSectionBackground" 
       style="background-image:url(@@Component.Fields.ProductListBackgroundImage@@)>
  <h3>Products</h3></div>
  <img src="@@Component.Fields.BrandImage@@"/>

More surprising, even using Single / Double Quotes inside the image:url() as image:url("@@Component.Fields.ProductListBackgroundImage@@") and image:url('@@Component.Fields.ProductListBackgroundImage@@') even didn't help and still the Output had TcmURI only as :

<!-- when using NO Quotes inside url() -->
style="background-image:url(tcm:218-154235)">
<!-- when using Single Quotes inside url() -->
style="background-image:url('tcm:218-154235')"> 
<!-- when using Double Quotes inside url() -->
style="background-image:url("tcm:218-154235")">

The SECOND ISSUE is that images contained inside such style properties are NOT pushed onto Package also.

With further searching / lots of code tryouts / looking through the implementation of Default Finish Actions TBB, Link Resolver TBB, the observations / findings were really surprising for me .

I have shared my complete findings and Solutions to these issues on my Blog here: https://rcnitesh.wordpress.com/2015/04/16/css-background-images-issue-in-tridion-with-inline-style/

However, I am still wondering if there is any better solution/approach to the above mentioned issues and need your inputs.

Specifically looking for clarifications on :

1.) The Link Resolver TBB uses the regex: 

"{[^}]+url\\s*\\([^\"']*[\"|'](?<tcmuri>tcm:[^\"']+)[\"|']\\s*\\)\\s*;?.*}"

for searching CSS style patterns. Why it makes mandatory to use either the Single or Double Quotes in :url() ?? W3C standard mentions use of Quotes as optional.

2.) Why the Regex is using curly braces { and } at the very start and end ? It should have been using ( and ) actually. enter image description here What I found is that it was the use of Curly braces only that even if the image:url() contained Single or Double Quotes, The Link Resolver is NOT Resolving these CSS style images.

After replacing these Curly braces with ( and ), image URLs were resolved perfectly.

3.) OR the above points are simply a bug in tridion ? A bug because atleast
point 2 should have been working without modifying the Regex.

[ Please refer to the blog url, also mentioned earlier, if the above points are confusing. I have discussed in full details these points together with screenshots and shared the Solution / Code as well which finally resolves CSS style images issue together with the corrections to be made in Link Resolver TBB ]

[ This issue exists in Tridion 2011 SP1 and possibly in 2013 too ]

Final NOTE:

I understand the such CSS Style properties: background-image:url() should be specified in CSS file and NOT inline in DWT , But my requirement was such that I did NOT wanted to restrict client in any way from always uploading a fixed name background image whenever it needs to be updated.

Improve this question

1 Answer 1

Reset to default
1

It looks like the regex was not designed for style attibutes, but rather for parsing CSS, since it matches on:

{ ... url(["|']tcm:...["|']);... }

If you consider this a defect, you should actually report it to Customer Support, else you can create your own TBB with a different regex indeed.

Improve this answer
6
  • Thanks Bart. The regex was being used to parse the Output item as found, which will obviously not work. When you say "parse CSS" does this means an actual css file like style.css? In this case I don't think we write url('tcm: inside such files. Please correct me so I can understand further
    – R.C
    Apr 17, 2015 at 20:20
  • Indeed a stylesheet, in case you would publish a style.css Page and the content for that comes from a Component
    – Bart Koopman
    Apr 17, 2015 at 22:08
  • Ok, so this regex was meant for css parsing . is there any existing template in tridion that can resolve these inline css style property images in DWT ?
    – R.C
    Apr 18, 2015 at 11:02
  • 1
    Yes, for TCM Uris in CSS files, we normally wouldn't write them manually. Uploading an HTML page (renamed with extension .dwt), its CSS files, and images using WebDAV (maybe twice to resolve everything) will make the images managed, though. I doubt many implementations do this, but the feature is probably why the TBB parses TCM Uris in CSS (or vice versa in terms of why it works). :-)
    – Alvin Reyes
    Apr 18, 2015 at 16:24
  • 1
    @AlvinReyes I think this feature in the TBB was indeed designed for that demo scenario we used in R5.3 when it just came out.
    – Bart Koopman
    Apr 18, 2015 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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