- This topic has 15 replies, 3 voices, and was last updated 3 years, 4 months ago by vast.
-
AuthorPosts
-
November 24, 2020 at 5:36 pm #1545301vast
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?
November 24, 2020 at 5:44 pm #1545311ElvinStaffCustomer SupportHi,
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.
November 24, 2020 at 5:47 pm #1545314vastHi 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?
November 24, 2020 at 5:58 pm #1545325ElvinStaffCustomer SupportThe 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.
November 24, 2020 at 6:09 pm #1545333vastHappy 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 );
November 24, 2020 at 8:01 pm #1545383ElvinStaffCustomer SupportAh 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/November 24, 2020 at 8:35 pm #1545404vastThanks Elvin. The code you suggested generates a critical parsing error.
November 24, 2020 at 8:41 pm #1545415ElvinStaffCustomer SupportStrange.
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 SEARCHThe main problem was, the initial PHP snippet you’ve added doesn’t seem to be applying to the blog and archive pages.
November 24, 2020 at 8:53 pm #1545419vastThanks 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?
November 24, 2020 at 9:12 pm #1545424ElvinStaffCustomer SupportWhere are these being inherited from?
In general,
div.inside-article
and its parent containerarticle.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) ).
November 24, 2020 at 10:49 pm #1545504vastThanks 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?
November 24, 2020 at 11:12 pm #1545517vastHi 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}
November 25, 2020 at 1:42 pm #1547352TomLead DeveloperLead DeveloperGlad 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 🙂
November 25, 2020 at 2:00 pm #1547459vastThanks 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?)
November 26, 2020 at 9:23 am #1550194TomLead DeveloperLead DeveloperI 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?
-
AuthorPosts
- You must be logged in to reply to this topic.