[Resolved] Blog Archive Horizontal Layout

Home Forums Support Blog Archive Horizontal Layout

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1426918
    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

    #1427406
    David
    Staff
    Customer Support

    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.

    #1427563
    Elvin
    Customer Support

    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.
    demo

    Let us know how it goes.

    #1428010
    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

    #1428039
    Tri Ryuzaki

    Here is exactly what I am trying to achieve

    View post on imgur.com

    #1428249
    Tri Ryuzaki

    It is broken on tablet screen size

    View post on imgur.com

    #1428410
    Elvin
    Customer Support

    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.

    tabletview

    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.

    #1428414
    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

    #1428465
    Elvin
    Customer Support

    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. ๐Ÿ™‚

    #1428472
    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

    #1428485
    Elvin
    Customer Support

    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. ๐Ÿ™‚

    #1428638
    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

    #1428652
    Elvin
    Customer Support

    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.

    #1428660
    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.

    #1428669
    Elvin
    Customer Support

    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. ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.