Splash Image Setup

There are two ways to set up Splash images on Western Drupal 8 sites.

In both cases, it's helpful to enable the "Heroes and Headers" module that comes with your site as this allows for cropping and responsive display of your splash images.

How to Enable and configure the "Heroes and Header" Module

Hero Image is the large, nearly full screen size splash image. Header Image is the shorter, banner-type splash image.

On newer sites, all of the necessary modules may already be enabled. In case they are not:

  • Go to Extend and enable the following modules:
    • Image (under the WWU Block Types category)
    • ImageWidgetCrop (under the Media category)
    • Responsive Image (under the Core category)
    • Heroes and Headers (under the Other category)

Option 1

Create an image block and place it in the splash area.

This method is useful when you only want to use one splash image across the whole site.

 

Skip to Option 1 Tutorial

Option 2

Use a view to control the splash image.

This method is best if you want to have different splash images for different pages across the site. It allows for a fallback splash, so not every page needs a splash image associated.

 

Skip to Option 2 Tutorial

Option 1 Tutorial

Use image block (one or just a few splash images across the whole site)

Configure Form Display

  1. Go to Structure > Block Layout > (Custom Block Library) > Block Types > Image > Manage Form Display
  2. Under the Widget column for the Image item, select ImageWidget Crop
  3. Click the little cog on the far right
  4. Select all of the Hero and Header crop types from the select list under the Crop Type label
  5. Click Update
  6. Click Save
Widget is set to ImageWidget crop and the crop types have been selected (screenshot)

Set the View Modes

  1. Go to Structure > Block Layout > (Custom Block Library) > Block Types > Image > Manage Display
  2. Click the Custom Display Settings Drop down
  3. Select the check boxes for Hero Image and Header Image
  4. Click Save
  5. Two new tabs have appeared at the top of the page: Hero Image and Header Image. For each one:
    1. Click on the tab
    2. Click the little cog on the far right of the Image row
    3. Under Responsive Image Style select Splash - He* Image (matching whichever tab you're on)
    4. Click Update
    5. Click Save
Image has "Responsive image" set as format and "Header Image" selected as the setting (screenshot)

Create an Image Block

  1. Go to Structure > Block Layout > Add Custom Block > Image
  2. Fill in the block description (ie "Splash image")
  3. Upload an image
  4. Crop the image (click the accordion item to open the crop settings)
    • There are many different crops to set, these are for the different viewport sizes.
  5. Click save
  6. Go to Structure > Block Layout
  7. In the Header section click Place Block.
  8. Find the splash block you just created and click Place Block next to it.
  9. On the next screen, uncheck Display Title, be sure the Region is still Header.
  10. For the drop down under the label View Mode, select either Header or Hero images, depending on whether you want a short header image or a tall one.
  11. Click Save block

Now if you navigate back to the site, your image should be in place and the right proportions. If you resize the screen, it will auto resize to the different crops that you just set.

The hero image has been placed in the header region (screenshot)

Option 2 Tutorial

Create a splash image view (different splash images for different pages)

For this method, you'll create a image field on the content types you want to have custom splash images for (typically Basic Pages.) You'll then display that field with a view block.

Add the Image field to the Content Type

  1. Go to Structure > Content Types > Basic Page > Manage Fields
  2. Click Add Field
  3. Check if field_featured_image exists under Re-use an existing field
    • If it does, select this field and click Save and Continue
    • If it does not, under Add a new field select Image (under the Reference section)
      • Put "Featured Image" as the label. The machine name should be field_featured_image
  4. Click Save and continue
  5. Leave all of the settings as defaults, scroll to the bottom and click Save settings
  6. Go to Structure > Content Types > Basic Page > Manage Form Display
  7. Find the Featured Image field, and under the Widget Dropdown select ImageWidget crop
  8. Click the cog at the end of the row, and select all of the Crop types that either have Hero or Header in the name
  9. Click Update
  10. Click Save
reuse an existing field with field_featured_image selected(screenshot)

Add new image: "Image" field is selected and "Featured Image" is set as the label

Featured image has "ImageWidget crop" set as the widget (screenshot)

Create the splash view

  1. Go to Structure > Views > Add View
  2. Name your view, something like "Splash image"
    • Under View Settings set Show: Content of type: Basic page sorted by: Unsorted
    • Under Block Settings check "Create a block" and change "Items per block" to 1
  3. Click "Save and edit"
  4. Under the Fields section, click Add
    • Search for Featured Image
    • Check the box next to the field (this is what you created in the last section!) and click Add and configure fields
    • On the next screen, change Formatter to "Responsive Image** and Responsive Image Style to either Splash - Header Image or Splash - Hero Image
    • Click Apply
  5. Under the Fields section, click on the Content: Title field link. Click Remove
  6. Under Filter Criteria, click on each of the existing filters and click Remove, so there are no filters
  7. On the right side of the screen, click Advanced
  8. Next to Contextual Filters click Add
  9. In the search box, type "ID", then scroll until you find the item that says ID in the first column, and Content in the second column. Check this item
  10. Click Add and configure contextual filters
  11. Click When the filter value is not available
  12. Select PRovide default value and in the drop down set it to Content ID from URL (this is how the view will know which image to display--by the node URL on the page being visited.)
  13. Click Apply
  14. Now Click Save to complete your block.

When complete, your view should look like this:

screenshot of the view, with the field and contextual filter set as in the instructions

Place the splash block

  1. Go to Structure > Block Layout (/admin/structure/block)
  2. Next to the Header section, click Place block
  3. In the filter, type whatever you named your splash view, eg "Splash image" and click Place block

Add an image to a basic page

  1. Either edit an existing basic page, or create a new one.
  2. Upload an image to the Featured Image field you created earlier and set the crops
  3. Save the page and navigate to it.

At this point, your splash image should show up! It will only show up when you are on this page.

 

Optional: Create a fallback image

If you do not create a fallback image, the default header will be a blue gradient. If you would like to have a fallback image:

  1. Go to Content > Media > Add Media > Image
  2. Upload the fallback image and add Alt Text
  3. Click Save
  4. Click on the image file name to go to the images page
  5. On this page, click on the images file name again to open it directly.
  6. Copy the URL, you will need to paste it into a text field in the view you created previously.
  7. Go to Structure > Views and find the splash image block you created earlier. Click Edit
  8. Under Filter Criteria
    • Click Add
    • In the search box, type Featured Image
    • Check the box next to Featured Image (fieldfeaturedimage:alt)
    • Click Add and configure filter criteria
    • Under Operator select "is empty (NULL)"
  9. Next to No Results Behavior click Add
    • In the search box, type "Text area" and select that item
    • Click Add and configure no results behavior
    • In the text box under the content area, add the following HTML tag: <img src="//designsystem.wwu.edu/%5Byour%20fallback%20image%20url%5D" alt="[your fallback image alt text]" />
    • Replace [your fallback image url] with the URL you copied in step 6. Tip: remove everything before the /files part of the url, so https://mysitedev.wwu.edu/files/2019-12/fallback.jpg becomes /files/2019-12/fallback.jpg
    • Replace [your fallback image alt text] with descriptive text for the image
  10. Click Apply
  11. Click Save
Example of html for no results behavior

If you navigate to a page that does NOT have an image uploaded you should see the fallback image.