Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1234374

    I’m trying to have the Read more link in the Post Slider appear as a full-width button, aligned to the bottom so that all buttons line up nicely no matter what length the title or excerpt is.

    I’m able to get either a full width button, or align it to the bottom, but not both. Because in order to get the full width button, I need position to be relative, but to get the alignment, I need it to be absolute.

    The only solution so far has been to prioritize the alignment, and set the width manually to 90%, but this breaks at different screen sizes.

    I thought that if the excerpt text was enclosed in a div, or a <p> tag, I could control it’s height. Currently it’s enclosed in the same div as the Read more div.

    Any suggestions are welcome. Thanks!

    #1235034

    Hey ATB_IO,

    Thank you for the inquiry.

    Aligning the read more link may not be that easy because the excerpt length or the number of words/characters in the summary for each posts are different. We might be able to do this if we limit number of characters in the excerpt and set a minimum height to the title container.

    You can use this snippet in the functions.php file to limit the number of words in the excerpt.

    function avf_post_slider_entry_excerpt_custom($excerpt, $prepare_excerpt, $permalink, $entry ) {
    	$excerpt = wp_trim_words( $excerpt, 10 );
    	return $excerpt;
    }
    add_filter('avf_post_slider_entry_excerpt', 'avf_post_slider_entry_excerpt_custom', 10, 4);
    

    And to set a minimum height to the post title container, use this css code.

    .slide-entry-title.entry-title {
    	min-height: 50px;
    }

    Related thread: https://kriesi.at/support/topic/blog-layout-grid/#post-920173

    Best regards,
    Ismael

    #1235086

    Thanks Ismael, I might be able to find a compromise with what you suggest.

    I tried your code in the functions.php file, but it actually gets rid of the Read more link completely. Could you help?

    #1235119

    For better instructions it would be nice to see the page. There are too many styling options on blog grid – that the selectors might be a bit different.

    i have had a similar problem – the thing why this is not as easy as it seems to be is that the read-more link is part of the excerpt.
    So i wrote this little script to rearange the DOM Structure
    This comes to child-theme functions.php:

    function wrap_read_more_link(){ 
    ?>
    <script type="text/javascript">
    (function($) {
        $(window).load(function(){
            $('.read-more-link').each(function() {
                $(this).parent().parent().append($(this));
            });
            $('.slide-entry').each( function() {
                $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
                $(this).find('.more-link' ).wrapInner('<span class="more"></span>');
            }); 
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'wrap_read_more_link');

    ( i wrapped the more-link in a span to have more styling options)
    After that the read-more link is last div in slide-content and could be placed absolute in the surrounding container:
    this for quick css:

    .read-more-link {
    	position: absolute;
    	bottom: 10px;
    	right: 10px;
    }
    .avia-content-slider .slide-entry-excerpt {
        padding-bottom: 40px;
    }

    Resultspage: https://webers-testseite.de/blog-posts-in-list-view/

    i now go and have a look if it is better to edit the alb element for that DOM Structure.

    • This reply was modified 2 months, 3 weeks ago by  Guenni007.
    #1235383

    Hi Guenni007,

    thanks so much for your reply, this has solved my problem! The formatting on the site you linked to is very close to what I was looking for actually, so very useful to see how you achieved it.

    For reference, I used Guenni007’s script to wrap the excerpt text in it’s own div, used some padding-bottom to prevent overlap of the text and the button, and set the button position to absolute, then styled the link:

    
    #top .avia-content-slider .slide-entry-excerpt {
    	padding-bottom: 50px;
    }
    #top .avia-content-slider .read-more-link {
        position: absolute;
        bottom: 20px;
        width: calc(100% - 40px);
    }
    #top .avia-content-slider .read-more-link a { 
    	background-color:#5584ab;
    	display:block;
    	padding: 4px 10px;
    	border-radius: 9px;
    	font-size:15px;
    	text-align: center;
    	color: #fff;
    	font-weight: 600;
    	text-transform: uppercase;
    	width: 100%;
    }
    

    Thanks again!

    #1235472

    if you like to have those containers in equal height – the flexbox modell is helpfull here.

    Unfortunately the articles are grouped according to the settings in 3, 4 etc columns. Without this grouping it would be even better with the flex-box model.
    I’ll see if I can collect all articles and put them into one slide-entry-wrap.

    #1235574

    Hi,

    Thanks for helping out @guenni007. Yes, css flexbox should be very helpful in this case.

    Best regards,
    Ismael

    #1235803

    by the way : this is with collecting all articles in one container that we can style it with flexmodell:

    function wrap_read_more_link(){ 
    if(is_page(37595)){
    ?>
    <script type="text/javascript">
    (function($) {
        $(window).load(function(){
            $('.read-more-link').each(function() {
                $(this).parent().parent().append($(this));
            });
    
            $('.slide-entry').each( function() {
                $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
                $(this).find('.more-link' ).wrapInner('<span class="weiter"></span>');
            }); 
    
            $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
                $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
            });
            $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
        });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'wrap_read_more_link');

    this is only for my testpage – pagespecific.
    But to reconfigure the DOM in this way it is not nice – it works but it takes time

    Results see : https://webers-testseite.de/blog-posts-in-list-view/

    #1235987

    Hi Guenni007,

    I managed to get the columns to be the same height by setting:

    
    #custom-id .slide-entry-wrap { 
    	display: -webkit-flex;
    	display: -ms-flexbox;
    	display: flex;
    }
    

    This seems to be working well on my site.

    #1236062

    Hi ATB_IO,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1236247

    nice – it is because standard setting on display: flex is : align-items: stretch !

    #1236288

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.