Insert a big hero image in your page's header that resizes and realigns along with your browser window

May 26, 2015 13:06 GMT  ·  By
jQuery.herounit can make header images respond to the user's viewport size
2 photos
   jQuery.herounit can make header images respond to the user's viewport size

Hero images are big high-resolution photos shown at the top of a page which usually precede articles or news stories. This type of design element has been in fashion for quite some time now and you can see them on Medium articles, Twitter, Facebook, YouTube and Google+ as the big “cover photo” at the top of each user profile.

The problem with this page design element is not that they aren't needed, overused, or over-hyped, but they seem to behave weird in responsive layouts, especially if you don't know how to create them or don't retain the services of a few thousand developers like the aforementioned companies.

A simple way to implement a hero image is to use the jQuery.herounit plugin and we're gonna go through a small explanation of how this tool works and how you can use it.

First of all, you can trust the plugin since it has been battle tested on a previous version of the Artsy website, and it comes with built-in support for realigning the images both vertically and horizontally.

Second of all, jQuery.herounit can work with images at any height and doesn't require any special configuration in your code outside how a classic jQuery plugin is loaded and initialized.

Step 1: Load jQuery and the plugin. This can be done in the page's head tag or at the end of the body tag.

code
<script src="jquery.js"></script>
<script src="jquery.herounit.min.js"></script>
Step 2: Add the hero image to your HTML code. The hero image doesn't have to be in the page's header, the plugin creating responsive hero images anywhere on the page, even in the footer section. The code should be something like this:
code
<div id="hero-image-container">
    <img src="hero-image.png" />
</div>
Step 3: Initialize the plugin. This needs to be in a script tag, placed after the code loaded in Step 1.
code
$(function() {
      $('.hero-image-container').herounit({
            height: 350,
            $img: $('.hero-image-container img') });
             })
That's it! You can now add CSS to beautify the hero image and/or its container, overlay transparent gradients on top, add borders, hover effects, and anything else you may think of.

jQuery.herounit comes with a working demo, but if you can't notice the (sample) cat image realigning itself on responsive layouts we made an alternate demo featuring our logo in the middle of the page that's much easier to tell when it's being resized and realigned on smaller screens.

Hero images are the easiest way to draw the user's attention (2 Images)

jQuery.herounit can make header images respond to the user's viewport size
On smaller screens and on mobile devices, the image realigns into the center of its container
Open gallery