Jump to content

adaptation to 4k resolution prestashop theam


Nikpro

Recommended Posts

Hello everybody :)  .

 

 

 

soon all will go to the high resolution screen.

4k and 5k. Even statistics show visits with this screen size.

 

 

Therefore, I would like to prepare your site layout and images to this evolution.

 

 

How to make the possibility of

 

1. Determine the resolution of the screen (on the basis of it to give the image)

Let's say there is no point to download large image for 5k on a mobile phone.

 

 

 

1. Mobile-resolution (up to 600) - the name of the image file "-mobile"

2. The tablet resolution (from 900 to 1200) - the name of the image file "-tablet"

3. For computers ordinary resolution (c 1200 to 1700) - the name of the image file "-pc"

4. For computers 4k resolution (c 1700 to 2200) - the name of the image file "-4k"

5. For computers resolution 5k (c 2200 to 2700) - the name of the image file "-5k"

  • Like 2
Link to comment
Share on other sites

This is going to be difficult, one thing I would suggest is not to use adaptive images. They cannot be used with a CDN. The only good way to do it really would be to append all of the image types on the end of the image urls using javascript. But that seems like it would be complicated. 

 

Maybe someone else has a better idea.

Link to comment
Share on other sites

  • 2 weeks later...

 

 got a response from Russian developers (my country)

 

 

 

This is not necessary in html5 added srcset.

Example:

 

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" srcset="{$link->getImageLink($product.link_rewrite, $product.id_image, '5k')|escape:'html':'UTF-8'} 2700w, {$link->getImageLink($product.link_rewrite, $product.id_image, '4k')|escape:'html':'UTF-8'} 2200w" />

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...