Setup

Image Size Setting

To let Plone automatically resize images to the necessary size, a new image size settings needs to be created.

  1. Click your name in the top right of your site on the red bar and click "SITE SETUP". If you do not have this option, you need your Site Administrator to do this.
  2. In "Site Setup" go to "Image handling settings".
  3. Click the "Add Allowed image sizes" button.
  4. In the new input field that is created, put hero 1024:1024.
  5. Click "Save".

The Portlet

  1. On your front page, click "Manage portlets". If you already have a front page portlet named "marketing_banners", click on it, then click "Edit without visual editor", and skip to step 5.
  2. In the top portlet area find the "Add portlet..." dropdown and select "Bootstrap Row".
  3. On the "Edit static text portlet" page, under the "Text" section click "Edit without visual editor".
  4. For the "Portlet header" enter marketing_banners.
  5. In the Text section enter: 
    <div id="marketing_banners"></div>
    <script type="text/javascript" src="//louisville.edu/web/helpcenter/plone-4-user-helpcenter/code/js/hero.js" defer></script>
    That must be the only thing in there.
  6. Click "Save".

Styles

  1. On your front page, click "Edit".
  2. Under "Local CSS", at the top add: 
    @import url("//louisville.edu/web/helpcenter/plone-4-user-helpcenter/code/css/hero.css");
    Note: You cannot have any CSS code above an @import statement, neither on the front page's "Local CSS" nor in your "Site-Wide Local CSS" in "Site Setup". You will either need to move all code into a .css file and import it with an @import statement of its own, or put the above @import statement above all other CSS code. You may put it at the top of your "Site-Wide Local CSS".
  3. Click "Save".

Banners Folder

If you already have a "banner" folder in your site root, you can skip this part.

  1. On your front page, click "Add new..." then "Folder".
  2. For "Title" put banners.
  3. Click the "Settings" tab and check "Exclude from navigation".
  4. Click "Save".
  5. On the right side of the green menu bar, click "State: Internal draft" then "Publish externally".