Add a Slideshow to Suffusion Theme Using Photonic tutorial will show you how to easily add a slideshow using Photonic and much more.
Last Updated: December 7, 2019
Latest News: Updated a broken link.
Important: Remember Photonic plugin has some settings you can adjust for your needs!!!
I am using photonic because it was developed by sayontan the same developer of suffusion.
Before you start configuring the plugin, have you uploaded the images? Are these images attached to the page or post you are adding a slideshow too?
Hint: It is import to make sure the slideshow images are attached to the post or page!!!
What You Need:
- Suffusion Theme (Optional = I added this theme because it is developed by Sayontan Sinha. Both plugin and theme work flawlessly together.)
Add a Slideshow to Suffusion Theme Using Photonic
Step 1 ) Create a new post or page and click on Add Media button.
Step 2 ) Next select Photonic -> WP Galleries and adjust the settings according to your needs. See image below.
WP Galleries Settings Part 1
- Gallery ID (*)
- Image IDs
- Display Style
- Number of photos to show
- “More” button text
- Photo title / camption
- Number of columns
- Thumbnail width
- Thumbnail height
Step 2-a ) The following allows you to set up the following options.
WP Galleries Settings Part 2
- Thumbnail size
- Slides image size
- Slideshow Effects
- Slideshow Controls
- Time between slides in ms
- Time for each transition in ms
- Click on Insert into post button when you are ready.
Step 3 ) The following is a sample code that will be added to your post or page once you complete the settings above.
[ gallery type=’default’ style=’strip-below’ fx=’fade’ slideshow_height=’500′ columns=’3′ thumb_width=’75’ thumb_height=’75’ thumbnail_size=’thumbnail’ slide_size=’full’ timeout=’4000′ speed=’1000′ ]
Note: you will not see any images because there is no image ids=” in the shortcode above.
Step 4 ) While you are in visual mode, click on the pencil as you see in the image below to edit the the slideshow/ gallery.
Step 5 ) The following image shows you 3 images selected to add to the gallery/ slideshow. To add these images to Photonic Gallery, click on Add to Gallery button select your images and then click on Add to Gallery. You will see your images ready to be added to the gallery as illustrated in the image below. Then click on Update gallery button.
Once the images are added to the gallery you will see in the shortcode the following ids=”5982,5980,5978″. In your case the ids will be different. These 3 ids represent each image added above.
Before you publish your page or post test to see how it looks. You might have to adjust some settings, once you are happy then publish your post or page.
Step 6 ) Now if everything goes well, you should have a simple slideshow on your page or post. See image below.
Step 7 ) What if you don’t see any of the images in your slideshow? Try the following procedures. See images below.
Go to Media -> Library and check the images you added to the slideshow. I can see the images are not attached to the post I created to include the slideshow. You need to click on Attach.
Once you click on Attach link above, you will see the following window. This gives you the option to select to what you would like to attach the image to. In this case I am attaching the image to Photonic Slideshow, which is a Post. Then simply click on Select.
Now when you view your media gallery again you will notice that the three images from my slideshow are now added to Photonic Slideshow post.
Click on the following URL Add a Slideshow to Suffusion Theme Text Widget.
If you have any questions please let me know. I keep updating this tutorial from time to time.
Photonic Plugin Tutorial List: