I’ve implemented a working solution for now, which is to input everything as a ‘flat’ no column post, this way the ‘flow’ of the content when the client is entering is exactly how it would be on mobile. On Desktop, I apply width:50% and masonry plugin to all direct child elements of the post-body container. … Read more
It seems to be a feature and not a bug: screen sizes are not added to scrset if you upload a gif as teaser image: https://core.trac.wordpress.org/ticket/34528 This applies only to teaser images and not images in the article. I used 8-Bit PNG instead and now all scrset attributes are filled.
You can’t combine PHP and CSS in this way, as PHP is server-side and does not know client screen width, while CSS is client-side and does not know server functions. Instead, you could output both image sizes and then use CSS to show/hide them. eg: <div class=”image-thumbnail”><?php the_post_thumbnail(‘thumbnail’); ?></div> <div class=”image-fullsize”><?php the_post_thumbnail(‘full’); ?></div> and CSS: … Read more
When that variable was added to themes, was the July 2008. First time someone start talk about responsive design was the May 2010, two years later. Nowadays, that variable have lost is important (if ever it had one). Codex itself recommend to set the max width in css, like .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { … Read more
WordPress has a function called wp_is_mobile. It does very simple User Agent checking, which isn’t very reliable. There are a lot of user agents out there and they can easily be falsified. There is no guarantee that a browser representing itself as some user agent actually is that user agent. You can do more complicated … Read more
I handle the context like this: function wpse_216001_srcset() { // generate your Srcset here and return } function wpse_216001_sizes() { // generate your sizes attribute here and return } add_filter( ‘wp_calculate_image_sizes’, ‘wpse_216001_sizes’, 10 , 2 ); add_filter( ‘wp_calculate_image_srcset’, ‘wpse_216001_srcset’, 10 , 5); // call one of the standard WP image output functions here remove_filter( ‘wp_calculate_image_sizes’, … Read more
Query for post meta keys _wp_attachment_is_custom_background or _wp_attachment_is_custom_background: function t5_bg_img_id() { if ( ! $bg_img = get_background_image() ) return FALSE; $query = array( ‘post_type’ => ‘attachment’, ‘fields’ => ‘ids’, ‘meta_query’ => array ( array ( ‘key’ => ‘_wp_attachment_is_custom_background’, ‘value’ => get_option( ‘stylesheet’ ), ‘compare’ => ‘==’, ), array ( ‘key’ => ‘_wp_attachment_metadata’, ‘value’ => basename( … Read more
Do not use server side browser sniffing. It will fail: The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can’t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, … Read more
You’re going to want to use: @media (max-width: 988px){ .wp-caption { /* Force the box to be 100% */ width: 100% !important; } #content .wp-caption a img { /* Scale down if too big */ max-width: 99.03225806%; /* 614/620 */ height: auto; } }