[Resolved] Help with formatting author profile picture in post template

[Matthew]

Hello,

Please see my website below.

I would like to format the author profile picture to look the same as this…

https://www.elliott.org/ultimate-consumer-guides-smart-travelers/take-that-back-the-ultimate-guide-to-a-product-return/

i.e. https://ibb.co/YyjvNW1

Cheers,
Matthew

[Fernando]

Hi Matthew,

The simplest way you can visually build your own Post Meta is by using a Block Element: https://docs.generatepress.com/article/block-element-post-meta-template/

Alternatively, you can try adding this snippet:

add_filter('generate_header_entry_meta_items', function($output){
	if(is_single()){
		return array(
			'author',
			'date',
		);
	}
	return $output;
}, 10);

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Then, we’ll try achieving it through custom CSS.

[Matthew]

Many thanks Fernando, the snippet code did the trick.

One more quick question, please …how can I increase the font size of that section i.e. the author name and published date?

Cheers,
Matthew

[Fernando]

You can create a new Typography setting in Appearance > Customize > Typography.

Set the Target Element to Custom – .single-post .entry-meta.

Example: https://share.getcloudapp.com/o0u9Ol9E

Reference: https://docs.generatepress.com/article/dynamic-typography-overview/

[Matthew]

Perfect, thanks again Fernando 🙂

[Fernando]

You’re welcome, Matthew!

If you still want to change the alignment of the text, here’s something you can try adding in Appearance > Customize > Additional CSS:

.single-post .entry-meta {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 96px;
    justify-content: center;
}

.single-post .entry-meta {
    width: fit-content;
}

[Matthew]

Fantastic, thanks Fernando …just what I was looking for 🙂

[Fernando]

You’re welcome, Matthew!

[Author]

Posts