TUTS: Adding slide images

July 24th, 2011 | General news | 13 Comments

During this short tutorial I’ll show you how to add new slideshow images and configure basic slide settings. First, you need to prepare slide images you’d like to display on your homepage. It is not necessary to resize images if you’ve enabled Dynamic Image Resizing tool on your Theme Options panel. Resize script will generate preview images for you so you don’t need to worry about the dimensions. However, you should not attach very small images for slideshow to pervert image distortion.

Now, when you know which images you want to display login to WordPress Dashboard (i.e. wp-admin) and go to Pages -> Add New. We use page-based slider on our themes, so you can link your slide content directly to the page with necessary information.

Add Page title, content and scroll down to Preview Image section.

Section to upload Preview Image

Click Browse and pick image from your computer, then click Open and Save.

Uploaded Preview Image

You can now scroll to the top and Publish your post. We’ve created 1 page with preview image which you’ll add to homepage slider. If you need more slides, you should add more pages, it’s quite easy to do.

Almost done, all you need to do is to mark the page you’ve created as a Slide.
Go to Theme Options panel and open Front Page Settings tab. You’ll see Homepage Scrolling page section with the list of all your current pages on the right and pages marked as Slides on the left. If this is a new install, the left area will be blank. Click the Plus icon to mark page, it will automatically move it to the left.

Adding Scrolling pages

You can add more pages and sort page order simply by dragging pages on the left side of homepage scrolling section.
Make sure you’ve saved your changes by clicking on Update Options button. You can go to homepage and check homepage slider.

Now you can adjust Slideshow Effect by picking desired style from the list.

List of pre-configured slideshow effects

Or control slideshow Timeout (Milliseconds between slide transitions) and Slide speed (Speed of the transition)

Slideshow Configuration

That’s it, you’ve made it!

Add Comment

13 Responses

Add a Comment