Best Practices for structuring Responsive Images for CMS
How Do I?
What is a good way plan/structure image fields for users to insert responsive images in Expressionengine?
I have this architecture/interior design website where the client wants precision control in terms on how each image is presented in all kinds of devices and screen resolutions. What the client wants is for each image to be cut and positioned nicely, for example, a tall structure with a portrait image will show a different image when the device orientation is rotated to landscape.
Usually this is done easily with a Grid field with 6 different cols of image field (each denoting a different image for a specific device/orientation); with rows allowing multiple images to form a image carousel. The problem comes where the carousel itself is part of a group, and has additional fields to add such as carousel group title, additional information, and the carousel itself can be inserted in any where on the page (courtesy of Fluid field).
Besides grouping all carousel related information together into a channel and using relationships to link to their data in the fluid field, what will be a better alternative so that the user doesn’t need to head to different channels to edit the page entry?
Channel images will do this
Lots of control over how images are processed, custom data fields per image (like a grid field), custom pre determined sizes to make from one image, control for the content editor to edit the image in the entry, image categories (for adding to different galleries/parts of your page). it’s really good, not free though. https://eeharbor.com/channel-images
Ansel - https://buzzingpixel.com/software/ansel-ee - may work here. It allows authors to edit/crop images, and you can also specify things like size ratios for each crop, e.g. if a certain image needs to maintain a 4:3 aspect ratio.