Slack: How to make a hero shot and select the focal point for mobile styling
How Do I?
Does anyone know of a field type (addon?) that would allow the focus point of an image to be selected for the best mobile styling of a hero shot? For example, if the car detail is at the bottom right on landscape or large screens, it needs to be centered on smaller screens. I considered using a grid row select field with 6 or 9 options (like top left, top, top right, etc.), but since this is a common requirement, I wondered if there was a more established approach in ExpressionEngine.
Interested in learning more solutions or want to get to know other EE users? Read more about joining the slack here! Join Our Slack!
Numerous users chimed in regarding approaches to image focus point selection for mobile and desktop hero images:
highlights that he requires two differently sized images—one for desktop and one for mobile—and uses manipulations for intermediate sizes. He notes that if the mobile version isn’t uploaded, it leads to poor cropping.
agrees with this approach but mentions the challenges posed by larger sites with many headers, suggesting that a single focus point selection would save time on image editing.
recommends the JCOGS Image add-on, which allows specifying the focus point for cropping based on various criteria, including a facial recognition algorithm. They also mention an upcoming update that will introduce a new “Image Field” type enabling multiple crop focus points, expected to be released around EEConf.
mentions that the Ansel plugin offers a user interface for selecting the portion of an image to use.
uses Ansel with a main banner image and allows editors to upload a mobile version to manage the crop proportions. If no mobile image is provided, the main banner image is used with Ansel’s resizing feature.
finds the JCOGS Image documentation on cropping parameters helpful, as it simplifies the process, allowing for better alignment with CSS without extensive manual adjustments.
Thanks for your instruction. This is what I’m looking for.