The FlexSlider is a utility we use in MODx to help your parish display content visually on your site. Using a combination of images and text, you are able to highlight announcements, events, and more on your parish's home page.

Create Graphic

Choose a graphic or photo to display as your Slider image. You will want something that is landscape dimensions (wider than it is taller). FlexSlider will auto-resize images automatically for you, so your slides can all be different sizes, though we recommend that you choose a consistent size for your Slider images. You may either create a graphic with overlayed text using photo editing software (i.e. Adobe Photoshop) or just crop a photograph or graphic to the proper size and let the slider overlay text for you. As a good rule of thumb, if the graphic you are posting has text already on it that is descriptive enough for your site visitors, then there is no need to overlay text through the slider.

Resizing Images

It is best practice to always resize your images before you upload them to your website, regardless of their usage. When using imagery within your slider, we recommend that they are all a consistent size. It is not required, but you will offer your visitors a better user experience when they are a consistent size. Instructions for editing image sizes can be found below for both Windows and Mac users:

Windows:

          Resizing an image: http://windows.microsoft.com/en-us/windows7/resize-a-picture-using-paint
         Cropping an image: http://windows.microsoft.com/en-us/windows7/crop-a-picture-using-paint

Mac: http://www.makeuseof.com/tag/easy-ways-resize-photos-mac/

Step-by-step instructions to add a Slider Item to your Website

1. Login to the website manager

2. In the document tree to the left, you should have a Extra Elements or Homepage Elements directory and then expand the Homepage News Slider directory.

3. Click on the icon displayed to the left of Homepage News Slider in the document tree to reveal the context menu and then select Create Weblink here from the menu.

4. Fill in the following required fields:

a. Title: Give your item a descriptive (but brief) title

b. Template Variables - Spotlight Image: Click the Insert button to choose or upload an image through the Resources Browser to post in the slider.

With just the minimum required fields, your slider image will appear on your homepage as just an unclickable graphic. To get more power out of your Slider, consider using some of the optional fields.

Optional Fields

c. Weblink: So your visitors can click on your slider image or text and be brought to another page, use the weblink box. To link to an internal page, enter the ID of that page here. To link to an external page, enter in the complete web address (must begin with http:// ). If you leave this field blank, it will simply display the graphic on its own that is unlinkable.

d. Long Title: If a value is entered here, a gray semi-transparent bar will be visible at the bottom of the graphic and the long title will be displayed there.

e, Summary: If a value is entered here, a gray semi-transparent bar will be visible at the bottom of the graphic and the summary will be displayed there. You may use up to two descriptive (but brief) lines of text.

f. Publishing Information: Under the Settings Tab, you may choose a Publish or Unpublish date to automatically have the slider item appear or disappear from your site at the appropriate time.

g. Menu Index: Use menu index to change the order of the items that are being displayed. Items are displayed from lowest to highest, and zero (0) is the lowest possible number. Items may have the same number; if this is the case, sorting then happens based on other criteria.

5. Click Save.