Caption covers image completely in responsive mode

roger's Avatar

roger

20 Nov, 2017 09:38 PM

Hi,

I need to display a video with a fairly long caption, and in responsive mode on a smaller screen (like iphone 6), the caption covers the image completely and makes it impossible to click. I tried all the width/height combinations, and auto scale is the one that gives the best results (the proportions of the image are kept in all sizes). Auto height works, you can see the image and the caption, but the image becomes much too high when the width diminishes

I read through all the examples and other posts but couldn't find the same issue, could you point me to a solution ?
You can see the page here http://photo-vesinet.net/therese-coursault-2/

Thanks,

RP

  1. Support Staff 1 Posted by Dmitry Semenov on 21 Nov, 2017 06:49 AM

    Dmitry Semenov's Avatar

    Hello,

    Move the caption below the main sliding area, e.g.:

    jQuery('.royalSlider').each(function() {
      var sliderEl = jQuery(this);
      sliderEl.after( sliderEl.find('.rsGCaption') );
    });
    

    http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

    Or use template with image + text below (which can be selected in General Options section).

  2. 2 Posted by roger on 21 Nov, 2017 08:46 AM

    roger's Avatar

    Thanks, the « image+text » option did it for me!

    However to make it work I had to put in functions.php the sample code you give for supporting responsive images (transform image_tag to responsive_image_tag ), otherwise the main image wouldn’t display at all on first access or refresh - only when resizing the page!

    The settings that work best are: Auto height, Fit into area, caption Off

    Thanks again
    RP

    De : Dmitry Semenov [mailto:[email blocked]]
    Envoyé : mardi 21 novembre 2017 07:49
    À : Roger Politis <[email blocked]>
    Objet : Re: Caption covers image completely in responsive mode [RoyalSlider WordPress Issues #46511]

  3. 3 Posted by roger on 23 Nov, 2017 07:22 AM

    roger's Avatar

    Unfortunately I spoke too fast !

    If I replace image_tag with responsive_image_tag, the slides are not treated as videos any more, but as regular images! (there’s no “play” icon on them, and if I click them it just advances to the next slide)

    Is there some other tag I should put in the markup, or different parameters to make it work ? Apart from this “detail”, the rest (aspect, scaling, responsiveness, placement of text) is absolutely perfect.

    Thyanks,

    RP

    De : Roger Politis
    Envoyé : mardi 21 novembre 2017 09:44
    À : 'Dmitry Semenov' <[email blocked]>
    Objet : RE: Caption covers image completely in responsive mode [RoyalSlider WordPress Issues #46511]

    Thanks, the « image+text » option did it for me!

    However to make it work I had to put in functions.php the sample code you give for supporting responsive images (transform image_tag to responsive_image_tag ), otherwise the main image wouldn’t display at all on first access or refresh - only when resizing the page!

    The settings that work best are: Auto height, Fit into area, caption Off

    Thanks again
    RP

    De : Dmitry Semenov [mailto:[email blocked]]
    Envoyé : mardi 21 novembre 2017 07:49
    À : Roger Politis <[email blocked]<mailto:[email blocked]>>
    Objet : Re: Caption covers image completely in responsive mode [RoyalSlider WordPress Issues #46511]

  4. Support Staff 4 Posted by Dmitry Semenov on 23 Nov, 2017 07:27 AM

    Dmitry Semenov's Avatar

    You may add something like:

    {{#video_url}}
        {{image_tag}}
    {{/video_url}}
    
    {{^video_url}}
        {{responsive_image_tag}}
    {{/video_url}}
    

    Which means {{responsive_image_tag}} will be used only when video URL is not defined.

  5. 5 Posted by roger on 23 Nov, 2017 09:20 AM

    roger's Avatar

    Thanks for the quick response, you really have great support.

    Unfortunately it doesn’t work. If I choose auto height, the image is not displayed as this is what happens when I combine auto height and image_tag.
    If I disable auto height and specify the auto scale height it works of course, but with the same problem as before – text disappears on small screens because the height is constrained.

    I need to find a way to keep the general behavior of responsive_image_tag, but make it work with video…

    RP

    De : Dmitry Semenov [mailto:[email blocked]]
    Envoyé : jeudi 23 novembre 2017 08:27
    À : Roger Politis <[email blocked]>
    Objet : Re: Caption covers image completely in responsive mode [RoyalSlider WordPress Issues #46511]

  6. Support Staff 6 Posted by Dmitry Semenov on 23 Nov, 2017 09:47 AM

    Dmitry Semenov's Avatar

    If I choose auto height, the image is not displayed as this is what happens when I combine auto height and image_tag.

    Disable image scale mode and image align center in Image Options section.

  7. 7 Posted by roger on 23 Nov, 2017 12:00 PM

    roger's Avatar

    Ok, this works. I wouldn’t have thought of disabling image scale on my own!

    Thanks

    De : Dmitry Semenov [mailto:[email blocked]]
    Envoyé : jeudi 23 novembre 2017 10:48
    À : Roger Politis <[email blocked]>
    Objet : Re: Caption covers image completely in responsive mode [RoyalSlider WordPress Issues #46511]

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