How to standardize the height of Title Element?

  • Resolved onyudo

    (@onyudo)


    3 years ago

    Hello,

    We are really loving the WP Show Posts plugin as the theme we are using doesn’t necessarily have the best blog set up. However, we’d like our grid of blog posts to be neat and tidy, and variable lengths of each posts’ titles make that a problem.

    I have added the following custom code to my css and it sort of kinda works:

    h5.wp-show-posts-entry-title {
	height: 650px !important;
}

    I say “sort of kinda” because it will not apply this custom css on initial page load…It only works after loading the page and then immediately refreshing the page.

    Is there a better way to accomplish what I am trying to do? Is there something in the Pro version that can make this work better? Any help would be greatly appreciated as this single issue is holding up our site launch.

    Cheers, and thanks in advance!

    • This topic was modified 3 years ago by onyudo.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Elvin

    (@ejcabquina)

    3 years ago

    Hi there,

    Not exactly a fan of putting a fixed height because variable text lengths push down all the other content.

    With a fixed height, it’s possible that the other contents would just overflow outside of its container or be cropped.

    Is there a better way to accomplish what I am trying to do? Is there something in the Pro version that can make this work better? Any help would be greatly appreciated as this single issue is holding up our site launch.

    It really depends on how you want it to look like.

    If I may suggest:

    Personally, I’d trim the title length so it’s controlled.

    I’d uncheck “Include title” on the WPSP settings found here – https://share.getcloudapp.com/d5u1pjXJ – and insert my own trimmed with PHP snippet:

    add_action( 'wpsp_before_title', function($settings){
	echo '<h2 class="wp-show-posts-entry-title" itemprop="headline"><a href="'.esc_url( get_permalink() ).'" rel="bookmark">'.wp_trim_words( get_the_title(), 5, '...' ).'</a></h2>';
});

    I’d consider trimming the excerpt as well:
    https://wpshowposts.com/support/topic/excerpt-length-not-working/

    This way, the sizing will be uniform.

    Thread Starter onyudo

    (@onyudo)

    3 years ago

    I actually had a solution for the issue of variable length texts so that wasn’t a problem…The main problem was that the fixed height would not show up on initial page load.

    Your recommendations were solid and sound and I am grateful that you took the time to reply. However, I found a much simpler solution that involved javascript that fixed all the things I was trying to fix.

    Many thanks again!

    Plugin Support Elvin

    (@ejcabquina)

    3 years ago

    Nice one. Yeah, there are many ways to solve the issue. Glad you got it sorted. 🙂

    cutu234

    (@cutu234)

    3 years ago

    @onyudo: Sharing your solution with us would be a good idea, wouldn’t it?

    Plugin Support Elvin

    (@ejcabquina)

    3 years ago

    @cutu234

    He’s most likely using something similar to matchHeight.
    https://brm.io/jquery-match-height/

    cutu234

    (@cutu234)

    3 years ago

    Thank you very much. That’s an interesting approach. Didn’t know this library.

    Plugin Support Elvin

    (@ejcabquina)

    3 years ago

    Keep an eye out for jQuery though.

    If you disabled it on purpose, libraries like this won’t run because of missing dependencies. 🙂

    Consider searching for vanilla JS approach like these:
    https://codepen.io/jonescr/pen/QvEZpQ
    https://gist.github.com/jdcauley/59b8ac6a06fe6ee6e4e3

    cutu234

    (@cutu234)

    3 years ago

    Thanks again! This is easily the best support that I can imagine!

    Plugin Support Elvin

    (@ejcabquina)

    3 years ago

    No problem. Glad to be of any help. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to standardize the height of Title Element?’ is closed to new replies.

Tags