[Resolved] SlideShow Plugin

[Jatin]

Hi Guys,

Is there any good coded Slide Show Plugin you recommend. I do not require anyother stuff other than just images in a Gallery with text explaining about the image. Very basic one. I am using jetpack slide show for now but the problem is it overlays the text on the image and the Jetpack support is not very helpful.

I tried myself my as i am not an expert on CSS could not figure it out. I understand its not a theme related issue but if you can help me with CSS ?

As you can see in the link (in private box) the text overlays the image. The only requirement is to move the text after the image so that it does not cover the image. If thats solved i may not need to get another plugin.

Any help will be appreciated on this.

[David]

Hi there,

did you resolve the issue ?

[Jatin]

Hi David,
I tried but could not. May be you can help me changing the way captions are showing overlaying the image but i want it to display after the image so that it does not cover it. I do not want to add additional plugins to my site if this fixes it. I hope you can do some css magic which can be work here 🙂

[David]

This is how the site displays for me:

[Jatin]

Hi David, Sorry i disabled the Dark Mode Plugin Now which will show properly. https://imgur.com/X5uifFx
As you can see the caption overlays the image and sometime i have a paragraph in the caption which captures half of the image so image does not even display. Can you please refresh the site link once.

I want to display the caption after the image and not to overlay it. Any idea how ?

[Leo]

That caption is coming by JetPack slideshow so you will need to check with their support.

[Jatin]

Hey Leo. Thanks I checked with them they have no clue. I thought you can help me with CSS tricks?

[Leo]

Unfortunately not. If their support has no idea then maybe there is no way to do that with the structure.

We cannot provide support for other plugins here unfortunately.

[Jatin]

Thanks Leo, no worries. The developer said that it’s possible via the CSS but I do not have CSS expertise.

[David]

Tricky to manipulate the CSS of a Slideshow as it uses JS to calculate heights and widths.
The best i can offer is this:

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {
    margin-top: auto;
    margin-bottom: auto;
}
.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
    display: flex;
    flex-direction: column;
}
.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {
    position: initial;
    width: 100%;
}

If that doesn’t work you will need to press the plugin developer for a solution.

[Jatin]

Hi David,

I first want to thank you for going beyond and helping and providing the support to me on this. I am very close now thanks to your code which i have applied it now. you have taken me that far a little more help can fix it i think.

> The Applied fix moved the caption after the image which is perfect, but either it crops the image or caption i guess due to the size or auto parameter, not very sure and on Mobile phone the image is barely visible as it auto adjusts and end up cropping the upper part of the image and caption is not showing all the text.

[Jatin]

should this fix it ? I tried but it did not completely. Thought of sharing if you want to refer.

[Jatin]

sorry to early to say it fixed it but i applied the code and it looks better but still few more issues. like pagination is hiding the caption now 🙂

[Jatin]

Hi David,

I have got some progress on this as you can see in the test post link the caption is now under the image but if you can help me on the final bits.

> the caption is cutting off from the bottom(desktop and mobile both) https://imgur.com/3j8vVmU. is there any way to expand the caption block to show the whole text. i think the pagination dots are causing issue, can we hide it as well.

I am using below code:

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {
   margin-top: auto;
    margin-bottom: auto;
 } 

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
    flex-direction: column;
}

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {
    position: relative;
    bottom: auto;
    width: 100%;
    max-height: 100%;
    overflow: visible;
    padding: 10px 0 20px 0;
    color: #333;
    text-align: center;
    font-size: 19px;
  background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
}

[David]

The problem is the height of the slide is calculated using JS – which doesn’t account for the relatively positioned content. Aside of forcing all slides to be the same height ( which would mean empty space when a caption is shorter ) there isn’t a simple way around this.

[Author]

Posts