Crop Image to Center · Banno Docs

Allows you to define a container that holds an image and have it center crop the image inside that container.

The function finds an image in the container you define, gets the image’s height, and sets the outer container height to that image height. Then, the image is set as the background of the container, with the background-size set to cover and position to center. It will also set the opacity of the image to 0 so we only see the background image, but also retain the responsive nature of the opaque image.

Features have also been added to set the alignment of the cropping of the hero image (left, center, right), so that it doesn’t always have to be center cropped. Also, you can assign a parent container that will have a class “Initialized” added to it so you can assign styles to make the hero banner fade in or animate once the image adjustments are finished. Both arguments are optional, and the position attribute (“pos”) will default to “center”.

This script should be in our base files by default.

To allow the client to choose if the image is left- or right-focused, use this snippet. This crop-to-center setup will not work in combination with the choose-focus snippet.

How To

Script

banno-functions.js

Add this script to the banno-functions file if not already there.

banno.site.centerCropHero = function(obj, pos, parent){
  if (top === self) {
    if(!pos) { pos = "center"; }
    $(obj).each(function(){
        var $cont = $(this);
        var $img = $(this).find("img");
        if($img.length > 0) {
          var h = $img.height();
          var src = $img.attr("src");
          $cont.css({ "height": h , "background-image": "url(\'"+src+"\')", "background-size": "cover", "background-position": pos });
          $img.css({'opacity': 0 });
          if(parent) {
            $(this).closest(parent).addClass("initialized");
          }
        }
    });
  }
}

scripts.js

Add your image container within this function, and place the function in the ELSE of the window load, so that it only happens on the published page.

Also make sure to place it in the resize function so that it runs when the window gets bigger or smaller.

banno.site.centerCropHero(".center-crop", "center", ".center-crop-parent");

HTML

Here is an example hero ad setup that will allow the crop to center function to work. {% raw %}

<div class="hero">
  <div class="hero__slider slider" id="slideshow--main">
    <div class="hero__slider-slide center-crop-parent remove-blank">
      <div class="hero__slider-image center-crop">
        <div class="image" data-content-block="hero1image" data-content="content" data-editable="editable">
          {{#page.hero1image}}
            {{& content}}
          {{/page.hero1image}}

          <!-- @if NODE_ENV!='production' -->
          <img src="https://picsum.photos/id/125/1920/400" alt="Slide 1">
          <!-- @endif -->
        </div>
      </div>
      <div class="hero__slider-content p-2 text-center d-flex flex-row align-content-center justify-start align-items-center">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-11">
              <div class="content hero__slider-text" data-content-block="hero1content" data-content="content" data-editable="editable">
                {{#page.hero1content}}
                  {{& content}}
                {{/page.hero1content}}

                <!-- @if NODE_ENV!='production' -->
                <h2>Banking <strong>Anywhere</strong></h2>
                <a href="https://www.google.com" class="btn btn-default">Mobile Banking</a>
                <!-- @endif -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- add however many slides you need -->
  </div>
  <!-- hero navigation can go here if you need it-->
</div>

{% endraw %}

Example Sites

Tru-Fi Credit Union

Tags: bs3, bs4, script, js, javascript, jquery, html, hero, slick, slider