MockoB

Is the featured products working for you @violinparts ? I just added couple of products and they didn't show on homepage.

U r number 1 @datakick ! @lesley please include the fix for the next release.

It's not affiliated with the full page cache, because I never enabled it and my new arrivals still disappeared.

I also noticed it, but I can't confirm when it happens. And since I ctrl+f5 multiply times and changed the cache settings also, I don't know when exactly the new products started showing again. But they disappeared and showed multiply times. And I don't want to open new topic about it, but when i add product to the cart from the quick view window, the product is added but it redirects me to the product page. I don't find it normal behavior.

It could be a bug because it's same behavior on my test 1.0.4 site. Although I didn't uploaded the recommended size image. It's even more shifted on my site.

@lesley i just checked the github issue. Just to clarify it, the hdpi images don't show anywhere, not just in product list. The above is just an example. The best and easiest way to include them is to add those 2x image to srcset also, everywhere image is loaded.

Thank you very much @lesley !

Sorry @lesley but i really thought all this trouble is for getting hdpi images work. All those examples I gave are not because I want to nag with you. I spent hours to find those sources and read about srcset, sizes, picture, descriptors etc. I only want to help me and others with making the template with better user experience. You don't think that all those ecommerce platforms use retina images with no purpose? I'm struggling since day one here to make someone to make it work. All those examples I gave above are explained very well and are working solutions. I don't know if they are the most modern techniques, but they will do the job. I actually changed the code above and the 2x images are loading. Unfortunately I have to find all images in the template and change the code manually and after the next update it will be all gone. I don't think you take it seriously, but the design and little things like retina images, icons, vector graphics make a site looking good, which gains trust and makes customers get back to it. Other thing I noticed is whether or not lazy "load images" is switched on or off in the back office, the images in the products list are loaded with the code within picture tag. Does it have to be that way?

Oh sorry, I thought you made an effort to finally make an use of those 2x images as being told. First example will load hdpi images on all devices and almost all browsers, the second one you already use, as may be seen in the quoted snippet above. Speed is ranking factor yes but decent image compression will bring much more use than the above code... it's good to check 1.0.4 lighthouse performance too, I did it and it was 53 at best I achieved. If there is any secret to achieve the results from your blog post, it would be nice to share them. P.S is there any easy way to find every single use of the srcset attribute in the community theme?

I am pasting below the code snippet from product-list-imtem.tpl concerning images: ``` {if !empty($lazy_load)} {/if} {if !empty($webp)} getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" type="image/webp" itemprop="image" > {/if} getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" width="{getWidthSize|intval type='home_default'}" height="{getHeightSize|intval type='home_default'}" > ``` Image dimensions are set in preferences/images like that: homedefaultsmallest - 211x211 homedefaultsmaller - 218x218 home_default - 250x250 The size difference in kilobytes with the above resulutions is: between homedefaultsmallest and homedefaultsmaller - 0.43kb, and between homedefaultsmaller and homedefault - 1.93kb. I'm sure it will be different for different images, but does it worth to use the responsive images with such small difference in size and resolution? If it is made for better performance on responsive displays, there is not much profit, if no profit at all. If all that is made for the hdpi displays, then the loaded pictures in that particular case should be just homedefault and home_default2x (which is generated when you activate hdpi images in back office). And since there is no obvious advantage from using the above resolutions, and if the point is getting the hdpi images work. You could use x-descriptors WITHOUT sizes, like that: <img srcset="home_default.jpg, home_default2x.jpg 2x" src="home_default2x.jpg" alt="x-descriptors without sizes"> I can see you use picture tag, but you don't use img src tag for fallback if the browser doesn't support srcset or webp, like you use it in the above code snippet without lazy_load. Or the browser will load empty image? You could easily add retina support within that picture tag by defyning the 1x and 2x file, like that: <picture> <source srcset="home_default_smaller.jpg, home_default_smaller2x.png 2x" media="(min-width: 992px)"> <source srcset="home_default.jpg, home_default 2x" media="(min-width: 1200px)"> <img srcset="home_default.jpg, homehome_default2x 2x" alt="Example for retina image support"> </picture> Code snippet is taken from here. According the author Shopify do it like that. Of course not all browsers and versions support the picture tag yet, so it would be great to find a way to implement lazy load for the first example (without ) if possible, in case someone (like me for example) need both - retina images and lazy loading with most possible support. What do you think?

Yes @lesley it should be loading the larger images for high density pixel devices. By default ps and tb use homedefault for the images in product list. I gave example above with product-list-item.tpl. What we try to achieve with the srcset attribute is to load different images for devices with different viewport. I don't have an explanation why you instead adding larger image than the default one (which always has been homedefault) you added 2 smaller images. So now for devices with width less than 768 you load image homedefaultsmallest, for width 992 you load homedefaultsmaller and for width 1200 you are loading the default image. So actually you don't take any advantage of the homedefault2x image which is created when you set hight density screen images generation through back office. So basically instead trying to load the larger images for those screens (homedefault2x) you load in best case the image which has always been loaded before. All examples of srcset I checked try to load larger image than the default one, here you try to load two smaller images which I believe even will get things worse on the mentioned above resolutions. You just need to make it load 2 images in the above given case: homedefaul and homedefault2x for high pixel density screens. That's it. And that have to be remade for all image instances in the template. Please @Lathaneo and @ssimard confirm what I'm saying, I know you use already retina images.

