Add option for site masthead to have background image

[ggeisler]

Below are details for displaying a background image in the masthead. The other part of this feature is giving the user a way to select and crop an image to use as the background image -- I'll add details about that once we resolve some decisions about our general approach to image selection and cropping.

The example SCSS below should work with the existing HTML used for the masthead (though I'd like to see the default height of the masthead be slightly smaller -- 120px instead of 131px) so I'm just providing the SCSS. The approach adjusts to any height masthead (assuming the source background image is tall enough, though there will be problems with the text fitting below 60px or so), and any amount of image blur (within reason; single digits). So in theory we should be able to provide the user with configuration options for both the blur amount and the masthead height.

Some example output:

Using the current default masthead height and 1px blur:

Same image but using a larger masthead height:

Different image:

Different image with higher blur value:

Extra small viewport, no blur:

The SCSS code:

$masthead-height: 131px;
$masthead-image-blur: 1px;

#exhibit-masthead > .container {
  // Maintains the site title and subtitle at slightly below
  // vertically-centered, even if height of masthead is changed.
  position: relative;
  top: 60%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#exhibit-masthead {
  margin-bottom: 0;
  padding-top: 0;
  position: static;
  height: $masthead-height;
  width: 100%;
  // To handle potential text blurring caused by the "transform: translateY"
  // property in #exhibit-masthead > .container
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  .site-title {
    color: $white;
    text-shadow: 0 1px 0 $black;
  }
  small {
    color: $white;
    padding-top: $padding-base-vertical;
    @extend .hidden-xs;
  }
}

// This is to add a background image to the masthead, in a way that
// enables the site title and subtitle text to be visible above it.
#exhibit-masthead:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: auto;
    height: $masthead-height + $masthead-image-blur + 1;
    // Include gradient to improve text legibility,
    // especially on light background images.
    background-image:
     linear-gradient(
       rgba(0, 0, 0, 0.0),
       rgba(0, 0, 0, 0.4),
       rgba(0, 0, 0, 0.5)
     ), image-url("masthead/maps-2.jpg");
    background-repeat: no-repeat;
    // Add small amount of blur to help text stand out
    filter: url(masthead/blur.svg#blur); // for older versions of FF
    -webkit-filter: blur($masthead-image-blur);
    filter: blur($masthead-image-blur);
    // Shift image slightly to hide blurred edge of image
    margin-left: -$masthead-image-blur;
    margin-top: -$masthead-image-blur;
    overflow: hidden;
    // Add right border to image to hide lighter blurred edge
    border-right: 1px solid $black;
  }

@media screen and (max-width: $screen-xs-max) {
  $masthead-height: 65px;
  #topnav {
    padding-left: $padding-small-horizontal;
    padding-right: $padding-small-horizontal;
    width: 100%;
  }
  #exhibit-masthead {
    height: $masthead-height;
    .site-title {
      font-size: $font-size-h3;
      margin-top: $padding-base-horizontal * 2;
    }
  }
  #exhibit-masthead:before {
    height: $masthead-height + 1;
  }
}

[ggeisler]

Here are ideas for the admin configuration. These assume that #941 has been completed to create a separate tabbed page for the Appearance > Site masthead configuration.

Potential initial Jcrop options:

• Use the boxWidth option to scale image to fit reasonably in page (because the source image is very likely to be wider than the available space on the Appearance page)
• Set an initial selection that is a recommended height and width (1800x120)
• Enforce minimum height of cropped image to 120px high and 1200px wide

Something like this:

 $('#target-masthead').Jcrop({
     bgColor:     'black',
     bgOpacity:   .4,
     setSelect:   [0, 0, 1800, 120],
     minSize:     [1200, 120],
     boxWidth:    600
});

For a site that has never had a masthead image selected, the initial page might look like this (ignore the slight indention of the content from the "Image source" heading on down):

The admin can select an image from the exhibit or upload an exhibit-independent image. Ideally, the control under a given radio button is disabled unless the radio button with which it is associated is selected.

The "From this exhibit" input is an autocomplete, so selecting an item is similar to using autocomplete elsewhere on the site. The "Upload an image" works similar to the About > Contact photo selection.

When an item has been selected via either of the two radio buttons, the image is displayed in place of the "No image selected" box:

The admin can move the crop selection box around to make a crop selection; saving the changes on the page would save the cropped area and display it in the masthead (if the "Show background image" checkbox is selected; in either case the image is stored so that if the checkbox is later selected, the masthead image is displayed).

Ideally we'd also have a "Preview" heading below the image with a preview area showing just the portion of the image currently contained by the crop selection box, but I don't think this is critical here, and in my experimentation it is tricky to do with a scaled image that might vary in one of the dimensions.

Links to some examples of mastheads with different heights and blur are at: http://web.stanford.edu/~geisler/spotlight/index.html but we can start by just going with a fixed height (I'd suggest 120px) and modifying the Jcrop options (adding something like maxSize: [1800, 120]) accordingly.

[jkeck]

@ggeisler do you have the .svg file for the fallback blur filter?

[ggeisler]

Here’s the svg code. I’m not sure if you’ll be able to create this dynamically based on the users’s blur choice, but I think using the code as is, with a blur value of “1”, is fine.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="1" />
  </filter>
</svg>