How to add a slideshow to your page with the Pockets plugin
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:
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.
Comments
This have been a good help to me:
But I would guess it requires Bootstrap and if the only thing you like to have is a slider, I would look for a dedicated script that isn't part of another framework. If you are already using the bootstrap theme, on the other hand, it might be the best choice.
Anyone got a demo I could see? Kindly help out with it. (I need to make sure this is worth implementing on my forum first)
@Cirphrank there is nothing much to demo since this is not tightly integrated with the forum, nor should it. The official demo would probably count as much. Here is the demo link as posted above. And if all goes well, (no conflict of CSS or JS) that's exactly how it should look on your site. If you have any other questions I am sure I would help too
http://zoltantothcom.github.io/vanilla-js-carousel/
I just looked it up and realized I did not calmly read earlier, it's for images not popular post or any kind of post even at that. Albeit, I'll star this, should come in handy when I want to start monetizing the forum. Thank you!