Using HiDPI-optimized Image on narrow desktop

[Brett]

I have been messing around with some different things like using svg images, left and right slider menus, etc. and have a questions for using a different logo when the sites jumps to the mobile menu.

I am using one logo in the header for desktop and I have an HiDPI-optimized Image that displays on the mobile menu. It displays fine when you are on the phone or ipad but I would like the header to use the HiDPI-optimized Image on desktop when it switches to the mobile menu. Currently, it still displays the regular logo on desktop at narrower widths.

What is the best way to handle that?

Topic

[Jason Bobich]

Hi Brett,

What you’re wanting to do isn’t really possible (currently, anyway) because the theme uses javascript to swap the URL of the image bases on the device’s pixel density. If you’re using this properly, that means HiDPI devices get a version of the image that is twice is large.

But the approach you’re trying to take doesn’t really make sense. It sounds like you’re trying to use the HiDPI 2x image as a way to declare a logo for mobile. So, your assumptions are that:

1. All mobile devices are HiDPI devices.
2. All desktops are not HiDPI devices.

Both are incorrect. For example, with what you’re doing, you’re going to end up with your mobile logo showing on desktop when anyone is using a modern Mac with Retina display.

There are several ways to approach your customization. If you want to look into the more cutting edge stuff, I would disable the theme’s javascript for swapping out the image URL:

function my_js_locals( $locals ) {
    unset( $locals['retina_logo'] );
    return $locals;
}
add_filter('themeblvd_js_locals', 'my_js_locals');

And then I would look into filtering the theme’s logo output, and using srcset in the HTML markup of the logo to target different viewport sizes and pixel densities. —

http://alistapart.com/article/responsive-images-in-practice

See the function themeblvd_get_logo() in /framework/includes/media.php. That’s the output you’d be filtering. Or, you could unhook themeblvd_header_logo_default from action “themeblvd_header_logo” and hook your own custom function that just outputs the HTML for the logo how you want.

• This reply was modified 7 years, 4 months ago by Jason Bobich. Reason: Linked to a better article about srcset

[Brett]

Thanks Jason, I was thinking of this wrong and what I wanted was more simple than what I asked. Essentially, all I wanted was a second logo style. A vertical logo would appear on desktop and then when it got to the mobile menu a horizontal logo would display in the mobile header with a left and right slide-out side menu.

I was thinking I could just utilize the HiDPI logo but as you pointed out, that would work so all I did in the end was add a new option into the theme options to upload a second image and display that when the browser was less than 992px.

[Jason Bobich]

Yeah, that’s a good, simple solution. That’s more-or-less what I do here on the support site, except for that I don’t actually have user options for the logos.

And if the option you added is a “logo” type option to the theme options page for you mobile logo, it’s worth nothing you can output it simply like this on the frontend:

echo themeblvd_get_logo( themeblvd_get_option('your_mobile_logo') );

I would probably do it like this with a class added to specify it as the mobile logo:

echo themeblvd_get_logo( array_merge( themeblvd_get_option('your_mobile_logo'), array('class' => 'mobile-logo') ) );

[Author]

Replies