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
Follow the repo’s README.md instructions to begin the code editing workflow. To test your changes locally follow the instructions in the Local Development Stack article.
Place your image file (1600x225 px) in [site-dir]/branding/sections in your college site folder (e.g. rsc/branding/sections/admissions-records.png)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
...
| Code Block | ||
|---|---|---|
| ||
<div id="branding-img" class="admissions-records students"> |
Place the image
Prepare an image with the high and width dimension of 1600x225 px
Name the image 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 your image file in your colleges branding section folder
docroot/sites/default/branding/sections
e.g. docroot/sites/default/branding/sections/admissions-records.png
In your code editor, open [site-dir]/themes/[site-dir]/partials/_branding.scss in your site's theme folder. Add a line for your section's image using the class name noted earlier.
...
Refresh your web browser. May need to clear Drupal cache lando drush cc allcaches.Follow the README.md instructions to push your changes as a pull request.
Merge Changes to Pantheon
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...