Video Gallery with Images and PictureFill 3.0.2

chris's Avatar

chris

15 May, 2019 08:47 PM

Hello,

I've been trying to use PictureFill with the Video Gallery where I've switched the video links
for image files.

Here's my markup right now:

<div id="video-gallery" class="royalSlider videoGallery rsDefault">
    <div class="rsContent">
        <picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source srcset="imgs/slides/slide01.png" media="(min-width: 1680px)">
            <source srcset="imgs/slides/slide01_med.png" media="(min-width: 1500px)">
            <!--[if IE 9]></video><![endif]-->
            <img class="rsImg" src="imgs/slides/slide01.png" srcset="imgs/slides/slide01_med.png" alt="Slide Image 1" />
        </picture>
            
        <a class="rsImg" href="imgs/slides/slide01.png">
            <div class="rsTmb">
                <h5>Slide Topic 1</h5>
                <span>by CMT</span>
            </div>
        </a>
        <a class="rsLink" href=""></a>
    </div>
</div>

I've seen other posts on this, but all of them are from 3 or 4 years ago, so
I'm not sure if they're still valid. Seems like my markup is probably wrong
or perhaps this can't even be done with the Video Gallery.

Any direction you can give me?

Thank you.

  1. Support Staff 1 Posted by Dmitry Semenov on 15 May, 2019 09:34 PM

    Dmitry Semenov's Avatar

    Hello,

    If you want a single slide with a <picture> element as an image, you just need:

    <div id="video-gallery" class="royalSlider videoGallery rsDefault"> 
        <div class="rsContent"> 
            <picture> 
                <source srcset="imgs/slides/slide01.png" media="(min-width: 1680px)"> 
                <source srcset="imgs/slides/slide01_med.png" media="(min-width: 1500px)"> 
                <img src="imgs/slides/slide01.png" alt="Slide Image 1" /> 
            </picture> 
            <div class="rsTmb"> 
                 <h5>Slide Topic 1</h5> 
                 <span>by CMT</span> 
            </div> 
        </div> 
    </div>
    

    You might need to style the image so it's centered properly, here is an example https://codepen.io/dimsemenov/pen/jhsJL

  2. 2 Posted by chris on 17 May, 2019 01:03 PM

    chris's Avatar

    Thank you Dmitry!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac