Different Images for Different Divices

  • Question, is it possible to have completely different images for each screen option? For example imageA.jpg for 1024px wide screens, imageB.jpg for 640px wide screens and imageC.jpg for 480px wide screens?

    Ideally looking for a plugin solution for this, and just wondered if anyone else had come across the same problem at all?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Yes its possible. We can achieve the same using the css. @media rule is used to define different style rules for different media types/devices

    
@media screen and ( max-width: 600px ) 
{
}
@media screen and ( max-width: 480px ) 
{

}

    You can using display:none , display:block for the images in appropriate screen sizes

    • This reply was modified 7 years, 3 months ago by sumithsuku11.

    I couldn’t find a plugin for this purpose but I think you can have this functionality with media-queries and <img/> tags (or css background) if you know a bit of HTML/CSS. It’s a bit tricky I suppose since TinyMCE (default wordpress editor) doesn’t allow you to insert <style> tag inside editor.

    Where do you need it? In an specific post or not?

    • This reply was modified 7 years, 3 months ago by morajabi.

    @sumithsuku11 It’s not possible to use media queries inside TinyMCE easily. It gets commented by the editor when you switch back to Visual Editor mode.

    Plus if it was possible, if you have multiple <img /> tags, they all get fetched no matter what display attribute you have in CSS.

    • This reply was modified 7 years, 3 months ago by morajabi.

    oh sorry i forgot to mention it.You can add the css in the “style.css” file or you can add the css from admin side “Additional CSS” option in the theme customizer.

    Appearace >> Customizer >> Additional css.

    Moreover you need to use the different image class in the image tag or uniqe id. So you can show and hide those images with reference the class.Yes right you need to take little bit css/HTML effort

    • This reply was modified 7 years, 3 months ago by sumithsuku11.

    @sumithsuku11 Yes it is possible this way with one downside, and that is if you have bunch of these media queries for different posts, the user has to fetch all of them no matter they are relevant to current post. So if you have 100 posts each with 3 media queries and each media query takes 3 lines, then you are forcing user to download 99 * 3 * 3 = 171 line unnecessary code (nearly 30kb). Therefore it’s not recommended to use this approach for more than a few posts or images.

    Hey i have shown it for get an idea. And its useful if we have common images for all page/posts. If you have different image for each post the solution wont work at all.

    Actually what is the requirement what cause you have searching ? image clarity problem ?

    @sumithsuku11 It IS possible for multiple posts. You just need to have multiple unique class/id in each post.

    Yes right i knew that, but you said already difficulties when there is a large number of posts.
    ??

    Thread Starter Russ1979

    (@russ1979)

    Thanks everyone for their replies. @morajabi its for my home page https://russelldevelopment.co.uk/wordpress/ the images work fine for larger screens and tablets but for mobile they text flows over the image. So I was hoping to add a different image for these devices?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Different Images for Different Divices’ is closed to new replies.