2

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.

5

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.

| improve this answer | |
  • I'm using CE image withe EE4, for the momemt no problems encountered. – Stéphane Sep 2 '18 at 4:11
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.

| improve this answer | |
1

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

| improve this answer | |
  • Yes fully compatible with EE4 – Stéphane Sep 3 '18 at 5:01
  • I've been using Channel Images for EE2 for years now. It's always worked great--DevDemon's software's always been great. Since this is still supported I'll look into this, as well. – jphansen Sep 10 '18 at 13:54
1

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.

| 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.