[Resolved] Blog Archive Horizontal Layout

[Tri Ryuzaki]

Hello, please instruct me to customize the blog page (post archive) with post image on the left side with a color tag of category somewhere inside. Here is the example:
https://demo.betterstudio.com/publisher/seo-news/category/seo-basics/
Do you have any plan to add more custom style for blog post and blog archive layout in the next updates? Thanks

[David]

Hi there,

1. in Customizer > Layout > Blog –> Featured Images – Set the Post Image above title and align left, select a smaller Media Attachment size that allows the image to sit to the side of the content.

2. Then add this PHP Snippet to place the Cat terms inside the featured image container.

add_action( 'generate_inside_featured_image_output','listTags', 15 );
function listTags() {
    $meta_string = ''; 
    $tags_list = get_the_tag_list('',' ','');
    $meta_string .= '<span><span>%3$s </span>%4$s</span>';
    return sprintf( '<span>' .$meta_string . '</span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),$categories_list,
        _x( 'Tags', 'Used before category names.', 'generatepress' ),
        $tags_list
    );
}

https://docs.generatepress.com/article/adding-php/

Once thats in place can you provide access to your site so we can take a look at what CSS is required.

You can send login via the Account Issue form:

https://generatepress.com/contact/

Please include the URL of this topic.

[Elvin]

Hi,

I’ve expanded more on the work my colleague did and added a bit of styling.

Here’s a PHP & CSS set that can be an alternative solution.

Here’s a PHP code to add the tag inside the featured image.

add_action( 'generate_inside_featured_image_output', 'tagList');

function tagList() { 
	$tags_list = get_the_tag_list('',' · ',''); 
	if($tags_list){return sprintf('<span class="entry-meta"><span class="tags-links">'.$tags_list.'</span></span>');} 
}

How to add PHP

Here’s a CSS to put it the tags on the lower bottom side.

.post-image{ display:flex; position:relative; overflow: hidden !important; background-color:red; vertical-align: bottom; border-radius:10px;}

.post-image > a{ font-size:0; }

