[Resolved] Thumbnail Article

[Anderson Ojope]

Hello!

The category and file pages and the blog home page are the size of the featured image I need. Thumbnail on the left side … http://prntscr.com/e9k6kx

Now, when the website loads on tablets or smartphones, I need it to keep the article’s featured image as wide as 100%, not the same size as it is on the desktop.

Here’s how: http://prntscr.com/e9k7g4

I want it to look like this: http://prntscr.com/e9k7w5

It is possible?

Ps: But on the desktop you have to continue the way it is: left side thumbnail …

My blog: https://goo.gl/S01wIP

[Leo]

Hi Anderson,

Try this CSS:

@media (max-width: 1024px) {
    .post-image img {
        width: 100%;
    }
}

Let me know.

[Anderson Ojope]

That’s right.

But the resolution of the images was not cool: http://prntscr.com/e9l781

I fear how to correct this?

[Leo]

hmm your original images (https://blogdemo.educaseguros.com.br/wp-content/uploads/2017/02/infografico-exemplo-destaque-260×180.jpg) are only 260*180px so it would get stretched out if the browser size is 260px.

[Leo]

I think it might work better if you upload the full size images and set Width to 260px in Customizer > Blog > Featured Images and leave height to auto.

Can you give that a shot?

[Anderson Ojope]

Continues with poor resolution: http://prntscr.com/e9llqd

Another example: http://prntscr.com/e9lmaq

On the article page the image loads correctly and with good resolution.

[Leo]

I’m not sure how to overcome this because basically you want the featured images to be bigger on tablet&mobile than on desktop which is not commonly requested.

I’ll ask Tom if he has a clever solution 🙂

[Leo]

Let’s try another way:
– Upload full size images
– Leave Width and Height to Auto in Blog > Featured Images
– Add this CSS:

@media (min-width: 1024px) {
    .post-image img {
        max-width: 260px;
    }
}

I think that would do. Let me know.

[Anderson Ojope]

Here’s the result:

http://prntscr.com/e9pub6
http://prntscr.com/e9pumu

When I leave the height and width in AUTO mode, the width is 100% but the thumbnail is not on the left side, as before.

Ps: Images are already being uploaded with the size 800px X 400px.

[Leo]

The CSS you added is not what I provided above.

Can you try this? https://generatepress.com/forums/topic/thumbnail-article/#post-279929

[Anderson Ojope]

Show! Very good! Now the resolution is good!
http://prntscr.com/ea2v6n

I’ll explore you some more …

On the article page, I would like the featured image to be below the title. But in the archive pages, categories, etc. the articles need to keep showing up with the featured image on the left side and the title / description on the right side.

How do I do that?

[Leo]

I’m not too sure what you meant. Are you talking about single post? Can you show me an example?

I think it would be better if you can open up another topic for this new question so others can find it useful.

Thanks!

[Anderson Ojope]

It’s still about the change we’re talking about …

The highlights images of the articles on the homepage and categories / files pages are just the way we would like them to be.

http://prntscr.com/eb2wvr

Now, I need to see in the individual pages of the articles the highlight image below the title:

Article title
Highlight image
Content of the article

How do I do that?

[Leo]

Sorry I’m still confused :S I thought the first issue (with the resolution) is resolved already?

Also in this post: https://generatepress.com/forums/topic/thumbnail-article/#post-280346, you wanted featured image on the left side and the title/description on the right side in category and archive pages.

But then in this post: https://generatepress.com/forums/topic/thumbnail-article/#post-281291, you wanted featured image to be below the title for category and archive pages?

Let me know…

[Anderson Ojope]

First request solved!

Now an add-on…

By skipping the layout settings of the file/category pages (https://goo.gl/S01wIP), I would like that in the article pages (https://goo.gl/A6n37S), the title of the article would be above the featured image.

You understand?

[Author]

Posts