How to add a slideshow to your page with the Pockets plugin

R_JR_J Cheerleader & TroubleshooterMunich Moderator

Before you even start: you know that slideshows are awfully annoying? Nobody likes them. But if you want to add one to your forum, you can follow this description.

You all know what a slideshow is but how does it work? There are either JavaScript or CSS only solutions available. Which one you prefer doesn't matter for the next steps. We need to be able to insert CSS as well as JavaScript to the page, but we do not need to write a plugin or a custom theme for that.

Vanilla ships with a very handy plugin called "Pockets":

Administrators may add raw HTML to various places on the site. This plugin is very powerful, but can easily break your site if you make a mistake.

Powerful but dangerous, okay, we'll take care...

With the pockets plugin we can insert code snippets to our forum so let's enable the plugin - simply enabling it cannot break our forum and will not change the look or it's behaviour, so no need to be cautious during this step. Go to yourforum.com/dashboard/settings/plugins and enable the Pockets plugin. Right after that the link to the settings appear and we head on to look at that by clicking on it.

The plugin allows a test mode for new pockets, so we can try out some things without frightening our users.

If you have hit the "Add Pocket" button which is available in the heading row, a new screen pops up where we can enter some information. First press the toggle button that you want to Enable this pocket - again: be careful what you do on a live installation!

Give it a good Name like "Slider" or even better, if you plan to use it in the header of your forum and consider to annoy your users with more than one slider call it "Header Slider".

Fill in the Body with a placeholder like "Hello pocket world" for now. We will come back to that later on.

Take a look at the available options of the Page dropdown. I choose "discussions" here, but you could take whatever you like. CSS from your main forum and from the dashboard differs, so I would suggest not to use "dashboard" for now.

Under Location start with Content and test later on what else is possible.

The option "Repeat" allows many nice settings, but since we want our slider to be above the content, simply leave it on "Before"

There is nothing to do right now on the "Conditions" row. Take a look at the options later on and decide if some of those settings make sense for you.

The last thing to do before saving our new pocket is to enable "Test Mode", so that only you will see the test pocket.

After you have saved this, visit your page and you see a very decent "My pocket world" beneath your forum banner. Now, let's turn that into a fancy slideshow!

Well, I do not know how to create a slideshow, sorry. But I know where to find some scripts. A slideshow is also called a slider or a carousel so browsing through this will show something suitable:

https://github.com/topics/carousel, https://github.com/topics/slider, https://github.com/topics/slideshow

In reasonable time I didn't found a script which fulfilled all of my criteria, but I found that nice little piece of work:

A vanilla 😎 js solution was what I was looking for. As a preparation, download the files https://raw.githubusercontent.com/zoltantothcom/vanilla-js-carousel/master/dist/vanilla-js-carousel.css and https://raw.githubusercontent.com/zoltantothcom/vanilla-js-carousel/master/dist/vanilla-js-carousel.min.js and save them to your /uploads folder

So we said we need some CSS, some JavaScript and we will need our images. Let's start with adding the html markup for the images into our pockets Body input box

<div class="js-Carousel" id="header-slideshow">
<ul>
<li><img src="https://unsplash.it/600/200?random=1"></li>
<li><img src="https://unsplash.it/600/200?random=2"></li>
<li><img src="https://unsplash.it/600/200?random=3"></li>
<li><img src="https://unsplash.it/600/200?random=4"></li>
<li><img src="https://unsplash.it/600/200?random=5"></li>
</ul>
</div>

Add the style and script to it like that:

<link rel="stylesheet" href="uploads/vanilla-js-carousel.css" />
<script src="uploads/vanilla-js-carousel.min.js"></script>

Now we only have to create a carousel/slideshow from our html markup:

<script>
var carousel = new Carousel({
   elem: 'header-slideshow',
   dots: true,
   arrows: true,
   buttons: true,
   autoplay: true,
   infinite: true
});
</script>

You can find more about the options used here on the GitHub page of the carousel script. Save that, go to your discussions page and you will find your nice new slider!

If you are happy with what you see and want to present it to your users, don't forget to go and edit the pocket a last time and disable the last toggle "Test Mode" so that all of your users can see that slider.


Kasparrbrahmsonphreak

Comments

Sign In or Register to comment.