CODEWITHSUNDEEP
phpwordpressretina-display
Laura Sage
Laura Sage

Reputation: 221

PHP Conditional to serve different image if Retina Display

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>';
}
};

Upvotes: 0

Views: 413

Answers (1)

Laura Sage
Laura Sage

Reputation: 221

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

Upvotes: 2

Related Questions