Editing the Homepage Slideshow

Instructions for editing the Homepage Slideshow

1. Prepare Slideshow Image

Before uploading the image, it should be optimized for the web. 

Recommended image width should be around 1500px wide and be saved at 72dpi.
Keep in mind that an image that is too small will be stretched to fill the space, and may appear distorted.

There are several free online tools available to help scale and optimize images for the web.

Here are a few:

  1. Image Resize.org: https://imageresize.org/
  2. Bulk Resize Photos: https://bulkresizephotos.com/
  3. Compressor.io - https://compressor.io/compress

The slideshow will center the image in the space, so you may need to crop the image to get it to appear in the slideshow window correctly. 

Crop image as needed. Image will be centered inside of slideshow.
 

 

2. Upload Image to Slideshow Folder

Slideshow images are stored inside the 'Slideshow' folder located in the 'site-images' folder here:
https://pcabhub.org/en-us/site-images/slideshow/folder_contents

Click on 'Contents' folder in edit bar, then select 'site-images' and then 'Slideshow'.
Add image to this folder, using the 'Add New' link on the left.

 

3. From Homepage, select "Manage portlets"

(You must be logged in to edit) 

How to manage slideshow portlet

 

4. Edit Slideshow

The slideshow is setup as an HTML List. Each list item has an image, title, description and a link to the content (content should already be in place). 

Simple edits can be made directly to existing content, but in some cases it's best to work in HTML view.

Switch to code view (Tools > Source)

A quick way to add a new slide is to copy all of the code from one of the list items. Look for the opening <li> tag and select everything up to the closing </li> tag. Then select "copy", position your cursor where you want the new slide, and select "paste". You can then edit the slide to show your new content.

<li><img class="image-inline" src="link to image" />
<div class="overlay-block">
<h2>Main Title</h2>
<div class="readmore"><a href="yourlinkhere">Read more</a></div>
</div>
</li>

 Add the slideshow images to the 'Slideshow' folder under the 'Contents' folder. You can select the images using the image tool in the WYSIWYG editor.