Hello
Thanks for your module. I am searching for a lazy load effect compatible with the picture module that is in Drupal Core 8. I need it with Drupal 7 but none of the modules that offers this feature are compatible. I see this is the more active one, so I ask. Thanks :)

CommentFileSizeAuthor
#24 unveil-picture_module_compatibility-2211575-24.patch9.56 KBgnucifer
#23 unveil-picture_module_compatibility-2211575-23.patch2.49 KBgnucifer
#14 unveil-picture_module_compatibility-2211575-14.patch4.91 KBlorique
#9 picture_unveil.png375.66 KBcandelas

Comments

lorique’s picture

lorique commented

Hey candelas,

Can you give me a link to the module you are referring to?

candelas’s picture

candelas commented

Hello lorique

http://drupal.org/project/picture

Thanks for your fast answer :)

lorique’s picture

lorique commented

Hey candelas,

I've taken a look at it, and it doesn't look impossible to do. I'll spend a couple of hours on it and get back to you.

candelas’s picture

candelas commented

Hey lorique

I will be pleased to test whatever you try and report :)
I think it is making way to Drupal 8 and compatibility between performance and adaptive design.
Thanks for your time :)

candelas’s picture

candelas commented

Hello again :)

I just remember one important thing: in picture, i use the picturefill library because weblink didn't go well with some browser version (I don't remember).
:)

lorique’s picture

lorique commented

Hey Candelas

I've looked into it, and there are some issues. For this to work with the picture module, i need to replace the picturefill js implementation. This is because picturefill adds the img tag after the dom is loaded, which means unveil wouldn't catch it. Furthermore, the implementation sets the SRC of the image upon adding it, where as we would want to set in a placeholder, until the img is within viewport.

Check out 7.x-1.x-feature-2211575 branch of the unveil module, and try it out. I think i still need to add in support for window resizing, but id like to know if it works on your end first.

candelas’s picture

candelas commented

Thanks lorique for all your work
I will be able to try it next Thursday night because I have exams.
Where can I find 7.x-1.x-feature-2211575?
Thanks :)

edit: I found it http://drupalcode.org/project/unveil.git/commit/4c91ce0

lorique’s picture

lorique commented

Hey Candelas,

You can get it from the version control, or here: https://drupal.org/node/2213953

candelas’s picture

candelas commented
StatusFileSize
new picture_unveil.png375.66 KB

Hello :)

I couldn't try the module until now. In the installation that I have it doesn't work. The src tag doesn't get the url from the image... I put a screen shot for you to see. Thanks :) 

<img alt="tarros weck jars mold" title="" src="http://localhost/tarros/sites/all/modules/unveil/image_placeholder.gif" data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/brand/adpush-tarros-weck-jars-mold.png?itok=53XX_363">

screen shot

lorique’s picture

lorique commented

Hey Candelas,

Did you add the unveil.js library? Looks correct to me, so if the unveil.js library is installed, it should work.

You can download the js here: https://github.com/luis-almeida/unveil/ or directly here: https://github.com/luis-almeida/unveil/archive/1.3.0.zip

Check the readme file in the unveil module for where to place it.

lorique’s picture

lorique commented

Hey again Candelas,

Please ignore my last. I found the issue, which was an order of execution thing in the js. I've moved a few lines around so its avoided now, and it now loads images inside the viewport, if they are in the viewport at dom load. Please get latest code and try again :)

candelas’s picture

candelas commented

Hello lorique

Tomorrow I think I will have time to try. I will report :) Thanks

candelas’s picture

candelas commented

Hello lorique

I was going to try, but I see that the last commit that I found is unveil 7.x-1.3-rc1 that is the one that I tried already... Thanks :)

lorique’s picture

lorique commented
StatusFileSize
new unveil-picture_module_compatibility-2211575-14.patch4.91 KB

Hey Candelas,

Try applying this patch to the current dev release. (the 7.x-1.x branch) or the the current stable release.

candelas’s picture

candelas commented

Hello and thanks

I have images that use the picture module and others that don't.
I have been testing with Chrome 33.0.1750.152 and Firefox 28.0 in Ubuntu 12.04
I applied the patch and if I resize the images with picture module, they are replaced by image_placeholder.gif. This doesn't happen with images that have not picture module. Also there must be something with the viewport because all images are loaded, it doesn't matter if they use picture or not. I changed in the unveil configuration from 200 to 5, cleared cache and nothing changed. I tried with a 320px width on a 30 images list and, without scrolling, I inspected with firebug and the src had the image assigned.

<img data-src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" alt=" tarros weck" title=" tarros weck">

I hope my testing is worth for you :)
Thanks a lot for the module :)

lorique’s picture

lorique commented

Hey Candelas,

I am aware of the resize problem. I think i mentioned it above. I just wanted to get it working without the resize, because adding the resize should then be fairly simple. I will move on to it now, if you can confirm that on initial load, the images are there.

As for the unveil distance, i am making use of built in Unveil functionality. I've taken a look at my own installation and it does unveil images under the picture module. They have the placeholder image, and then they have the actual image when i scroll down. Depending on the length of your page, this could mean that it unveils further down than you think. Try testing by making a very long page with an image at the bottom. You'll see that this image has the placeholder when inspecting using the inspector.

candelas’s picture

candelas commented

Good morning lorique

Thanks for your fast answerd :)
For the images with picture, I can confirm that in the initial load they are unveiled. For the unveil distance, as I told, I already tried on a long page with 30 images on a width that makes them to be one at the time and they are all unveiled since the begining. These are not with the picture module. In the unveil preferences admin/config/development/performance/unveil I set the unveil distance to 2, so it is minimal. I checked and the jquery.unveil.min.js is loaded. What I see it is that is loaded before picture library that it is in the footer. My site is bilingual. Maybe I have a module whose javascript is not compatible with this...

Without the picture module, I get:

<li class="views-row views-row-29 views-row-odd views-row-last"><article id="node-accessories-100" class="node node-accessories contextual-links-region node-product-type node-accessories node-product-type-product-list node-accessories-product-list node-published node-not-promoted node-not-sticky self-posted author-admin odd clearfix">
  <div class="content clearfix">
    
  <header>
    <h2 class="field field-name-title-field field-type-text field-label-hidden">
      1 Glass Lid    </h2>
  </header>

  <figure class="field field-name-field-images field-type-image field-label-hidden">
    <a href="/tarros/en/accessories/1-glass-lid"><img data-src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" src="http://localhost/tarros/sites/all/modules/unveil/image_placeholder.gif" alt=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" title=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid"><noscript>&lt;img title=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" alt=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" /&gt;</noscript></a>  </figure>

  <div class="field field-name-field-subtitle field-type-text field-label-hidden">
    Sizes: 100mm, 80mm &amp; 60mm  </div>
  </div>
</article>
</li>

With the picture module, i get:

<div class="views-field views-field-field-image">        <div class="field-content"><a href="/tarros/en/blog/weck-jars-since-1900"><span data-alt="tarros weck jars 120 years" data-picture="">
<span data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_"></span>
<span data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_mobile_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=VerwVtEN" data-media="(max-device-width: 480px) and (max-width: 480px)"></span>
<span data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_tablet_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=8V2-06fo" data-media="all and (min-width: 480px) and (min-device-width: 480px), (max-device-width: 740px) and (max-width: 740px)"></span>
<span data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_narrow_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=heINzacf" data-media=" all and (min-width: 740px) and (min-device-width: 740px) and (max-width: 980px) "></span>
<span data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" data-media="all and (min-width: 980px) and (min-device-width: 980px)"></span>
<noscript>&lt;img title="" alt="tarros weck jars 120 years" src="http://localhost/tarros/sites/all/modules/unveil/image_placeholder.gif" data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" /&gt;&lt;noscript&gt;&lt;img title="" alt="tarros weck jars 120 years" src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" /&gt;</noscript>
<img alt="tarros weck jars 120 years" title="" src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_tablet_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=8V2-06fo" data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_tablet_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=8V2-06fo"></span></a></div>  </div>

I am checking with Firefox on Firebug and Chrome on Developer Tools and both show that images are loaded out of viewport. Thanks a lot for your work :)

candelas’s picture

candelas commented

Estrange... In the browsers I see the image in the inspectors in the src but when I copied the html, in the image without the picture module it shows correct... mmm. Now I have to work in other thing, but I will keep investigating. If you have any tip, please, tell to me :)

candelas’s picture

candelas commented

Yes the inspectors where interfering. Now what I made it is to load the page and view the source code. I get:

With picture module:

<div class="views-field views-field-field-image">        <div class="field-content"><a href="/tarros/en/blog/weck-jars-since-1900"><span data-picture="" data-alt="tarros weck jars 120 years">
<span data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" ></span>
<span data-media="(max-device-width: 480px) and (max-width: 480px)" data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_mobile_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=VerwVtEN" ></span>
<span data-media="all and (min-width: 480px) and (min-device-width: 480px), (max-device-width: 740px) and (max-width: 740px)" data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_tablet_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=8V2-06fo" ></span>
<span data-media=" all and (min-width: 740px) and (min-device-width: 740px) and (max-width: 980px) " data-src="http://localhost/tarros/sites/default/files/styles/home_page_block_custom_user_narrow_1x/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=heINzacf" ></span>
<span data-media="all and (min-width: 980px) and (min-device-width: 980px)" data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" ></span>
<noscript><img title="" alt="tarros weck jars 120 years" src="http://localhost/tarros/sites/all/modules/unveil/image_placeholder.gif" data-src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" /><noscript><img title="" alt="tarros weck jars 120 years" src="http://localhost/tarros/sites/default/files/styles/frontpage_block/public/field/image/blog_post/blog-tarros-weck-jars--120-years.png?itok=f7jocZS_" /></noscript></noscript>
</span></a></div>  </div>

So I see the noscript tag twice and one with the real url. I imagine that because that if I scroll the image is there and in Chrome it shows as charged.

With no picture module:

<figure class="field field-name-field-images field-type-image field-label-hidden">
    <a href="/tarros/en/accessories/1-glass-lid"><img title=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" alt=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" src="http://localhost/tarros/sites/all/modules/unveil/image_placeholder.gif" data-src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" /><noscript><img title=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" alt=" tarros weck jar bocaux accesories accesorios tapa cristal glass lid" src="http://localhost/tarros/sites/default/files/styles/product_medium/public/tarros_weck_jar_bocaux_accesories_accesorios_tapa_cristal_glass_lid.png?itok=jkf3ds3n" /></noscript></a>  </figure>

I am confused because if I scroll very fast in a long page all the images are loaded. Now I have not time to investigate. Thanks for any tip :)

candelas’s picture

candelas commented

So was the browser cache :(
Now it works with images that have not picture, but the ones with picture are all loaded... maybe it has to do that picture js is loaded after unveil.js?
Thanks

gnucifer’s picture

gnucifer commented

Pretty close but this will not work. You attach unveil on 'DOMContentLoaded', but how about when the src attribute is changed by pictureFill on resize? Unveil will only run on the image for the initial screen size. When resizing the browser the src attribute will be set to the unveil_placeholder for other media.

The whole picturefill.js is pretty poorly written, an it seems like attaching the behavior like this instead:

picImg.src = Drupal.settings.Unveil.unveil_placeholder;
picImg.setAttribute('data-src', match.getAttribute('data-src'));
_copyAttributes(match, picImg);
Drupal.behaviors.unveil.attach(ps[i]);

will instead cause the attach to run multiple times for the same media query. I will have a look at it and see if I can figure out a better way of doing this.

gnucifer’s picture

gnucifer commented

I rewrote picturefill.js (well essentially wrote it from scratch) to use mql-listeners instead (which should also be much better for performance). Will post the new script once I have made sure it works as expected.

gnucifer’s picture

gnucifer commented
Status: Active » Needs review
StatusFileSize
new unveil-picture_module_compatibility-2211575-23.patch2.49 KB

Now it seems to work. The new picturefill.js should be considered pretty experimental, but I believe my implementation to be much more efficient than both picturefils.js and picture.js currently used by the picture module. Since the replacement is only done one per media query there will not be any issue with unveil being applied lots of time on the "same" image. The Picture class exposes some useful methods trough it's prototype, so we can hook into in in unveil.behaviors.js and add our behavior. It seems to work pretty nicely for me at least.

gnucifer’s picture

gnucifer commented
StatusFileSize
new unveil-picture_module_compatibility-2211575-24.patch9.56 KB

Messed up the patch. :)

gnucifer’s picture

gnucifer commented

Github link: https://github.com/david-xelera/picturefill

candelas’s picture

candelas commented

Hello

I had to finish the work and I didnt use it because the time. Now I will test it this weekend for other project and report. Thanks for your time gnucifer :)

Andre-B’s picture

Andre-B
Primary language German
Location Offenburg, Germany
commented

what's the status of this?

gnucifer’s picture

gnucifer commented

I believe it will work if you use the picturefill script in #25, and apply the patch, have been using this in production now for almost a year without any hiccups.

klokie’s picture

klokie commented
Title: Make it compatible amb picture module » Make Unveil compatible with picture module
lorique’s picture

lorique commented

Hi @gnucifer

I had almost forgotten about this module, and then got an email. So im back looking at it.. did a D8 version of it. Can you summerize this issue for me, and if something needs to be done with the D7 version of the module? if not, ill just close it.

gnucifer’s picture

gnucifer commented

@lorique Hi, I don't have the time to do so the next couple of days, but I will try to write a summary this weekend. It's been a while for me to since I looked into this, so I will have to take some time to refresh my memory. :)