Using math with a channel entries variable to work out the height/width value to pass to CE Image

Question

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?

Answer 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"