[Resolved] Specific image on category page at different sizes

[Elio Martinez]

Hi,

I want to add an image to one specific category page of my site, but I want to use two different images: one for mobile, one for desktop. I don’t know if its possible to do something like that.

Thanks.

[David]

Hi there,

is that a completely different picture or just different size version of the Desktop image

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

[Elio Martinez]

Hi David,

They are completely different pictures. One is 300×100 (mobile); other is 728×90 (desktop).

[David]

Unfortunately not – well not with some real heavy custom development as WordPress only supports a single featured image for post, so theres no where to add the second image…..

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

[Elio Martinez]

Hi,

But its not a featured image, its an image that you can see in the link provided.

[David]

Apart from the adverts the only images i can see are the post featured images ? What am i missing ?

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

[Thierry]

Here is the way to change image according to screen size

<picture>
<source media="(max-width: 767px)" srcset="https://....image1.png">
<source media="(min-width: 767px)" srcset="https://....image2.png">
<img src="srcset="https://....image2.png">
</picture>

Then you use a snippet to hook it at the top of your category page.

add_action ('wp_body_open' , 'add_content_after_header', 20);
function add_content_after_header() {
     if (is_category($category='your category')){
     ?>
     <picture>
     <source media="(max-width: 767px)" srcset="https://....image1.png">
     <source media="(min-width: 767px)" srcset="https://....image2.png">
     <img src="srcset="https://....image2.png">
     </picture>
     <?
     }
}

To add snippets I prefer to do without any relation with the Theme, in case you change Theme…
https://webservices-pme.com/plugin/post-snippets/

Regards
Thierry

[Elio Martinez]

Thanks!

[Author]

Posts