Skip to content

GitLab

Open
Created by Derek Adams@derekOwner

Image Billboard

Screen_Shot_2017-09-14_at_11.33.43_AM

Machine Name

image_billboard

Fields

billboard_image - this will be used as a background (omit alt, but we'll bubble up the title element in layout)

Layout

Full bleed image fixed at 250px tall. Use the title value of the billboard image as the title tag on the main billboard div/section element

Questions

Should the billboard still be 250px tall in mobile? @megan @anna

Notes

This billboard interacts in an interesting way with the breadcrumb. The breadcrumb appears on top of the billboard. Potential solutions:

  1. Set a class on the page element based on whether the breadcrumb is present. Then target a negative top margin on the whole assembly equal to the breadcrumb's height. Unfortunately, we don't know how tall the breadcrumb is if it wraps, particularly on mobile, so this isn't a good solution.
  2. In page_preprocess, we check for the presence of a skinny billboard, and if found, we set a class on the breadcrumb that reduces its height to 0, but sets overflow-y to visible. I can't think of any drawbacks to this method.
Edited by Matt Moen