12 votes
Accepted

How can I set image sizes and still have responsive images using the srcset attribute?

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-...
Andy Macaulay-Brook's user avatar
8 votes

the_post_thumbnail responsive srcset not populating with custom image size

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 ...
Andy Macaulay-Brook's user avatar
6 votes
Accepted

Responsive Images - Add srcset attributes to custom Images Function

I think wp_get_attachment_srcset() is what you are looking for. $srcset = wp_get_attachment_image_srcset( $image['id'], array( 100, 100 ) ); Now you can escape the HTML and use it in your code. <...
Johansson's user avatar
  • 15.3k
6 votes

Wordpress Gutenberg Embed Blocks Are Not Responsive

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-...
rudtek's user avatar
  • 6,121
5 votes

make Wordpress image captions responsive

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', '...
Alexey Kosov's user avatar
4 votes
Accepted

Images all broken after migration and upgrade

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 ...
Z. Zlatev's user avatar
  • 1,149
4 votes

How to display a different image size for mobile

WordPress wp_is_mobile() can be the function that you're looking for. // Use the build-in function if WP if(wp_is_mobile()) // On mobile { the_post_thumbnail_url('featured-image-mobile'); } else {...
Elex's user avatar
  • 1,045
4 votes

How do I work with responsive images in Wordpress? (img srcset/sizes)

Render a post thumbnail, having the browser pick the smallest possible source that fits the image size You need to provide a sizes attribute that describes what size the image will be rendered at ...
Jacob Peattie's user avatar
3 votes

Need help with making a website where user can add products

This is generally not the type of question to ask here. Try searching the WP plugin repository. I'd take a close look at Woocommerce and it's extensions.
Pete's user avatar
  • 998
3 votes

Enqueue scripts based on browser width?

No it isn't. Server can not know browser width. Not sure it is even a smart idea since the width of the browser can change at any point.
Mark Kaplun's user avatar
  • 23.4k
3 votes
Accepted

Featured image (responsive) above content is too small after update to WordPress 4.4

How can the global $content_width affect the post thumbnail ? Let's check how the global $content_width can affect the output of the_post_thumbnail( 'large' ) and trace out the relevant function ...
birgire's user avatar
  • 67.1k
3 votes

Move Sidebar from Above Content To Below When Responsive

Depending on which device you want to target, you'll need to use a media query, you can read more about those here: CssTrick: @media only screen and (max-width : 320px) { #content { ...
Aishan's user avatar
  • 752
3 votes
Accepted

Meta tag viewport

The meta tag should get inserted in the <head> section of a website. Regardless if you are using a header.php and footer.php or not, you should have a <head> section in your document. ...
LWS-Mo's user avatar
  • 1,522
3 votes

Meta tag viewport

Try this in functions.php add_action( 'wp_head', 'add_viewport_meta_tag' , '1' ); function add_viewport_meta_tag() { echo '<meta name="viewport" content="width=device-width, initial-scale=1, ...
Muddasir Abbas's user avatar
3 votes
Accepted

Get a list of all image sizes that match aspect ratio of original one

I think you should use wp_calculate_image_srcset() for the simple reason that it is very complex (it should not have been just one function in the first place). Duplicating it might lead to weird side ...
fuxia's user avatar
  • 107k
3 votes
Accepted

How to exclude an image size from the Wordpress srcset

WordPress allows you to hook into wp_calculate_image_srcset See Core file on Trac This filter gives you 5 arguments: $sources One or more arrays of source data to include in the 'srcset' $...
iantsch's user avatar
  • 804
3 votes

Wordpress Gutenberg Embed Blocks Are Not Responsive

If you don't already have it, add body_class(); to the themes body tag <body <?php body_class(); ?>>
Reberg's user avatar
  • 31
2 votes

Proper usage of wp_is_mobile()?

wp_is_mobile() detects device based on HTTP_USER_AGENT (it's not related to screen size) wp_is_mobile return true or false based on $_SERVER['HTTP_USER_AGENT'] if $_SERVER['HTTP_USER_AGENT'] contains ...
bhv's user avatar
  • 163
2 votes
Accepted

srcset and custom field get_post_meta and wp_get_attachment_url

Just put two and two together: <img src="<?php $bigimg = get_post_meta( $post->ID, 'bg_file', true ); echo wp_get_attachment_url( $bigimg ); ?>" srcset="<?php echo ...
TheDeadMedic's user avatar
  • 36.4k
2 votes

Featured Image in 4.4 should be larger on mobile device

The answer is to use WP's responsive images, customising the sizes attribute to suit your use case. Reading between the lines, I'm assuming here that you are using a responsive design approach to ...
Andy Macaulay-Brook's user avatar
2 votes
Accepted

One of my image sizes isn't showing up in srcset

Just gong to post the answer here too. @Dan linked to another question that had the answer. Here's some documentation on the new responsive images feature: Responsive Images in WordPress 4.4 The ...
John_911's user avatar
  • 566
2 votes
Accepted

How to use the responsive images feature from WP 4.4 in your themes

Following our exchange in the comments I've reread your question and have a pretty straightforward answer: It looks like it's working fine. You are worried about the sizes attribute in your second ...
Andy Macaulay-Brook's user avatar
2 votes
Accepted

Is Twenty Eleven Theme Responsive ? any update?

Is this theme mobile friendly at all of has some bugs on mobile displays? Go and preview the theme on your mobile device to find out if it's friendly or not - wordpress.org/themes/twentyeleven. You ...
jgraup's user avatar
  • 9,744
2 votes

Custom responsive 'featured image' sizes

First off, I'm not really sure why you need to involve the wpdb class just to create the img tag. If you want to get the featured image, you can use the Wordpress functions get_the_post_thumbnail() ...
brianjohnhanna's user avatar
2 votes
Accepted

How can I make wp default gallery responsive?

You can try using css to control the visual layout. I have tested on my dev server and this was successful. @media only screen and ( max-width: 320px ) { .gallery-item {float:left;width:50% !...
DigitalDesigner's user avatar
2 votes

Understanding WordPress image sizes and responsive images

If you add the code after you have uploaded images onto pages you will also need to regenerate the images with a plugin like Regenerate Thumbnails by Alex Mills (Viper007Bond). https://wordpress.org/...
Glen Charles Rowell's user avatar
2 votes
Accepted

Reduce size of responsive title

You can add custom CSS where you use media query in order to reduce the font-size of the title in small devices. You also have some styling that remove the line break and add the 3 dots at the end. So ...
Temani Afif's user avatar
2 votes

ACF Plugin - Random Gallery Image with wp_get_attachment_image()

<?php $images = get_field('gallery'); $size = 'full'; // (thumbnail, medium, large, full or custom size) $rand = array_rand($images, 1); if( $images ): ?> <?php ...
Maxim Sarandi's user avatar
2 votes
Accepted

GIF featured image is resized on server but not used in frontend. Why?

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 ...
Marc's user avatar
  • 707
2 votes
Accepted

Change Responsive Images Maximum Width of 1600px

You can simply remove that limit, go to your functions.php and add this code. function remove_max_srcset_image_width( $max_width ) { return false; } add_filter( 'max_srcset_image_width', '...
Castiblanco's user avatar
  • 2,184

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