GeneratePress theme tutorial: Blog thumbnail image fixed height fix

GeneratePress theme tutorial: Blog thumbnail image fixed height fix

Today I would like to address an issue that seemed quite tricky in the beginning but I was able to find a solution though some thorough googling! GeneratePress Premium has a nice blog layout addon that allows blog archives to be displayed as a grid. On top of that Tom Osborne the creator of GeneratePress has created a WordPress plugin called WP Show Posts which allows you to display posts anywhere on your website using an easy to use shortcode. I have recently used both of those mentioned functionalities on my latest creation, a support community forum and resource repository for the WordPress Brizy page builder. You can view the community page at https://brizycommunity.com.

While building the website I run into an issue regarding the height of the blog thumbnail images on the blog archive. Depended on the size of the feature image uploaded for every single post, some thumbnails would appear with varied heights making the blog layout appearing a bit off.

Blog grid layout thumbnail variable height
Default blog grid layout – Note the thumbnail variable size.

I could set a fixed width and height by going to Layout->Blog and set width and height pixel values for the Archive featured image dimensions but then I would lose all responsive design functionality for various desktop and mobile device screen sizes since due to the fixed size nature of the thumbnails.

Blog grid layout thumbnail variable height - Mobile View
Default blog grid layout – Mobile View.

A better way I found out was to actually utilize some sweet CSS. I wanted that CSS to bonly be applied at a minimum size of 769px, my mobile breakpoint.

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
}

In the above code, I set the thumbnail archive feature image to a set height of 174px. I also set the object-fit CSS property cover and the object-position property to center. That way the thumbnail dimensions would not stretch out of proportions but instead zoom into the image slightly to keep their aspect ratio intact.

Blog grid layout thumbnail equal heights

Also that way, I would still retain equal heights on a 2 column layout but switch to the default behaviour on a one column layout.

Blog Grid layout - 2 columns
Blog Grid layout – 2 columns.

Blog Grid layout - 1 column
Blog Grid layout – 1 column

The same issue was also present on the WP Show Posts shortcode on the homepage:

WP Show Posts - Latest News - Varied - thumbnail heights

Adding some CSS to the existing code fixed the variable thumbnail image height issue:

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
  section.wp-show-posts article .wp-show-posts-image a img {
    height: 232px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
}

 

WP Show Posts - Latest News - Fixed thumbnail heights
Thumbnails with fixed heights.

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you find that useful. Till next time, then!

Set a custom category post type archive as your homepage

Set custom category post type archive as homepage - image

Sometimes you might have a custom category post type archive that you want to display as your homepage. Your blog page might already be “occupied” by a link that lists all your blog items possibly including the custom post type items as well. Surely, you can add a category menu item to your main navigation menu but you would have to add a redirect from that link to your homepage and that’s not a good idea for performance and SEO purposes. Just a clarification, by homepage, I mean the page that gets loaded when users first visit you website URL and can be set at Settings->Reading->Homepage, not to be mistaken by the blog page that can also be set on the same screen.

Reading settings

So the process to achieve the above would be to create a page that would act as your home page and then setting that page as your homepage like the screenshot above. In my case, I have created a Videos page for a video custom post type. Then you would add the following code inside your functions.php file or though a code snippet.

function prefix_downloads_front_page( $query ) {

    // Only filter the main query on the front-end
    if ( is_admin() || ! $query->is_main_query() ) {
    	return;
    }

    global $wp;
    $front = false;

  // If the latest posts are showing on the home page
    if ( ( is_home() && empty( $wp->query_string ) ) ) {
    	$front = true;
    }

  // If a static page is set as the home page
  
    if ( ( $query->get( 'page_id' ) == get_option( 'page_on_front' ) && get_option( 'page_on_front' ) ) || empty( $wp->query_string ) ) {
    	$front = true;  
    }

    if ( $front ) :
  
        $query->set( 'post_type', 'video' );
        $query->set( 'page_id', '' );

        // Set properties to match an archive
        $query->is_page = 0;
        $query->is_singular = 0;
        $query->is_post_type_archive = 1;
        $query->is_archive = 1;

    endif;
  
  //Fix pagination
  if ( get_query_var('paged') ) {
    	$paged = get_query_var('paged');
  } elseif ( get_query_var('page') ) {
    	$paged = get_query_var('page');
  } else {
    	$paged = 1;
  }

  $query->set( 'paged', $paged );

}
add_action( 'pre_get_posts', 'prefix_downloads_front_page' );

Just replace video with your custom post type slug in line 24. The archive is then going to be available as your homepage or from clicking your homepage website logo (if you have one).

TIP: To change the homepage archive layout to something else, let’s say a column layout style layout, you would use the below code inserted with the same method as previously:

add_filter( 'generate_blog_columns','gm_portfolio_columns' );
function gm_portfolio_columns( $columns ) {
    if ( is_category( 'videos' )  || is_archive('video') ) {
        return true;
    }
    return $columns;
}

