43

Here are few things you could try to remove the responsive image support in 4.4: /** * Disable responsive image support (test!) */ // Clean the up the image from wp_get_attachment_image() add_filter( 'wp_get_attachment_image_attributes', function( $attr ) { if( isset( $attr['sizes'] ) ) unset( $attr['sizes'] ); if( isset( $attr['srcset'] ...


32

In very layman term wp_is_mobile() is not for styling your theme. How it works: It matches some of device's native name in User Agent String. So if someone manipulate the string and send false information you can not detect what device it is. And it does not return any device name it just return true if you are on not on desktop else false How WordPress ...


13

The simplest and cleanest way to do this is simply this: add_filter( 'wp_calculate_image_srcset', '__return_false' ); To echo what most other folks are saying though, srcset is a good idea and is the future (best practice now), but if you need a quick fix to keep your site working, the above snippet does the job without any hacking. source: WP Core Blog


11

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


10

I just ran into this issue as well, the cause of this is that at 600 pixels wide the admin bar goes from being position:fixed to position:absolute; When fixed, it is locked to the top of the screen (top:0) When absolute it is locked to the top of the closest container that contains it. This is the html element by default, but if a parent is defined to have ...


9

Concerning documentation there is this blog post on the Make Blog: Responsive Images in WordPress 4.4 To increase the 1600px limit mentioned in the comments try this: add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){ return 2000; }, 10, 2); Finally as already mentioned you should fix your calls to add_image_size ...


9

The srcset attribute is constructed from images that are the same aspect ratio. Create a few of those and you'll be ok. add_image_size( 'compare-offer-box', 400, 300, true); add_image_size( 'compare-offer-box-2', 800, 600, true); add_image_size( 'compare-offer-box-3', 1200, 900, true); for example. The fourth, boolean, argument tells WP to crop to the ...


8

1) A workaround by extending the WP_Image_Editor_GD class The problem is how to access the image sizes before we change the quality of intermediate jpeg images. Note that the image_resize() function is deprecated. We can use the jpeg_quality filter from the public get_quality method of the abstract WP_Image_Editor class: $quality = apply_filters( '...


8

There is a simple solution for this. Let the gallery use the 5 column grid system and using the @media-queries we can alter it for tablet and mobile. I just tested it on your given URL and it works perfect. But try to remove any custom codes you have used before since I had to remove it in order to use the following code. /* For displaying 3 columns on ...


7

Another possibility is to change the shortcode output so that the width is no longer hard-coded. Modifying the Codex example to have no width: add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3); /** * Filter to replace the [caption] shortcode text with HTML5 compliant code * * @return text HTML content describing embedded ...


7

Most likely, the reason the URLs in your srcset attributes are incorrectly showing HTTPS is because the URLs for all images are built using the value of the siteurl option in your wp_options table. If you're serving your front end over HTTPS, you should also change those values (via Settings > General). Here's the related ticket on the WordPress issue ...


6

Old question, but I thought I'd share my solution, which makes all images responsive by adding a filter for post_thumbnail_html. add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5); //Image sizes for Interchange add_image_size( 'fd-lrg', 1024, 99999); add_image_size( 'fd-med', 768, 99999); add_image_size( 'fd-sm', 320, 9999); function ...


6

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 { max-...


6

This is more of a general srcset and browser question, not a WordPress specific question. However, in general, you can't predict what browsers will do with the srcset information. For your specific example, it appears that you failed to clear the cache completely between your reloads. Note the 304 response indicating that your browser already has the image ...


5

Here's a much simpler and cleaner solution: function my_img_caption_shortcode_width($width, $atts, $content) { return 0; } add_filter('img_caption_shortcode_width', 'my_img_caption_shortcode_width', 10, 3);


5

You don't need a custom walker function. You can alter wp_nav_menu like this: wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'flexnav', //Adding the class for FlexNav 'items_wrap' => '<ul data-breakpoint="800" id="%1$s" class="%2$s">%3$s</ul>', // Adding data-breakpoint for FlexNav )); and ...


5

I found the same issue here and the solution from there works. The solution is as simple as pasting this: $content_width = 2000;// Value higher than your new 'large' width in functions.php Explanation copied from there(user Chip Bennett): I believe your issue is that the value set for the global $content_width variable (which is 640px in Boilerplate and ...


5

This will disable the srcset code by eliminating any images wider than 1 pixel. add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) ); In the long run, you should try to fix the actual problem. Still, this works if you need a quick fix.


5

In order for your images to be responsive they require CSS. The CSS will inform the image to stretch 100% of the available space and to automatically adjust the height. img.responsive { width: 100%; height: auto; } Because you don't want to apply this rule to all images, you'll need to add a class on the target image which tells it to use these ...


4

Do not duplicate - just switch to the new tag as soon as 3.8 is released. The intent of this change is to replace the old tag, not to have both of them in use.


4

Per the Codex entry for the_post_thumbnail(), passing an array has not worked since WordPress 3.0: PLEASE NOTE: The crop does not work in WP 3.0+. All that is needed for WP 3.0+ is the call for the thumbnail to post. Then proceed to media in the dashboard and set your thumbnail to crop to the size you wish to use. The correct implementation is to create ...


4

To add to the answer from @cristian.raiber, there is no function in Wordpress or php to detect screen sizes, and there will in all probabilty never be such functionality. Php runs server side, which runs before clients side which is browser side. As for php, and for that matter Wordpress, I cannot see any future implementation of any kind of function to ...


4

There's not enough info to be sure this answer is definitive but here's an attempt. Firstly make sure the image you are uploading is actually larger than the size you have defined. I see people upload images that are too small and then get this sort of result all the time. Secondly, WP will only make up a Srcset list of image sizes with the same aspect ...


4

I think a quick thumbnail regeneration might be the cure for this. Try using Regenerate Thumbnails or a similar plugin, but backup your uploads directory before proceeding. In order to just disable WP responsive images use this filter. /** * Disable WP 4.4 srcset */ add_filter( 'wp_calculate_image_srcset', '__return_empty_array' );


4

It may be that your theme hasn't declared support for responsive embeds. Try adding this code to your functions.php // Add support for responsive embedded content. add_theme_support( 'responsive-embeds' ); or your theme setup file if there is one.


3

There is wp_is_mobile() function to conditionally display (or block) content for mobile users. <?php if (!wp_is_mobile()) : ?> <!-- Stuff to hide from mobile users --> <?php endif; ?>


3

Yes. Using CSS won't prevent JS from loading generally but it's more reliable than server side sniffing. Depends on project but I would go with media queries to just hide it or bring it in page's content flow. @media (max-width: 768px) { .sticky-social { display: none; } }


3

Your code actually works for me and it is changing the theme according to the current width. But I think you should need some tweaking something like below: For your JavaScript: var $ = jQuery; $(document).ready(function() { var windowWidth = $(window).width(); var windowHeight = $(window).height(); $.ajax( { type: "POST", url: "...


3

You would need to access your style sheet (style.css). Your site uses media queries to target specific screen sizes and apply different rules when the stylesheet interacts with them. In section 4.1, it defines the site title as: .site-title { font-size: 60px; } In Section 8.0, just beneath @media (max-width: 643px) it defines the site title as: ....


3

This is quite an intensive operation if you look at it. I have done this once before. Before you start, you will need to understand what is happening. The layout of full width pages are controlled by the full-width body class currently defined in line 419 in functions.php. If the following conditions are met, the full-width body class is applied If sidebar-...


Only top voted, non community-wiki answers of a minimum length are eligible