Choose Image Focus

Allows client to choose focus of image within the CMS, using the alignment controls (pull-right and pull-left).

For this, you will want to edit the scss file of whatever area will be having images with the focus chosen–for example, the hero.scss.

This has been tested on Bootstrap 4 sites. It will likely work on BS3 sites with minor adjustments, but may need more major changes to work on BS2 sites.

To have the image center as the site resizes down, or “crop to center”, see this snippet. This choose-focus snippet will not work in combination with the crop-to-center snippet.

How To - Styling

img {
  @extend .position-relative;
  min-width: 100%;
  max-width: none;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  &.pull-left {
    left: 0;
    transform: none;
  }
  &.pull-right {
    left: auto;
    right: 0;
    transform: none;
  }
}

Tags: BS4, hero, scss, sass