Show & Tell - Focal Point Image Component

We've been heads down on an exciting phase 1 project that's launching in the coming weeks.  Hence, the lack of blogging recently.  It's a great project, that we can't wait to share.  It'll be the subject of an upcoming series on strategy and context marketing programs.  

This project also has a lot of functional elements that we just think are cool.  This show & tell post that features our extension of the advanced image module that can be found in the Sitecore Marketplace.  

cropped 2.png

This module enables content authors to set a focal point on an image and then image cropping is done with the focal point in the center.  This is a great tool for our latest project, as the client has thousands of high quality images that are used in publishing.  We've used this module in three important components; the hero image component (above), a cropped image component and a call to action component.  

cropped-edit.png

The cropped image component is designed to fill the width of the placeholder its dropped into (e.g., 2, 3, 4 column placeholder).  The author can set the ratio of the image container and the focal point on the image.  

The hero image component has a fixed orientation and a full width display.  This component automatically cuts both a full screen image and an optimized mobile image based on the selected focal point.  

The call to action component has a fixed (square) orientation and a selectable tint that overlays the image.  The author selects a background image, a focal point, the tint (to ensure that text is readable over a lighter image) and title & button text.   

CTA.png
CTA - Edit.png

This is a great marketplace module that we haven't seen used much.  It's now part of our component library and something we think will get a lot of use.  Try it out in your next project.  And, thanks to Saad Kahn for sharing.