Responsive Images EE4 best solution?

Question

I'm looking to do responsive images with EE4, where you serve smaller versions of an image for mobile devices. Can anybody recommend a good method? I've noticed many references to CE Image, but it appears that's only up to EE3.

Answer 1

CE Image is an excellent choice. Although Aaron doesn't specifically support EE4 with this add-on, I have had a client directly contact him and be told that the latest EE3 version should work with EE4. And for myself, it does. I currently have two EE4 sites that I did the upgrade work on that use CE Image with EE4 and we haven't noticed any issues or loss of functionality.

The add-on is a plugin, and plugins are the simplest add-on types. They essentially just expose PHP methods to a template, and usually don't interact with EEs internal APIs at all.

Reach out to Causing Effect about it, but it should work for EE4 out of the box.

But buyer beware; and it would be best if you are a developer yourself so you if you do run into minor bugs, you can fix them yourself.

Answer 2

CE Image is the all time great solution for Resizing/Responsive images for EE. If you've CE Image version 3.0.1 then no need to worry about it. It will definitely work for you. There is no special version for EE4, version(3.0.1) is fully compatible with EE4. You can rock with it.

Answer 3

Bought CE Image (for EE3) and it works perfectly with EE4, following the tutorial at https://www.aaron-gustafson.com/notebook/adaptive-images-in-expressionengine-with-ce-image/. To quote the important part of that page, use this code, replacing {embed:image} with your image URL:

<img class="page__image-header__photo" alt=""
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_small"
width="480"
height="320"
crop="yes"
interlace="yes"
cache_dir="/"
}
src="{made}"
srcset="{made} 480w,
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_medium"
width="800"
height="600"
crop="yes"
interlace="yes"
cache_dir="/"
}
{made} 800w,
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_full"
width="940"
allow_scale_larger="yes"
crop="yes"
interlace="yes"
cache_dir="/"
}
{made} 940w"
{/exp:ce_img:pair}
>

To produce this output:

<img class="page__image-header__photo" alt=""
src="about_480_320_int_c1_small.jpg"
srcset="about_480_320_int_c1_small.jpg 480w,
about_800_350_int_c1_medium.jpg 800w,
about_940_343_int_s_c1_full.jpg 940w">

That produces a working demo. Then naturally you'll modify for your needs.

Answer 4

You can also use Channel Images from Ee harbor I think (before it was Devdemon )