[Resolved] Specific image on category page at different sizes

Home Forums Support [Resolved] Specific image on category page at different sizes

Home Forums Support Specific image on category page at different sizes

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1581407
    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.

    #1581586
    David
    Staff
    Customer Support

    Hi there,

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

    #1581767
    Elio Martinez

    Hi David,

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

    #1582167
    David
    Staff
    Customer Support

    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…..

    #1582454
    Elio Martinez

    Hi,

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

    #1582676
    David
    Staff
    Customer Support

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

    #1582767
    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

    #1583315
    Elio Martinez

    Thanks!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.