span.entry-meta { position: absolute; margin:0; top:auto; bottom: 0; left: 0; padding:5px; background-color: #4b81ee !important; }

span.entry-meta a{ color: #ffffff; }

How to add CSS

Here’s how it looks like on a demo site.

Let us know how it goes.

[Tri Ryuzaki]

Hi, I have follow both David and Elvin, here is the current result, please help

View post on imgur.com

Temporary login: https://caitoikhac.com/wp-admin/?wtlwp_token=f63a31b29134fd84cf1aad7a44d023c6

What I need is to place the Category Name inside the color label (not the post tag). Sorry for bad English

[Tri Ryuzaki]

Here is exactly what I am trying to achieve

View post on imgur.com

[Tri Ryuzaki]

It is broken on tablet screen size

View post on imgur.com

[Elvin]

Hi again,

I’ve went ahead and used the temporary token to check your site.

I’ve made a few changes with the code I’m providing.

I’ve removed the red background, changed the display css property & moved where the background color is added.

.post-image{ display:inline-flex; position:relative; overflow: hidden !important; border-radius:10px;}

span.entry-meta { position: absolute; margin:0; top:auto; bottom: 0; left: 0; }

This is how it should look like on tablet view if you apply this new CSS change.

You can change the position of the tag/label by tweaking “bottom: 0;” & “left: 0;”. I suggest “bottom: 7.5%;” & “left: 2.5%;”.

Here is exactly what I am trying to achieve

You can definitely do that. We can do the label color by assigning a different class depending on the tag slug of the post’s tag.

add_action( 'generate_inside_featured_image_output', 'tagList');

function tagList() { 
	$tags_list = get_the_tag_list('',' · ',''); 
	$posttags = get_the_tags();
		if ($posttags) {
			foreach($posttags as $tag) {
			$tag_slug = $tag->slug; 
			}		
		}
	if($tags_list){return sprintf('<span class="entry-meta"><span class="tags-links"><span class="'.$tag_slug.'">'.$tags_list.'</span></span></span>');} 
}

What this code does is it adds your tag’s slug as an class.

Once this is added, you can now start making color styles for each of your tag label by adding this CSS code:

span.entry-meta .tags-links .[your tag slug1] {padding:5px; background-color: [your tag color1] !important;}
span.entry-meta .tags-links .[your tag slug2] {padding:5px; background-color: [your tag color2] !important;}
span.entry-meta .tags-links .[your tag slug3] {padding:5px; background-color: [your tag color3] !important;}

Where “.[your tag slug#]” is your post tag & [your tag color#] as color.
Ex: “span.entry-meta .tags-links .marketing” “background-color: blue”

Alternatively, if you have JS coding knowledge, you can scan for innerHTML text with “str.match” and assign a “tagElement.display.color = #colorvalue”.

Let us know if this works for you.

[Tri Ryuzaki]

Hi Elvin, what I am trying to do is to place the Category Name into the color label (not the post tag), here is the screenshot again, please instruct me, thanks a lot.

View post on imgur.com

[Elvin]

Oh alright.

Here’s how you can display the categories instead of tags.

PHP Code:

add_action( 'generate_inside_featured_image_output', 'categoryList');

function categoryList() { 
	$cat_list = get_the_category_list(); 
	$category = get_the_category();
		if ($category) {
			foreach($category as $cat) {
			$cat_slug = $cat->slug; 
			}		
		}
	if($cat_list){return sprintf('<span class="cat_links"><span class="'.$cat_slug.'">'.$cat_list.'</span></span>');} 
}

CSS code:

span.cat_links { 
position: absolute; 
margin:0; 
top:auto; 
bottom: 7.5%; 
left: 5%;}

span.cat_links > span.[your category slug] > ul{
list-style:none;
margin:0;
padding:5px;
background-color: [your desired color];
}

span.cat_links a{ color: #ffffff;  }

You’ll have to add “span.cat_links > span.[your category slug] > ul{ …background-color: [your desired color];}” for each category you have.

Let us know how it turns out. 🙂

[Tri Ryuzaki]

Hi Elvin, thanks for the update. I am not sure I understand the color part. Could you please login my site and help me with that, thanks in advanced:

Login: https://caitoikhac.com/wp-admin/?wtlwp_token=f63a31b29134fd84cf1aad7a44d023c6

Current:

View post on imgur.com

[Elvin]

Hi Elvin, thanks for the update. I am not sure I understand the color part. Could you please login my site and help me with that, thanks in advanced:

I’m afraid we can’t do any changes to your site.

But I’ll gladly explain more about the color part.

Here’s a demo of where you get your category slug and making css from it.
https://share.getcloudapp.com/7KuLXRYy

Let’s say your site has 3 categories which are “wordpress”, “marketing” and “uncategorized”. Say, we want “marketing” to be red, “uncategorized” to be black & “wordpress” to be blue..

Here are the CSS codes we have to add to have color tags.

span.cat_links > span.marketing > ul{
list-style:none;
margin:0;
padding:5px;
background-color: red;
}

span.cat_links > span.uncategorized > ul{
list-style:none;
margin:0;
padding:5px;
background-color: black;
}

span.cat_links > span.wordpress > ul{
list-style:none;
margin:0;
padding:5px;
background-color: blue;
}

And say we added another category named “Trading” with a “trading” slug and we want it to have a green color tag. We only need to add another CSS code like:

span.cat_links > span.trading > ul{
list-style:none;
margin:0;
padding:5px;
background-color: green;
}

Hope this makes things clearer for you.

Let us know if you need further explanation. 🙂

[Tri Ryuzaki]

Hi Elvin, it works great, thank you. Just one more thing, how can I change the color of the text inside that label, I have tried color: css but not working. Thanks 😀

View post on imgur.com

[Elvin]

Hi Elvin, it works great, thank you. Just one more thing, how can I change the color of the text inside that label, I have tried color: css but not working. Thanks 😀

Nice one, it looks great.

You can change the color in this CSS.

span.cat_links a{ color: #ffffff; }

#ffffff is white, replace it with any color value.

If you need to change the :hover color value, simply add this CSS.

span.cat_links a:hover { color: blue; }

Just replace “blue” with any color you prefer.

[Tri Ryuzaki]

Thank you so much for helping me out Elvin ☺. It would be awesome if the new update version of GP includes more customization options for blog layout similar like this one and more because the current default is too dated now I believe.

[Elvin]

Thank you so much for helping me out Elvin ☺. It would be awesome if the new update version of GP includes more customization options for blog layout similar like this one and more because the current default is too dated now I believe.

No problem.

You can open a new topic asking for a feature request.

Tom goes through all of the requests and the most requested features usually get added to the next updates.

Cheers. 🙂

[Author]

Posts