0

I've got a field that editors can add a number to which will make sure that images are all that width or height. The images are resized with CE Image.

I also want to be able to serve up different resolution versions of the image to be handled by srcset.

I thought I could do something like this:

        srcset="{exp:ce_img:single
                src='{url}'
                width='{width}'
                url_only='yes'} 1x,
                {exp:ce_img:single
                src='{url}'
                width='{exp:math formula='{width} * 2'}'
                url_only='yes' 
                parse='inward'} 2x"

That does output a resized image, but the values are coming out wrong.

For instance, for a series of images where the width is set to 350, I'd expect the 2x value to be 750. Instead I'm getting:

  data-srcset="/assets/img/sized/assets/img/content/Image1_350_262_85.jpg,
        /assets/img/sized/assets/img/content/Image1_1187_890_85.jpg 2x"

  data-srcset="/assets/img/sized/assets/img/content/Image2_350_262_85.jpg,
        /assets/img/sized/assets/img/content/Image2_1187_890_85.jpg 2x"

  data-srcset="/assets/img/sized/assets/img/content/Image3_350_233_85.jpg,
        /assets/img/sized/assets/img/content/Image3_1335_890_85.jpg 2x"

  data-srcset="/assets/img/sized/assets/img/content/Image4_350_239_85.jpg,
        /assets/img/sized/assets/img/content/Image4_1301_890_85.jpg 2x"

  data-srcset="/assets/img/sized/assets/img/content/Image5_350_233_85.jpg,
        /assets/img/sized/assets/img/content/Image5_1409_939_85.jpg 2x"

i.e. the width values are a bit all over the place.

Anyone have any ideas about what might be going wrong or how to get the correct output?

1

I think you have a conflict with plugin in a plugin. You could surely try to use pass="inward" on both math and ce image. However, maybe you're better of with an embed where you first get all the sizes and pass them to the embed that does the image generating. You'll get something like:

{exp:channel:entries}
{embed="embeds/get_images" the_url="{the_file_field}" the_first_width="{editor_set_width_field}" the_second_width="{exp:math formula='{editor_set_width_field} * 2'}"}
{/exp:channel:entries}

And the embed would be something like

srcset="{exp:ce_img:single
src='{embed:the_url}'
width='{embed:the_first_width}'
url_only='yes'} 1x,
{exp:ce_img:single
src='{embed:the_url}'
width='{embed:the_second_width}'
url_only='yes'} 2x"
| improve this answer | |
  • Yep, that works, thanks! – Tyssen Oct 23 '19 at 23:45

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.