[Resolved] Add categories tags on feature images and blog layout.

[An Nguyen]

Hi David,

Thanks David, it’s perfect. I can adjust CSS a bit to fix with my current layout.

Could you help me to add a big fullstop sign to separate each part of metadata please? I have no idea to do this.

An.

[Tom]

Hi there,

I’m not too sure what you mean – do you have any examples you can show us?

[An Nguyen]

Hi Tom,

I can handle it. Thanks Tom & David!

[Tom]

No problem 🙂

[An Nguyen]

Hi Tom & David,

During test process, I found an issue in mobile mode. The category-tags displays wrong in mobile mode, but it’s perfect on desktop. I don’t know why so I need your help.

I used this code below to display cat-tags below image. In mobile mode, if the title is long as 2 lines following with title is long as 1 line. The error happens and the tags will overlap the bottom-border of image a bit. Normally, it below it a bit and above title 10px.

/* Postiion cat links below image */
.generate-columns-container .inside-article {
    position: relative;
}
.generate-columns-container footer.entry-meta {
    position: absolute;
    top: 55%;
    bottom: 45%;
    left: -20px;
    margin-top: 0;
}
/* Adjust for mobile padding */
@media (max-width: 768px) {
	.generate-columns-container .entry-title {
		margin: 30px -20px 30px;
	}
	.generate-columns-container .entry-meta {
    	padding: 10px 10px 0;
		margin: 0 0px 10px;
	}
    .blog h2.entry-title,
	.archive h2.entry-title {
		font-size: 21px;    
	}
}

[David]

Little confused – the original code we provided was to place the cat tags over the image – roughly top right – is this no longer required?

[An Nguyen]

Hi David,

I adjusted your code above a bit, I used top, left – float attribute to move cat-tag to under image only.

.generate-columns-container footer.entry-meta {
    position: absolute;
    top: 55%;
    left: -20px;
    margin-top: 0;
}

Thanks David.

[Tom]

There isn’t really a way to fix that using absolute positioning.

What you could try is removing that CSS:

.generate-columns-container footer.entry-meta {
    position: absolute;
    top: 55%;
    left: -20px;
    margin-top: 0;
}

Then physically moving the categories below the featured image:

add_action( 'wp', function() {
    if ( ! is_singular() ) {
        remove_action( 'generate_after_entry_content', 'generate_footer_meta' );
        add_action( 'generate_before_content', 'generate_footer_meta', 15 );
    }
} );

[An Nguyen]

Hi Tom,

This code was added, but cat-tags move below the title. I expected that they move below feature-image and above title.

Thanks

[Tom]

Sorry about that, I just updated the function above.

[An Nguyen]

Hi Tom,

They display perfectly. Now, I only adjust them by css a bit.

It’s a perfect solution. I really like it.

Thanks.

[Tom]

You’re welcome 🙂

[Author]

Posts