Archived topic
Featured image position on archive grid
8 replies · Started by Jason on November 13, 2018
Hi, I'm looking to create this same look:
https://www.dropbox.com/s/jyndispo667fypu/gridlove-example-Capture.JPG?dl=0
I've got my 2 column grid setup just fine but using Alignment left or right in the customization controls doesn't make any visible change in a grid.
Trying to float the image left does not work of course. The example theme also collapses with a text overlay on the featured image but I'll cross that point later.
Can this be done with CSS only?
Hi there,
in the Customizer > Layout > Blog > Featured Images > Archive you can set the size of the image. By making the image smaller the align left / right function will work. Currently the image fills the width of the article so no room for the post content to the side.
Ok, I tried that and it doesn't work. I was able to resize the image using the image resize controls but putting the alignment on the left didn't actually move the image, it's still in the center.
BTW, the left or right does work as long as the columns is not selected. As soon as 2 or more columns are selected, this feature does not function.
Sorry my bad, thats correct currently its only applied to a single column. Mainly because of the space limitations of doing so. Today it would require CSS but it is being looked at as an option in future updates.
Ok, here's what I have so far in case anyone else can benefit from this:
/* Add left featured img on archives */
.generate-columns .inside-article {
padding: 0px 20px 0px 0px;
}
a img{
float: left;
padding-right:1em;
}
It's not quite there but if you have any suggestions let me know.
Looks good, i would suggest replace a img with:
.archive .post-image a img, .blog .post-image a img, .search-results .post-image a img
Just makes it very specific to only resize the blog post images. Not any others in the content.
This article the user required something similar, a lot more complex but it ensured that the cards always remained the same layout regardless of the content size ie. floated images can allow longer excerpts to flow around them.
https://generatepress.com/forums/topic/i-want-my-blog-post-to-look-different-on-mobile/#post-628265
Thank you!
You're welcome
