Section Banner Images

Owned by Colen Wilson (Unlicensed)
Last updated: Sept 09, 2020 by Peder Klockmann (Unlicensed)
2 min read

Adding banner images is accomplished through SCSS changes that require Developer access to your college website on the Pantheon platform. The process involves creating a Multidev branch of your college website, cloning the Multidev locally using GIT, making the SCSS changes and compiling them with a SASS compiler, testing your changes locally, and pushing them into your Multidev branch for further online testing. Once you have tested your changes on the Multidev, you can submit a merge request via Slack to have your changes merged to the development environment.

Instructions

Before you begin, please read through the Development section of the Knowledge Base. Make sure you can make a Merge request in order to complete the following steps.

Get the CSS class name

  • Open a browser and navigate to the a page on your college website with the image to replace

  • Hover over the image and right click and select “Inspect” to view HTML source for the image

  • Find the div id="branding-img" element wrapper. Note the class names for this div element

<div id="branding-img" class="admissions-records students">

Prepare and place the image

  • Prepare an image with the height and width dimensions of 1600x225 pixels

  • Name the image the same as the CSS class name you found above, make sure it is all lowercase letters and includes dashes instead of spaces

e.g. rename Admissions and Records1600x255.PNG to admissions-records.png

  • Place the image into its respective branding folder, create the folder if one doesn’t exist

    • Award: docroot/sites/default/branding/awards
      e.g. docroot/sites/default/branding/awards/airline-operations.png

    • Location: docroot/sites/default/branding/locations
      e.g. docroot/sites/default/branding/locations/conference-center.png

    • Program: docroot/sites/default/branding/programs
      e.g. docroot/sites/default/branding/programs/aviation.png

    • Section: docroot/sites/default/branding/sections
      e.g. docroot/sites/default/branding/sections/admissions-records.png

Add the style

  • In your code editor, open docroot/sites/default/themes/[site-theme]/partials/_branding.scss

  • Add a line for your banner image using the class name noted earlier in the appropriate area: parent, section, or sub-section

  /* Section */   #branding-img.admissions-records { background-image:url(#{$site_branding_path}/sections/admissions-records.png); }

  • Save and recompile your college's SCSS folder

  • If using the Lando development stack, you can use lando gulp

  • The git status command will show your modified _something.scss files and the recompiled style.css and style.css.map files.

  • Refresh your web browser, you may need to clear Drupal caches to see changes

Merge Changes to Pantheon

Merge Request

Related articles