Plugin or hack to replace hero image by a slideshow?

[Vinc26]

Hi there,

I'm looking around, but can't find a simple way to replace the static hero image by a simple and smooth slideshow. Any suggestions?

[bjazmoore]

Is this going to be a different slide show on every post or just a slideshow on your main blog page?

[Vinc26]

Hi, for now, my goal is to get a different slideshow on each page and post. That's why I was thinking to replace the hero image, which is different on each page and post.

[candidexmedia]

Which theme are you using?

And would the slideshow appear just on its page, or in the post listing indexes too?

What library are you using to create the slideshow?

[Vinc26]

I'm using Simple template. The idea is one different slideshow per page or post. No slideshow on post listing.
For now, I haven't choose any slideshow library. :)

[bjazmoore]

I do have a hack for you. It is not pretty, but it is workable. It allows you to:

1. Hide the featured image on the post but not on the posts list (blog page).
2. inject the code (a simple DIV)for placement of a slider - this requires a plugin.
3. Place the slider on the post (but hide it on the post list - blog page).
4. store the images in Publii's media folder. You can reuse images on multiple pages since they are stored in a central location.

If you are interested - I will write up an explanation. This is only tested with the Simple 3 theme.

Of course all that said - this would be a much better create a child theme and modify the theme files to support a slider natively. I am not planning to explain that process though.

Here is a highly compressed image of the slider in action.

[Vinc26]

Hey ! Sounds good ! I'm doing my website using Simple template ;) I can't wait to read your explanation which will probably be a good tutorial for many others!

[bjazmoore]

Hey ! Sounds good ! I'm doing my website using Simple template ;) I can't wait to read your explanation which will probably be a good tutorial for many others!

OK - this is a hack! There is no question about it. The right way to do this is to create a Theme Override and make a second post template that embeds the slider and removes the featured image. That said - you can do it without touching the theme files.

Step - 0: Back up your site!

Note this hack requires the theme Simple 3.x

1. install the Key Replacement plugin
2. Create a rule:
   
   The replacement rule is: <div ID='slider01' class='slider'></div>
3. In the post add the shortcode key from step 2 in the location you want the slider to be. I put mine on the first line of the post.
4. Now you need some CSS to suppress the featured image on posts (It will cause ALL posts to not display a featured image). Add it to Custom CSS:

.post .hero__image-wrapper {
    display: none !important;
}

5. Get VanillaSlider from the "dist" folder of the repository for the project: VanillaSlider on GitHub.
   Using the file manager copy the minimized version of the slider (vanilla-slider.min.js) to the root folder (not the media/files folder).
   
6. Add the reference to the vanillaslider js file. Also add the code for the first slider. Add this code to the Footer custom HTML section:
   
   That code is:

<script  type='text/javascript' src="vanilla-slider.min.js"></script>
<!-- Slider01 -->
<script  type='text/javascript'>
    var containerId = 'slider01';

    var options = {
        transitionZoom: 'in',
        bullets: true,
        arrows:false,
		auto: true,
		autoTime: 5000,
		autoPauseOnHover: false,
        images: [
            'media/files/image1.jpg',
            'media/files/image2.jpg',
            'media/files/image3.jpg',
            'media/files/image4.jpg',
			'media/files/image5.jpg'
        ]
    }
    var slider = createSlider(containerId, options);
</script>

Note that the slider code is only good for one slider with the specific image set (although you can use that one slider in multiple places) that slider will have the ID of slider01 based on the replacement rule and the code above. You need to create a unique rule set and slider code for each slider as explained below.
7) Upload your images with matching names to the media/files folder (not the root folder) using the File Manager:

8) Create some CSS for the slider. The class slider was applied making styling easier. Here is the CSS that will apply to all instances of the slider. Put it into the Custom CSS section:

.post .slider {
    margin-left: -95px !important;
    position: relative  !important;
    max-width: 125%  !important;
}

.home-template .vanilla-slider-container {
    display: none  !important;
}

@media (max-width: 999px) {
  /* Your styles for viewports less than 1000px wide */
    .post .slider {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: -2.5rem !important;
        position: relative  !important;
        max-width: 100%  !important;
    }
    .vanilla-slider-bullet-container {
        display: none !important;
    }
}

This CSS makes adjustments for the slider as the view window gets smaller. It also removes the slider from the post-list page preview.

To add a second unique slider to another (or the same) post - repeat steps 2 and 3. Add more custom code to the Custom HTML section - specifically this code for the second slider (which assumes your new rule has a slider id of "slider02"):
That code is:

<!-- Slider02 -->
<script  type='text/javascript'>
    var containerId = 'slider02';

    var options = {
        transitionZoom: 'in',
        bullets: true,
        arrows:false,
		auto: true,
		autoTime: 5000,
		autoPauseOnHover: false,
        images: [
            'media/files/image1.jpg',
            'media/files/image2.jpg',
            'media/files/image3.jpg',
            'media/files/image4.jpg',
			'media/files/image5.jpg'
        ]
    }
    var slider = createSlider(containerId, options);
</script>

I hope that was an adequate explanation. I repeat though - this is NOT the preferred solution to this problem rather a working hack. that is very theme specific.

[Vinc26]

Thanks! I'll try that ASAP 🙏

[Vinc26]

Thanks!!! It works great!

[Vinc26]

Wow, sorry, but I found a problem: it works only on the homepage. If not homepage, it doesn't find vanillaslider js file.

So I've tried to replace the call by src="/vanilla-slider.min.js">, using a /. But it doesn't work.

Any suggestion?