Support » Plugin: Recent Posts FlexSlider » Post title missing from slider

  • Resolved rspence27278

    (@kclarksc2)


    After updating to 2.0, the title on the slider is now missing. There is also a lot of whitespace at the top of the image.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi I have the same problem as well. After the recent update the post title does not show in the recent post slider. Can someone assist with this issue?

    The same for me too. I’ve had to go back to the previous version on my live site.

    Existing version: https://rgneighbours.net/
    With new Recent Posts Flexslider 2.0.0: http://rgneighbours.elementfx.com/rnn-test1/

    I found that re-saving the widget without the caption enabled centred the image better but I still can’t see any trace of the caption when I enable it (and the picture shifts down as described). Any help appreciated 🙂

    • This reply was modified 2 years, 6 months ago by dneale123.

    I’ve examined the generated code for the two different sites, which should look the same but don’t. The difference seems to be that the div containing the caption appears after the div containing the image in the version that appears OK but in version 2.0.0 the div containing the caption appears first. An example of the code for one slide is shown below:

    ======
    OK (old version):
    
    <div class="slider-wrap">
    <div class="front_page_top"><section id="recent-posts-flexslider-3" class="widget recent-posts-flexslider-class amr_widget">
    
    <div id="slider-wrap">
        <div class="flexslider" >
            <ul class="slides">
                <li style="text-align:center; max-height: 320px;"><a href="https://rgneighbours.net/new-computer-support-sessions-for-reading-residents/" title="New computer support sessions for Reading residents">
                   <div style="height: 320px"><img width="600" height="300" src="https://rgneighbours.net/wp-content/uploads/2017/01/spreadsheet1.jpg" alt="New computer support sessions for Reading residents" />
                   </div>
                   <div class="flexslider-caption">
                      <div class="flexslider-caption-inner"><h3>New computer support sessions for Reading residents</h3><p>
    The "Get Online Reading" project to help the town’s people use the internet has been steadily expanding and is now available at&nbsp;&hellip;</p>
                      </div>
                   </div>
                   </a>
                </li>
             ...
    
    ======
    Bad (V2.0.0):
    
    <div class="slider-wrap">
    <div class="front_page_top"><section id="recent-posts-flexslider-3" class="widget recent-posts-flexslider-class amr_widget">
    
    <div id="slider-wrap">
    	<div class="flexslider">
    		<ul class="slides">
    			<li style="max-height: 320px;"><a href="http://rgneighbours.elementfx.com/rnn-test1/new-computer-support-sessions-for-reading-residents/" title="New computer support sessions for Reading residents">
                   <div class="flexslider-caption">
                      <div class="flexslider-caption-inner"><h3>New computer support sessions for Reading residents</h3><p>The "Get Online Reading" project to help the town’s people use the internet has been steadily expanding and is now available at&nbsp;&hellip;</p>
                      </div>
                   </div>
                   <div class="slide-image-container" style="max-height: 320px"><img width="600" height="300" src="http://rgneighbours.elementfx.com/rnn-test1/wp-content/uploads/2017/01/spreadsheet1.jpg" alt="New computer support sessions for Reading residents" />
                   </div>
                   </a>
                </li>
             ...
    ======
    • This reply was modified 2 years, 6 months ago by dneale123.
    Plugin Author David Wolfpaw

    (@wolfpaw)

    Hi @kclarksc2 I apologize for the delay in responding.

    Are you using this plugin on your site? I do see you using FlexSlider on your site, but it appears to be a version that is bundled with your theme, not this plugin.

    Plugin Author David Wolfpaw

    (@wolfpaw)

    Hi @dneale123 I apologize for the delay in responding.

    I see that you’ve customized the plugin a bit, which looks great on the page that you have it working on, but appears to have a few bugs on the page with issues. For whatever reason a few things being output by the custom css on that page have code errors. as an example, this is on your homepage:

    
    .flexslider .flexslider-caption {
        position: relative;
        bottom: 230px;
        text-align: left;
        padding-left: 30px;
        padding-bottom: 32px;
        max-width: 80%;
        background: rgba(0,0,0,0.3);
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    

    While this is on the test page:

    
    .flexslider .flexslider-caption {
        position: relative;
        bottom: 230px;
        text-align: left;
        padding-left: 30px;
        padding-bottom: 32px;
        max-width: 80{7f624ae056de7b3c58862bbdf3a4ecbc47e5f02f7f46cc84c321efdcc8faf923};
        background: rgba(0,0,0,0.3);
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    

    Without knowing the rest of the makeup of your site I would only be guessing, but a few things, including a built-in WordPress function, esc_sql can cause that type of error on percentage signs: https://make.wordpress.org/core/2017/10/31/changed-behaviour-of-esc_sql-in-wordpress-4-8-3/

    While that may not be the full source of issues (it could just be a bug on that staging site), I would ask if you are able to remove the slider widget from the sidebar, update the plugin, put the widget back into place, and re-apply the custom css changes that you made, probably adjusting a few of them for the new layout.

    I apologize for the extra stress this has caused for you. I made this a major update instead of a minor release specifically because some of the underlying markup was changed to better accommodate responsive images of different heights and more flexible positioning of captions of varying sizes.

    • This reply was modified 2 years, 5 months ago by David Wolfpaw. Reason: fix code backticks

    Hi David,

    The same also happens on my live site (that’s where I found it first then went back to the previous version straight away) – which iswhy I set up the staging site to do some testing. The CSS glitches probably happened in the setup process – I used WP Clone and it was a bit less straightforward than I remember.

    I think I’ve fixed the CSS now, and have removed the widget and reinstalled it but it made no apparent difference. I’ll take a deeper look at my CSS when I have time. In the meantime, if you have any further suggestions they would be very welcome 🙂 Kind regards, David.

    Plugin Author David Wolfpaw

    (@wolfpaw)

    Were you able to get this sorted? I’m looking at your live site now and it appears to be using version 2, and the styling looks better.

    Hi David,

    No, the live site is still using version 1.6.3. After fixing the CSS on the staging site it’s unfortunately no different.

    Does the order in which the HTML code for the slide image and caption is generated
    (see my previous post) give you a clue as to what’s going on?

    Kind regards, David.

    Plugin Author David Wolfpaw

    (@wolfpaw)

    The order of the HTML changed on purpose in the update. There are now two issues that I see:
    1. The icon font for FlexSlider isn’t loading.
    2. The styling has changed.

    If you update your custom styling on the staging site with the following changes, it should get you to where you want to be:
    .flexslider .flexslider-caption – Remove position: relative;, and change the bottom positioning to something smaller as the offset, like bottom: 60px;

    Remove the following styles from the custom styling:

    #slider-wrap a, #slider-wrap .featured-img span {
        padding: 10px;
    }
    #slider-wrap a, #slider-wrap .featured-img span {
        display: block;
    }
    #slider-wrap a, #slider-wrap .featured-img span, .one-column #slider-wrap a, .one-column #slider-wrap .featured-img span {
        padding: 10px;
    }

    You’ll still want to add your border and rounded edges back, but that’ll get you most of the way there.

    Thanks, David – that’s working 🙂 My original CSS for this is over 4 years old so probably needs some serious tidying anyway. Just need to get the corner radius back and I’m done.

    Kind regards, David.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Post title missing from slider’ is closed to new replies.