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".

Adding

• Add images to the "banners" folder created during setup.
• Use the image's "Title" and "Description" fields to set the text on the hero banner. Descriptions can only be on one line.
• Use the image's "Dates" tab to set Publishing and Expiration dates to make your banner appear or disappear when you want.
  Note: when logged in, Publishing/Expiration dates are ignored and all (or the first 4) images will show on the banner.
• Use the "banners" folder's "Contents" tab to arrange images in the order you want them to appear.
  Note: only the first 4 published and non-expired images will be shown.

Positioning

By default images are cropped and centered. The second line of the image's "Description" field is used to change positioning settings. If the second line is missing or empty, the default settings are used.

1. First, the script checks for a valid CSS Background Position value.
2. If the value is not that, it is interpreted to be a CSS color. The image will be scaled to fit instead of cropped, and the color used as the background. The value auto will set the background color to be an average of the image's colors.

Links

The third line of the image's "Description" field is used to set a link on the image. Whatever value is found on the third line will be used as a link.

Examples

This image is cropped and centered by default because it has an empty second line.

https://louisville.edu/web/helpcenter

This image is cropped. 25% of the vertical crop will be off the top.
center 25%
http://google.com

This image is scaled. The background color is generated automatically.
auto
http://events.louisville.edu

This image is scaled down on a black background and doesn't link anywhere.
black