After reading the discussion on Mobile is it small-to-large or large-to-small, I'm wondering a bit: does the order in which breakpoint classes are attributed to markup elements matter?
I managed to figure out a set of functions to show one or the other site logo depending on breakpoint (devices particularly) but it's been tricky to not let one function get in the way of the other (for example uk-visible-large. uk-visible-medium, etc).
According to w3c it's not specified so it doesn't matter. But some time it does (rare case).
Hey J.C.
Classes order don't matter. Regarding the your responsive classes, it can get a bit tricky to set up.
Something to keep in mind is that one element usually doesn't have multiple responsive classes, it is rather hidden/visible up to or from a breackpoint, that is maybe where your issues are. Feel free to share your code if you are pulling your hair out.
Cheers,
Yes, I think I've been approaching it from a - sort of - "if/then" perspective. Adding attributes is doable, but you're right on the mark with responsive classes in combination with visibility.
The experiment basically comes down to seeing whether there is a way to determine breakpoint and then loading the related image. A few examples:
// Changing Logo for screens > 960px
beans_add_attribute( 'beans_site_branding', 'class', 'uk-visible-large' );
add_action( 'beans_site_branding_after_markup', 'example_large_mobile_logo' );
function example_large_mobile_logo() {
?><img class="uk-hidden-small uk-hidden-medium" src="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-default.png" alt=""><?php
}
// Changing Logo for screens 768px - 960px
beans_add_attribute( 'beans_site_branding', 'class', 'uk-visible-medium' );
add_action( 'beans_site_branding_after_markup', 'example_medium_mobile_logo' );
function example_medium_mobile_logo() {
?><img class="uk-hidden-small uk-hidden-large" src="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-medium.png" alt=""><?php
}
// Changing Logo for screens 480px - 768px
beans_add_attribute( 'beans_site_branding', 'class', 'uk-visible-small' );
add_action( 'beans_site_branding_after_markup', 'example_small_mobile_logo' );
function example_small_mobile_logo() {
?><img class="uk-hidden-medium uk-hidden-large" src="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-small.png" alt=""><?php
}Obviously utilising a singular approach (for example only specify alternate < 480px) can result in complications :P I'm still tweaking, so just in case, most recent can be found here.
Perhaps more important, the more variables, the more images. In the markup, and thus loaded (and without attributes Search begins to complain, though adding height and width is comparatively easy).
I may have been stumbling over my own feet there, I figured that in order to not end up with any issues I'd have to specify per breakpoint including which uk-visible classes.
The reason I dove into it was noticing a series of WP themes (on .org) where in the customizer it was possible to specify which image for what breakpoint without each of them in markup (granted, way over my head stuff, but I can see the baseline functionality being something for Beans itself. But that is a different topic alltogether :)
Hey J.C.
If it is for the logo, I would advise the use the picture HTML tag. For example:
beans_modify_action_callback( 'beans_site_branding', 'example_logo' );
function example_logo() {
?>
<picture>
<source media="(max-width: 480px)" srcset="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-small.png">
<source media="(max-width: 960px)" srcset="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-medium.png">
<img src="https://mk-beans-jcmrs.c9users.io/wp-content/uploads/logo-default.png" alt="JCMRS logo">
</picture>
<?php
}It is a much better approach that show/hide three images because the browser will only load the appropriate image according to the device used to browser your site.
Happy coding,