add_filter( 'generate_blog_get_column_count','gm_search_column_count' );
function gm_search_column_count( $count ) {
    if ( is_category( 'videos' ) || is_archive('video') ) {
        return 20;
    }

    return $count;
}

In this case, I already had a column layout but with 4 columns. Inserting the code above would make my layout span 5 columns. I have assigned my video custom post type to a category of videos. The code above would look for a page where the category of videos is present, in this case if the video category was displayed is_category( 'videos' ). At the same time though, we are also looking for the custom post type archive which is loaded as our homepage is_archive('video'). Those two conditions would make sure that the correct layout would be loaded on both places. This solution works well for all kinds of paginated archives as well!

Have a look at this website here in which I have implemented the solution. I would also like to thank Tom Usborne from GeneratePress for corrections on the code!

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

That’s all for now, hope you find that useful!

GeneratePress theme tutorial: Convert the top widget bar into a notification window

GeneratePress theme tutorial: Convert the top widget bar into a notification window

A notification bar is useful if you want to show a site-wide message to your audience about certain news or a promotion that you offer in your online shop. There is a plethora of notification bars that can be found in the WordPress plugin repository or you can embed one yourself. GeneratePress has a top bar widget that can be activated from the Customizer so why not take advantage of what’s already available to us and save a few resources and HTTP requests? By going to Appearance->Customize->Widgets->Top Bar a of custom widgets can be added including custom menus, social icons, login information etc. But what if you wanted to add a notification bar that always needs to load at the top of the page but give the user the option to be able close it with the use of a close () button?

GeneratePress top bar widget area in the Customizer
GeneratePress top bar widget area in the Customizer

I recently asked that question in the GP Premium support forum and Tom Usborne (creator of GeneratePress) along with David gave me some great tips and code snippets (as always!) which I then applied to a test website with great results! First thing to do is to actually add a custom HTML widget to the top bar widget area. Just go to Appearance->Customize->Widgets->Top Bar and then click the Add a Widget button to add a Custom HTML widget. I used the following HTML code to add a paragraph and a Font Awesome icon inside the content custom HTML widget area:

<p>USE CODE: TE20 AND GET 10% DISCOUNT</p>
<i class="top-close-button fas fa-times-circle"></i>

Tip: Since GeneratePress 2.1 the Font Awesome library is not included by default anymore. Please, read this article to add the Font Awesome library to the theme.

In Appearance->Customize->Layout->Top Bar, I set the “Top Bar Width” to Full and “Top Bar Alignment” to Center. In Appearance->Customize->Colors->Top Bar, I chose a dark background color with white text.

Top bar layout options
Top bar layout options

Top bar color options
Top bar color options

Next we need to add some CSS and JavaScript code. CSS code can be added from the Customizer (Appearance->Customize->Additional CSS). JavaScript code is to be added to the wp_footer hook area (Appearance->GP Hooks, then select the wp_footer hook and paste the code). Alternatively, if you are not a GP Premium owner you should be able to enqueue the script yourselves. Make sure not to included the <script></script>tags if you are to create your own JavaScript file, though.

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    z-index: 1;
}

.top-bar p {
  margin-bottom: 0;
}

.top-close-button {
  float: right; 
  clear:right; 
  margin-top: -20px;
  cursor: pointer;
}

body, div#wpadminbar, .top-bar {
    transition: transform 500ms ease;
}

 

JS

<script>
jQuery( document ).ready( function( $ ) {
    $( '.top-close-button' ).on( 'click', function( e ) {
        e.preventDefault();
$( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );

if ($('div#wpadminbar')[0]) {
    $( 'body' ).css( 'transform', 'translate(0, -52px)' );
    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );
} else {
  $( 'body' ).css( 'transform', 'translate(0, -52px)' );
}

    } );
} );
</script>

As you can see the styling  repositions the bar at the center top, adjusts spacing, relocates the close button at the top right of the bar and sets a few CSS transition effects that will be used when the bar is dismissed by the user. The JavaScript code dynamically adds a few classes when the top bar close button is pressed and sets different Y axis transformations to cater for the admin bar being present. Meaning that when the WordPress admin bar is present at the top of the user’s browser, the notification bar would need to be moved up and out of the browser screen and at the same time the whole page would need to move up without pushing the admin bar out of the way! You might also need to tinker with the values according to the height of your own bar.

Top bar without the admin bar
Top bar without the admin bar

 

Top bar with the admin bar visible
Top bar with the admin bar visible

Possible Improvements

Currently the bar would appear on every page refresh but you could set up a JavaScript Cookie and set up a conditional to show/hide the bar depended on whether this Cookie was set or not. A great alternative method though, as Dave Smith suggested in the post comments, is to use the Widget Options plugin or similar to set the HTML widget to only show on certain pages. Finally, if you are a GP Premium member you can disable the top bar individually for a particular page or post by using the Disable Elements addon module. The disable functionality can thus be activated and deactivated from the bottom of each page or post.

GeneratePress is a very powerful theme! Grab your copy here.

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you found the tutorial useful. Till next time, keep Generating!