4

I have a slide show that shows logos of different dimensions working well in HTML/CSS - the image output looks like below. I'd like to only upload one retina/hdpi image once for the entry where the asset is. I'd like to use image transforms to output the retina images but need to preserve the width and height of the original as they vary in look and dimensions. I can't find an example. I have read this post 10 times but not really seeing if this holds a solution.

HTML code:

[image tag srcset01] srcset="
    /assets/images/logos-sponsors/company1_logo.png 1x,
    /assets/images/logos-sponsors/company1_logo@2x.png 2x,
    /assets/images/logos-sponsors/company1_logo@3x.png 3x" alt="company1_logo" width="130" height="12">


[image tag srcset01] 
 src="/assets/images/logos-sponsors/company2_logo.png" srcset="
    /assets/images/logos-sponsors/company2_logo.png 1x,
    /assets/images/logos-sponsors/company2_logo@2x.png 2x,
    /assets/images/logos-sponsors/company2_logo@3x.png 3x"  
alt="company2_logo" width="52" height="30">


[image tag srcset01]  src="/assets/images/logos-sponsors/company3_logo.png" srcset="
    /assets/images/logos-sponsors/company3_logo.png 1x,
    /assets/images/logos-sponsors/company3_logo@2x.png 2x,
    /assets/images/logos-sponsors/company3_logo@3x.png 3x" 
    alt="company3_logo" width="130" height="11">

The goal is to have the image uploaded once and then

3

I'd like to use image transforms to output the retina images but need to preserve the width and height of the original as they vary in look and dimensions.

This statement kind of contradicts itself. :) You want to create different sizes, but keep the width and height of the original? My interpretation is that you'll always be uploading an image that's a number of times bigger that the @1x size? Let's say you always upload these images @3x, try something like this:

{% set myImage = entry.myImage() %}
{% set baseWidth = myImage.getWidth() / 3 %}
{% set baseHeight = myImage.getHeight() / 3 %}

<img 
  src="{{ myImage.getUrl({ width: baseWidth, height: baseHeight }) }}" 
  srcset="
    {{ myImage.getUrl({ width: baseWidth, height: baseHeight }) }} 1x,
    {{ myImage.getUrl({ width: baseWidth*2, height: baseHeight*2 }) }} 2x,
    {{ myImage.getUrl() }} 3x"  
  alt="{{ myImage.title }}" 
  width="{{ baseWidth }}" 
  height="{{ baseheight }}">

Hope this helps.

|improve this answer|||||

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.