0

I'm finding various answers that use things like javascript to create Retina images throughout the site, but that's not what I'm after here. Here's a little background:

I've created a WordPress Theme and have added image upload for both a regular-sized logo, as well as one to be used for Retina displays (I've done the same for the favicon).

But I'm still learning PHP and am having a time trying to figure out how to write a conditional statement that will serve up X image for non-Retina displays, Y image for Retina displays (@X2), or X image if none has been uploaded for Y.

If it's at all helpful, I'm using the OptionTree plugin for creating the various options in my theme, and the IDs for my 2 images are "logo-regular" and "logo-retina".

This is what I have in my Header file right now for the logo. Obviously it only loads the regular logo:

if ( ! function_exists( 'ot_get_pixie_option' ) ) {
/* get the logo */
$logo = ot_get_option( 'logo-regular', array() );

if ( ! empty( $logo ) ) {
echo '<a href="' . get_home_url() . '"><img src="' . $logo . '" alt="' . get_bloginfo('name') . '" /></a>';
}
};
Laura Sage
  • 201
  • 1
  • 11
  • PHP is server side, the information about whether the screen is *retina* or not is client side. Without utilising JavaScript or CSS you cannot know whether the client visiting your site has a *retina* screen or not with PHP alone. The best you could do is check the user agent and make assumptions that certain user agents *should* have *retina* screens. However that's not a very reliable way to go about it. The norm in this case is to use CSS media queries and background images. – Novocaine Oct 23 '15 at 14:03

1 Answers1

2

I've solved this by using SVG images instead. This way they're at the highest resolution possible for all browsers (at least that's my current theory).

Laura Sage
  • 201
  • 1
  • 11
  • Yes, when handling vector graphics (Logos, shapes, etc) we should always stick to SVG - but sometimes that's not the case for pictures. I might suggest [this question's answers](https://stackoverflow.com/q/13744542/383904) about the use of `srcset x2` https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images – Roko C. Buljan Jul 31 '21 at 23:07