OIT Tech Source

Blogging Slideshow

Example of what a slideshow looks like.

We added this new feature for your sites and it allows you to insert it anywhere in your posts or pages.

This part is focused on how to create a slideshow: slide, slideshow category before you insert it on your post or page.

Let’s start with “Slideshow Category”. It’s the same concept with Post’s category if you are already using this. Go ahead and create a new slideshow name like “SlideNews” and click “Add New Slideshow”. It will appear on the list.

Screenshot of “Slideshows” page

Before we create several slides, my advice is to make sure you create all images in the same size (width and height with 72dpi) for the specific slideshow. The results will show all slides as the same size even while transitioning to a different slide. It makes a big difference and is less headache for you. For basic instructions on resizing images, read our blog post: AEM: Resizing Images to Fit the Image Slider/Slideshow Component.

Now let’s go to “Slide” and go ahead to add a new slide. Slide is a single slide/image and not mutli (which would be a “slideshow”). Add a new title and select the featured image you want to use for the slide. The Slide Link and content info is an option. See this sample screenshot.

Screenshot of “Add New Slide”

  1. Enter Title, helps tracks the file if you want to edit it in the future
  2. Slide Image: click “Set Featured image” to select the image you want to use for your single slide
  3. Slide Link: if you put a link here, the whole image will be linkable (option)
  4. Content editor: you can write anything you want here, but it will overlap your slide (option)
  5. Slideshows panel: select the one you want to use
  6. You can always click “help” for more information

Now you can repeat this process for a few slides, but make sure each slide is already selected under the specific slideshow.

When you’re done, go back to the “Slideshows” page (see Screenshot of “Slideshows” on #3) and see “SlideNews” list or title that you created, under the table’s column, “Shortcode”(if you don’t know what this is, you can read about it here: “Shortcode”). Copy it then you can paste it anywhere on your post or page. Once you pasted it, don’t forget it to save (update) it!

I’m sure you noticed the basic transition animation when you click to go next/previous slide. Guess what? You can change it to display different effects and animation! When you’re on the Slideshows page, see the “Help” tab on top/right and click it to expand it (see Screenshot of “Slideshows” on #4).  Then select “Transition Animation” and it will show you a list of different animation names that you can add to your shortcode, like this: [flexslider show=”SlideNews” effect=fade]. See result below.

Hope it’s not hard for you to create like this! Soon I will write about “Slideshow Header” feature under “Customize”.