Yes I can see that, but why it is trying to load homedefaultsmallest; homedefaultsmaller and homedefault when it should load just homedefault and home_default2x? Please check the example above.

Ok, I'm not a programmer but why it is loading homedefaultsmallest; homedefaultsmaller and homedefault for the product images in product-list-item.tpl for example? I believe it should load just homedefault on none high density devices and homedefault2x on high density devices. I changed them all to homedefault and added 2x like that to that line: {$link->getImageLink($product.linkrewrite, $product.idimage, 'home_default2x', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w Now the 2x image is loaded, but it may be on all devices. I don't know because all my screens are high density ...

Ok. Thanks. But does the image have to be png? Because I'm using jpg images. Last edit: never mind I just read why it is there :)

Why is this needed in all images: src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=”

I just installed1.0.4 for testing and it is working fine so far. Just found couple of minor bugs. And I will continue testing these days with adding carriers, test orders, etc. There is webp images option in preferences/images. It should be removed when it is not available. The high res images don’t show on apple devices and I don’t think they are loading on my pc either. I know they may be not working, but I’t could be something easy to fix… Which image is exactly loading here? : It's from the new arrivals carousel on the homepage. When I open the third link for example, I see it is loading image with resolution 250x250 which is set in back office images for home_default, but the loaded x2 image should be with resolution 500x500. It is replacing the name of the image with the alt image name, and I can’t see which one is loaded, but there is x2 at the end as it should… Apple touch icons are working properly!

@lesley I already donated once for the cause. Next time I will do it when it makes sense for me. I'm pretty sure there are many ppl here who already use tb and didn't donated a cent, but I don't blame anyone. @vincentdenkspel maybe I didn't explained it like I wanted. Many ppl who were excited at the beginning already left, many of them valuable members (not like me). And I'm already considering some paid solutions, but since I'm using ps for years and tb is great alternative, and I waited more than a year already for the next release, I think I could wait a little more. I really missed that part for the paid version, but I don't mind to pay for it. I'm running 1.5 store and if I will get support, after I pay for it, it would be even better for me. @Traumflug thanks for the information, I didn't know that. But I saw that @eleazar mentioned it in 10 February, which is 3 months ago. So he has maybe outdated version of the tb's aeuc module, or you may be missed what is he talking about in that topic. If it is the first one I'm sorry for pointing that topic, I thought it could be of any help for the project.

I will become a patreon as soon as I start use tb. And I apologize I made you nervous but sometimes it's needed to, to get your attention especially when it is concerning such thing like AEUC module, which is with great importance for many of us.

@lesley it's not just me who feels that way and you know it! And it's not negativity, it's the truth you don't like. My positivity and enthusiasm disappeared maybe 6 months ago. I'm one of few who still believe in the project (or just waited too long to start from beginning with something else). You promised GDPR solution at least 3 months ago, there were some very good suggestions to implement, I'm curious to see which one is used. I received some time ago email from prestashop concerning the solution and it wasn't mentioned it is paid. And I don't mind to pay for working solution, why would I? I don't get it why is there bug reporting section if you don't read it.

Reported 3 months ago by @DRMasterChief in that topic https://forum.thirtybees.com/topic/1115/diese-macke-im-aeuc-modul/16 again mentioned by me in that topic https://forum.thirtybees.com/topic/1102/anonymize-ip-active-in-google-analytics-module/24 and no one seems to care about it... but it's just stupid eu thing which brings the question about the GDPR. Thanks god prstashop will come with solution these days! And I hope it will be compatible with tb project.

Great post @rolly1975, I'm happy there are ppl here who are not scared to tell the truth as is! After almost an year waiting, there will be realeased version without any new features (eventually lazy loading), with some fixed bugs (not all as may be seen in github). The only neat new feature after all was the webp images. Great news ...

Thanks @Lathaneo I have to find a way to implement it for all images I guess. On my ps 1.5 site the @2 images are shifted to right on @3x devices like iPhone 6plus. That is because the height and width properties are not specified within the code (that's what I read somewhere). But it looks perfect on your site on both my iPad 4 and iPhone 6p. It would be nice to do it for your logo and the categories on your homepage. Congrats for your theme, it is very nice looking and clean template!

Thanks for your support @Lathaneo ! -I may place it in the header.tpl file, am I right? -when turn on high res images in backoffice the 2x images are generated for all instances. But doesn't the script look for @2x with @ prefix? -to have it for all instances of the product image (and all images in the template), I have to find all of them in every tpl file and place that code snippet in all the files, right? May I see live example of your implementation if you don't mind? You may send it in personal message if you like. Edit: if width and height properties are not specified, like it is in the template code, isn't the image shifted on @3x devices? Thank you!

It's since iPad 3 and iPhone 4. But it is hard to find smartphone on the market without high density screen at the moment. Even the regular computer screens will be such soon.

@hubbobubbo it never worked, so you should implement @ssimard's solution in all your tpl files where you need to have high res images (everywhere I believe)... or you should wait for next release of 1.0.4 and check if the new solution work, if not, you have two options: 1st wait for 1.1.0 which will break compatibility and if you use custom theme or modules, will be never able to use it. Or 2nd - hire developer to make all the needed changes in all files for you, or use another proper solution. And of course if you find another solution you may share it with us :)