Within WP Theme Customizer, I am wondering if it is possible to allow users to set the size of a thumbnail based on the size of the screen? For example, the user could select (1) for screens above 981px, the thumbnail would be 300px, and (2)for screens less than 980px, the thumbnail would be 200px.

I developed two options:

Thumbnail Size - Medium Screen
Thumbnail Size - Large Screen

    <?php if( get_option('thumbnail_size_medium') ) { ?>.thumbnail {width: <? php echo get_option('thumbnail_size_medium'); ?>;}<?php } ?>

    <?php if( get_option('thumbnail_size_large') ) { ?>.thumbnail {width: <?php echo get_option('thumbnail_size_large'); ?>;}<?php } ?>

With the code above, I would be using two, separate options to update the same CSS element - .thumbnail. Within my CSS stylesheet, I use "@media" to make responsive elements. Within the Theme Customizer, how do I account for the screen size?

  • Wordpress don't have a native function to determine screen sizes. This is purely browser related. – Pieter Goosen May 12 '14 at 17:12

You could output large image inside an inline @media block assuming you are talking about window width and not literally screen width. Also providing a default if neither option is set so first if statement is not required.

.thumbnail {width: <? php echo get_option('thumbnail_size_medium') ?: $default_size; ?>;}

<?php if( get_option('thumbnail_size_large') ) { ?>@media ( min-width: 981px ) {.thumbnail {width: <?php echo get_option('thumbnail_size_large'); ?>;}<?php } ?>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.