I have an EE site that is using Assets to display large images (1080px wide) that stack vertically. I would love to use this LazyLoad jQuery script, however it is required to change the "src=" in the tag to "data-original="

In my EE install, I am using Assets to manage these images along with CE Image to resize. In my template, I have this Assets tag pair to output the images. I would wish to keep the CE Image single tag, only because I want it to output both the width (which should stay at 1080px), and variable height using "add_dims=" parameter.

{gallery_items var_prefix="file"}
  {exp:ce_img:single src="{file:url}" alt="{file:alt_text}" max_width="1080" itemprop="image" add_dims="yes" class="lazyload"}

If I simply change out the "src=", nothing seems to output. Any help would be great!!


You need to use pair tag for this:

{gallery_items var_prefix="file"}
{exp:ce_img:pair src="{file:url}" max_width="1080" itemprop="image"}
<img data-original="{made_url}" class="lazyload" alt="{file:alt_text}" width="{width}" height="{height}" />
| improve this answer | |
  • OK! Thanks for that. We're getting closer, however I'm still not seeing the images. What I do see are the image tags being outputted now. For some reason the images aren't being rendered on the page. This may be a separate issue though.. unless you think otherwise. – ninjaroll Feb 5 '14 at 23:04
  • Sorry, here's the output <img data-original="//d2omqnuzo0t1t8.cloudfront.net/images/remote/http_s3.amazonaws.com/xxxxxxxx/gallery/don-carlos/don-xxxxxxxxxx.jpg" class="lazyload" alt="" width="1080" height="720" /> – ninjaroll Feb 5 '14 at 23:29
  • data-original="{made_url}", but if u use as3 - data-original="{aws_url}" – Max Lazar Feb 5 '14 at 23:46
  • Found the issue, which was javascript related as I was suspecting. Thank you! Works great now! – ninjaroll Feb 6 '14 at 18:38

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.