[Resolved] Styling metadata and single posts page

[Tom]

1. This depends on where else you’re using the images. For archives, you can use our image sizing options to resize them automatically: https://docs.generatepress.com/article/adjusting-the-featured-images/

3. That’s what you wanted, right? Now we need to add the avatar with this function:

add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() ),
            get_avatar( get_the_author_meta( 'ID' ) )
        )
    );
} );

Now to add the icons, add this CSS:

.entry-header span.posted-on:before {
    font-family: FontAwesome;
    content: "\f017";
    padding-left: 10px;
    padding-right: 5px;
}

.entry-header span.comments-link:before {
    font-family: FontAwesome;
    content: "\f086";
    display: inline-block;
    opacity: 1;
    padding-left: 10px;
}

[An Nguyen]

Hi Tom,

1/For example, I tried to resize image in archive page. I followed your link to add php code below and activated it, but it didn’t work. Could you check the code for me please?

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    // Set up our conditional
    if ( is_post_type_archive( 'technology' ) ) {
        $atts[ 'width' ] = 850;
        $atts[ 'height' ] = 250;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
}

2/ Your php code is perfect! No errors but the css code displays in archive page not well. I tried to adjust CSS avatar, size and colour of icons but there are no spaces between each and “|” and icons not change to my colour #177080 . Could you help me with CSS?

Next step, how can we format to display metadata on single post pages? I tried do it by my self, but seem to be not good. I want to format: “Image author + author name | icon date + date”, skip 1 line then icon categories + categories.

[Tom]

1. Do the image sizing options in Customize > Layout > Blog not work?

2. Try this:

span.byline,
span.posted-on {
    padding-right: 8px;
}

3. First, let’s try to add the avatar to your single posts:

add_filter( 'generate_page_hero_post_author', function() {
    global $post;
    $author_id = $post->post_author;

    return sprintf( 
        '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%3$s</span></a></span>',
        esc_url( get_author_posts_url( $author_id ) ),
        esc_attr( sprintf( __( 'View all posts by %s', 'gp-premium' ), get_the_author_meta( 'display_name', $author_id ) ) ),
        esc_html( get_the_author_meta( 'display_name', $author_id ) ),
        get_avatar( get_the_author_meta( 'ID' ) )
    );
} );

Let me know once that’s added 🙂

[An Nguyen]

1/ The option didn’t work. I checked by save as image and view the size of image after deleting cache. It’s still original size without cropping. I tried adding php function to resize images on one specific archive page and it gave the same result with using option. This is reason why I asked you check my code above for that.

2/ On Archived page now the metadata work perfect as my expect. Can you help me to add icon of categories and keep 1 blank line before tags block?

3/Your code work very nice. Avatar is on. Now, we can continue with adding icon of date and icon of categories.

[Tom]

1. This sounds like the image resizer isn’t working with your server, which is possible. We’re working on some alternative methods to image resizing. One custom alternative can be found here: https://generatepress.com/forums/topic/blog-archives-image-scaling-thumbnail-problem/#post-780773

2. First, you’ll need to remove this CSS you’ve added:

.cat-links:before, .tags-links:before {
    font-family: FontAwesome !important;
    font-size: 14px;
}

Then you can add this:

.entry-meta span.cat-links:before {
    display: inline-block;
    visibility: visible;
}

span.cat-links {
    padding-bottom: 10px;
}

3. Try this:

.page-hero .entry-date:before {
    font-family: FontAwesome;
    content: "\f274";
    padding-right: 5px;
}

.hero-category:before {
    content: '\f07b';
    font-family: GeneratePress;
    visibility: visible;
    padding-right: 10px;
}

[An Nguyen]

Hi Tom,

1/ I confuse a bit on the method that you gave me the link. This method means I must add this code for each image that I want to resize, does not it? Then I install plugin to generate thumbnails, don’t I?
So if I have 10 places that need to resize image, so I will create 10 PHP codes, won’t I?

Could you explain a bit for me? Thanks Tom.

2/ 3/ It works perfect. In archive page, I want to create effect on Categories links like current tags-links. I try the CSS below to create effect on cats-links but it does not work. In tags cloud, it worked perfect!

