[Resolved] Read button position alignment anomaly

Home Forums Support [Resolved] Read button position alignment anomaly

Home Forums Support Read button position alignment anomaly

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1545301
    vast

    Hi there,

    Following on from the previous post https://generatepress.com/forums/topic/position-of-read-more-button/#post-721454, there appears to be an anomaly with the display on the search results and blog page.

    For example, the code below displays the buttons aligned on the search results page and NOT the blog page.

    .generate-columns .inside-article {
        display: flex;
        flex-direction: column;
    }
    
    .generate-columns .inside-article .entry-summary {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .read-more-container {
        margin-top: auto;
    }

    In contrast the code below displays the buttons aligned on the blog page and NOT the search results page.

    .generate-columns .inside-article {
        display: flex;
        flex-direction: column;
    }
    
    .generate-columns .inside-article .entry-header .entry-summary {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .read-more-container {
        margin-top: auto;
    }

    Is there any particular reason why?

    #1545311
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the site you’re working on? So we could check for any issues that might cause this.

    You can add the site details on the Private Information text field. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1545314
    vast

    Hi Elvin,

    The site’s used internally so making it externally accessible will be a real challenge. Are you able to test it on a demo site?

    #1545325
    Elvin
    Staff
    Customer Support

    The site’s used internally so making it externally accessible will be a real challenge. Are you able to test it on a demo site?

    Its going to be difficult to replicate the issue if I don’t exactly know how the site in question is structured.

    We ask for the site to check the DOM structure for any mismatch between the CSS selector and the styling being applied.

    Viewing the DOM structure also gives us an idea if the page is being changed by a plugin or PHP snippet. If we can’t see this things, we’re basically going in blind.

    Can you give more details of the site’s setup? Example: Customizer blog settings, site library template used, PHP snippets related to editing of any blog/archive and/or search results.

    A wise man once said:
    "Have you cleared your cache?"

    #1545333
    vast

    Happy to provide the details in the absence of an externally facing site.

    1. The library is Dev.
    2. The blog settings are – https://imgur.com/a/DtKJvQa
    3. The additional CSS include the following;

    .generate-columns-container,.site-content{justify-content:center;}.post-image-above-header .no-featured-image-padding .inside-article .featured-image{margin:10px !important;}

    .read-more-container{padding:40px 0 0 0;}.b-read-more{text-align:center;background-color:#0366d6;color:#ffffff;padding:15px;transition:.2s background-color ease-in-out,.2s color ease-in-out,.2s border-color ease-in-out,.2s opacity ease-in-out,.2s box-shadow ease-in-out;}.b-read-more:hover{box-shadow:0 0 2em rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.1);background-color:#222222;color:#ffffff;}.b-read-more:focus{box-shadow:0 0 2em rgba(0,0,0,.1),inset 0 0 1em rgba(0,0,0,.1);background-color:#222222;color:#ffffff;}

    .generate-columns .inside-article,.entry-summary{display:flex;flex-direction:column;flex:1}.read-more-container{margin-top:auto}

    The custom PHP is;

    function cu_excerpt( $excerpt ) {
    
            $more = ' ...<p class="read-more-container"><strong><a href="' . get_permalink() .  '" class="b-read-more">Read More<span class="screen-reader-text">' . get_the_title() . '</span></a></strong></p>';
    $excerpt = get_the_content();
           $excerpt = wp_trim_words($excerpt, 15, $more );
            return $excerpt;
    }
    
    add_filter( 'the_excerpt', 'cu_excerpt', 10, 1 );
    #1545383
    Elvin
    Staff
    Customer Support

    Ah right.

    the PHP part is the issue.

    Use this instead.

    function tu_read_more($output) {
    	$output = sprintf('...<p class="read-more-container"><strong><a title="%1$s" class="read-more" href="%2$s" aria-label="%4$s">%3$s<span class="screen-reader-text">%3$s</span></a></strong></p>',
    		the_title_attribute( 'echo=0' ),
    		esc_url( get_permalink( get_the_ID() ) ),
    		__( 'Read more', 'generatepress' ),
    		sprintf(
    	       /* translators: Aria-label describing the read more button */
    	       _x( 'More on %s', 'more on post title', 'generatepress' ),
    	       the_title_attribute( 'echo=0' )
    		)
    		);
    	return $output;
    }
    
    add_filter( 'generate_excerpt_more_output', 'tu_read_more', 10, 1 );
    add_filter( 'generate_content_more_link_output', 'tu_read_more', 10, 1 );

    generate_excerpt_more_output is used by the search page. generate_content_more_link_output is used by the blog & archive pages.

    Just change the values within this code to your preference. 🙂

    More about generate_excerpt_more_output.
    https://docs.generatepress.com/article/generate_excerpt_more_output/

    More about generate_content_more_link_output
    https://docs.generatepress.com/article/generate_content_more_link_output/

    A wise man once said:
    "Have you cleared your cache?"

    #1545404
    vast

    Thanks Elvin. The code you suggested generates a critical parsing error.

    #1545415
    Elvin
    Staff
    Customer Support

    Strange.

    Try this instead. I’ve changed a few things.

    function tu_read_more($output) {
    	$output = sprintf('...<p class="read-more-container"><strong><a title="%1$s" class="b-read-more" href="%2$s" aria-label="%4$s">Read More<span class="screen-reader-text">%3$s</span></a></strong></p>',
    		the_title_attribute( 'echo=0' ),
    		esc_url( get_permalink( get_the_ID() ) ),
    		__( 'Read more', 'generatepress' ),
    		sprintf(
    	       /* translators: Aria-label describing the read more button */
    	       _x( 'More on %s', 'more on post title', 'generatepress' ),
    	       the_title_attribute( 'echo=0' )
    		)
    		);
    	return $output;
    }
    
    add_filter( 'generate_excerpt_more_output', 'tu_read_more', 10, 1 );
    add_filter( 'generate_content_more_link_output', 'tu_read_more', 10, 1 );

    See this particular code + your CSS in action on this demo site:
    Dev DEMO BLOG
    and Dev DEMO SEARCH

    The main problem was, the initial PHP snippet you’ve added doesn’t seem to be applying to the blog and archive pages.

    A wise man once said:
    "Have you cleared your cache?"

    #1545419
    vast

    Thanks Elvin. It parses although there is no difference to the position of the read button in the blog. See https://imgur.com/a/Xv5seFm.

    The former is when it appears in the search results page and the latter when on the blog page.

    In inspecting the output, it seems that the div.inside-article element has the dimensions of 477 x 539 when accessing the blog page.

    The search results however has the dimensions of 457 x 562.

    Where are these being inherited from?

    #1545424
    Elvin
    Staff
    Customer Support

    Where are these being inherited from?

    In general, div.inside-article and its parent container article.post gets its height from its content.

    So the “562” or height value your seeing is most likely from the total height of the article’s contents(featured image, excerpt, read more button) + padding/margin.

    And since these columns are set to have equal height of its siblings, the columns with lesser content (for posts using entry-summary rather than entry-content) will still have the same height.

    As for the “457” or the width, its the width percentage of the container minus padding+margin values. So if you have 4 columns, the calculation is around ( (100% of container / 4) – (padding + margin) ).

    A wise man once said:
    "Have you cleared your cache?"

    #1545504
    vast

    Thanks Elvin. As there are no paddings or margins other than those shared in this post and given that the posts in the search result and blog are the same, it isn’t clear why the read more container isn’t aligning for the both of them. Any other suggestions?

    #1545517
    vast

    Hi Elvin,

    We found a solution (code posted below) that works for both the search results and blog.

    Is there a particular reason why the last child isn’t suggested in any of the answers?

    .one-container.archive .post:not(:last-child), .one-container.blog .post:not(:last-child) {padding-bottom:0px !important;}.generate-columns .inside-article,.entry-summary{display:flex;flex-direction:column;flex:1}p.read-more-container{margin-top:auto}

    #1547352
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution – we use :last-child in our CSS sometimes when we don’t want too much space after the last item, especially when using One Container.

    It’s hard to tell exactly what was going on here without being able to inspect the site, but glad it’s all working now 🙂

    #1547459
    vast

    Thanks Tom. It’s a challenge when a site is used internally. The help from the GeneratePress is team has been awesome although flying blind.

    Would it be possible to include the solution as part of future releases? Users (assumption) are likely to want aligned buttons (which also leads to the question as to how these are announced or introduced so that customizations can be rolled back or removed unless you have a tool you can recommend that picks up duplicates?)

    #1550194
    Tom
    Lead Developer
    Lead Developer

    I would need to see the issue in order to determine that. Is this something you can reproduce on a live environment so I can take a quick look?

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.