[Resolved] Styling the Archive Page

[Chantal]

Hi guys,

Can you help me with my Author Archive page? would really like to have the image on the left hand-side, and the title and excerpt on the right. I have searched the forums for solutions and everything I have tried has not worked.

I have created two columns using the customiser and would really like posts displayed like this:
http://tinyurl.com/y4kjykvz (what it looks like with an image and without)

Aligning the photo left in the customiser doesn’t wrap the text around it, and I don’t know what CSS to use.

Many thanks

GeneratePress 2.2.2

GP Premium 1.7.8

[Chantal]

Someone else requested a similar layout:
https://generatepress.com/forums/topic/blog-archive-layout-flexibility/

Tom said the first example is achievable with Generatepress (this was back in 2017 though), I tried this and unfortunately it didn’t work.

[Leo]

Hi there,

The picture you linked isn’t working for me.

Are you looking for something like this?
https://gpsites.co/marketer/

If so the align left should work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

Oh sorry about that. I will look to host the image somewhere else, but yes Marketer would be great.

When I do the following:
Customise Layout > Blog > Content > Featured Images > Below or Above Title > Left

I don’t get that result (as you can see from my link).

Am I doing something wrong?

[Leo]

Your link suggested that you have it set to align center:
https://www.screencast.com/t/R5YwNfjB

Maybe try clearing your caching plugin if you are using one?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

Hi Leo, please look again. It’s definitely centred now. The layout is exactly the same; it didn’t change in the customiser either.

[Leo]

What you want is align left, not center 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

Aargh! Sorry, what I meant to say is it is definitely on the left, it is set as follows: Alignment > Left

When I saved it nothing changed in the Customiser. The image is still in the centre.

I have made the images even smaller 100px x 100px to see if it makes a difference, but it is still in the centre. Any ideas?

[Leo]

The code is showing center still.

Can you make sure the archive toggle is on?
https://docs.generatepress.com/article/adjusting-the-featured-images/

If not then it should be a caching issue. Any caching plugins or server cache?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

Hi Leo, it’s definitely on Archive. Any other changes I make on the Customiser are immediate. When I changed the image size that was immediate, it’s just the Featured Images alignment – it has no affect. It’s the only thing which isn’t working as such.

[Chantal]

Hi Leo,

I’ve found something out: when I uncheck 2 columns, it works. (Have left it for you to see)

Is there a way to have this layout with 2 columns selected?

[Leo]

Ahh yeah I was wondering about that.

Can you turn the column on again?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

I’ve done it. 🙂

[Leo]

Give this CSS a shot:

.generate-columns-activated.post-image-aligned-left .generate-columns-container article:not(.featured-column) .post-image, .generate-columns-activated.post-image-aligned-right .generate-columns-container article:not(.featured-column) .post-image {
    float: left;
    margin-right: 15px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chantal]

It’s working, thank you for your help! 🙂

[Author]

Posts