/* ===============================
	CATS CLOUD STYLING 
=============================== */
/*--------cats cloud styling-------*/
/* font 0 method to hide commas between cat links */
.cats-links {
    font-size: 0;
}
/* Apply general hove style to cats-links and catscloud */
.catcloud a,
.entry-meta .cats-links a,
.entry-meta .cats-links a:hover,
.entry-meta .cats-links a:visited {
    color: white;
    background-color: rgb(0, 0, 0);
    font-size: 10px !important;
    padding: 1px 4px;
    margin-right: 2px;
    text-transform: capitalize;
    word-break: break-word;
    display: inline-block;
    border: 0px solid blue;
    border-radius: 3px;
    -webkit-transition: opacity .6s ease-in;
    transition: opacity .6s ease-in;
}
/* Strip cat cloud default margins */
.catcloud a {
    margin: 0px 0px;
}
/* Tags hove styling */
.catcloud a:hover,
.entry-meta .cats-links a:hover {
    opacity: .5;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

[Tom]

1. No, you just need to add those functions once, then run the regenerate thumbnails plugin. You should also make sure the image/width fields in GPP are empty.

2. I’m not too sure what you mean? Here’s what I’m seeing: https://www.screencast.com/t/FFlGyUV1

[An Nguyen]

Hi Tom,

1/ If I have 4 places to crop the image size (200×200, 300×400, 100×100, 500×800) from the original image(2400×1200). How can I do?

I keen on the tasks that I will do below. Is it right?

add_action( 'after_setup_theme', function() {
    add_image_size( 'banner-200x200', 200, 200, true );
} );

add_action( 'after_setup_theme', function() {
    add_image_size( 'banner-300x300', 300, 300, true );
} );

…
the same with the two sizes (100×100,500×800) more

then install plugin and active it.

2/
I mean the hover effect on tags-link. I want to make the same effect on cats-link.

[Tom]

You can do this:

add_action( 'after_setup_theme', function() {
    add_image_size( 'banner-200x200', 200, 200, true );
    add_image_size( 'banner-300x300', 300, 300, true );
} );

However, you’ll need another conditional to set when to use each image size.

Give this a shot:

.entry-meta .cat-links a {
    transition: opacity .6s ease-in;
}

.entry-meta .cat-links a:hover {
    opacity: 0.6;
}

[An Nguyen]

Hi Tom,

1/ I tried this method on 1 image file as a feature-image of a post and another one as background-image on hero. On a post or archive feauture-image of this post the resized function worked well, but it not work for background-image on hero. I don’t know why?

I need you help me to resize image on both desktop & mobile as my requirements below:

My site has 3 main areas need to resize :
For Desktop:
– Hero- backgroundimage (1428 x 455 px)
– featureimage for each post (850×250 px) in archived & blog page and these images will become image-background (1428×455 px) on hero when it is in a post page.
– Logo-image 300×200 px.

For mobile: the same 3 image sizes and these could be a half of desktop-size:
-backgroundimage (714 x 227 px)
-featureimage (425×125 px)
-logo 150×100 px.

For desktop:
My code will deal with 3 areas. Can you check it?

First, add new function on snippet:

add_action( 'after_setup_theme', function() {
        add_image_size( 'Posts-Image-1', 850, 250, true );
	add_image_size( 'hero-image-1', 1428, 455, true );
        add_image_size( 'logo-1', 300, 200, true );
} );

then add another function on snippet

add_filter( 'generate_page_header_default_size', function( $size ) {
    if ( ! is_singular() ) {
        return 'Posts-Image-1';
        return 'hero-image-1';
        return 'logo-1';
    }
} );

My questions on post page, My code above deal with one image for one post, so how can I deal with 100 posts with 100 images?

My code will be the same as below. Won’t it?

First, add new function on snippet:

add_action( 'after_setup_theme', function() {
        add_image_size( 'Post-Image-1', 850, 250, true );
	add_image_size( 'Post-Image-2', 850, 250, true  );
        ...
        add_image_size( 'Post-Image-100', 850, 250, true  );
} );

then add another function on snippet

add_filter( 'generate_page_header_default_size', function( $size ) {
    if ( ! is_singular() ) {
        return 'Post-Image-1';
        return 'Post-Image-2';
        ...
        return 'Post-Image-100';
    }
} );

After that I need to re-run thumbnail generator again.

I’m unclear about this task much! I need your explanations.

2/ It’s done perfectly. Thanks for optimised CSS code.

[Tom]

As of right now, we can’t tell the hero backgrounds to use a specific image size. I’ve made a note to allow this in GPP 1.9.

In your other functions, you can only return once per function. So the first time return is hit, the function stops.

The code itself will apply itself to every single post you’ve made, not just one.

Let me know if that makes sense or not 🙂

[An Nguyen]

Hi Tom,

The size of my home page now is around 3MB is so very big to achieve fast load speed. In homepage, the format is archived page with many feature-images of posts and 1 background image of hero. How can I reduce these images size?. I’m not clear how to do with these function to handle about ten feature-image in home page.

[Tom]

The functions I provided will:

1. Set an image size that WordPress will use to create images when they’re uploaded/regenerated.
2. Tell your archive posts (all of them) to use those smaller featured images instead of the full image.

You can also run your images through a tool like this to make sure they aren’t too big: https://imagecompressor.com/

[An Nguyen]

Thanks Tom.

[Tom]

No problem 🙂

[Author]

Posts