Sometime ago I added a couple of additional image formats to Wordpress in order to fine-tune my responsive display. I added those lines to functions.php:
add_image_size( "maximal", "1900" );
add_image_size( "desktop", "1400" );
add_image_size( "tablet", "900" );
add_image_size( "smalltablet", "700" );
add_image_size( "mobile", "500" );
add_theme_support( 'post-thumbnails' );
I release I was too greedy because I'm not using most of those formats now and I would like to remove some of them. To do so I basically commented the image formats that I wanted to get rid of but from what I see, all srcset attributes are still listing them in my code.
Is there a way to tell Wordpress to stop adding those formats in srcset ? I thought of using a regex to get rid of them but that generates additional processing to the page.
Thanks
Laurent
To make sure that these images' sizes is unregistered use this:
remove_image_size( "maximal" );
Then use these filters to clean the current images from these sizes:
// Remove the calculated image sizes
add_filter( 'wp_calculate_image_sizes', '__return_false' );
// Remove the calculated image sizes
add_filter( 'wp_calculate_image_srcset', '__return_false' );
// Clean image attrs
add_filter( 'wp_get_attachment_image_attributes', 'unset_image_sizes');
function unset_image_sizes() {
if( isset( $attr['sizes'] ) )
unset( $attr['sizes'] );
if( isset( $attr['srcset'] ) )
unset( $attr['srcset'] );
}
I hope this helps.
Related
My WordPress website is generating thumbnails for my images I want to prevent WordPress from doing that how can I achieve the same?
You can follow these steps for the same :
Step 1: In Admin Panel Go to Settings -> Media.
Step 2: Now Uncheck (Crop thumbnail) If it's Checked.
Step 3: Set at Thumbnail size, Medium size, and Large size the Width and Height to
You may use the remove_image_size() method like so:
add_action( 'init', 'so_73173777_remove_image_sizes' );
function so_73173777_remove_image_sizes() {
remove_image_size( '1200' );
remove_image_size( 'portfolio-full' );
remove_image_size( 'blog-medium' );
/* etc ... */
}
For removing default WP sizes:
add_filter( 'intermediate_image_sizes_advanced', 'so_73173777_remove_core_sizes' );
// This will remove the default image sizes and the medium_large size.
function so_73173777_remove_core_sizes( $sizes ) {
unset( $sizes['small']);
unset( $sizes['medium']);
unset( $sizes['large']);
unset( $sizes['medium_large']);
return $sizes;
}
Consider searching for these particular problems, because this took me 5 seconds to find this plugin: https://wordpress.org/plugins/disable-generate-thumbnails/
I have seen several similar questions, but none of them seem to resolve my issue.
I have customised the default thumbnail size and tried to set some custom image sizes, but they are not showing in the Gutenberg image size options - even after clearing, re-generating and re-adding images.
The thumbnail size has updated correctly though.
Below is the code used in my function.php
function set_custom_image_sizes() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 330, true );
if ( function_exists( 'add_image_size' ) ) {
add_image_size('hero', 1680, 837, true);
add_image_size('person', 800, 800, true);
}
}
add_action( 'after_setup_theme', 'set_custom_image_sizes' );
function create_custom_image_sizes($sizes){
return array_merge( $sizes, array(
'hero' => __('Hero Image'),
'person' => __('Person Image')
));
}
add_filter('image_size_names_choose', 'create_custom_image_sizes');
The answer in this case is to realise that images in the media library also need to be regenerated even if they have not been added to a page. To prevent the need for re-uploading all images I use a plugin called "Regenerate Thumbnails" to update all the images in the library.
Once installed the regenerate option is available in the "Tools" menu
I am looking for a way to adress the responsive srcset and sizes attributes on Gutenberg image blocks - like image, cover and gallery.
Usually one would do this with the 'wp_get_attachment_image_attributes' filter, like:
function new_img_sizes( $attr, $attachment, $size ) {
if ( is_array( $size ) ) {
$attr['sizes'] = $size[0] . 'px';
} elseif ( $size == 'large') {
$attr['sizes'] = '99999px';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'new_img_sizes', 25, 3 );
But Gutenberg blocks don't react to that. Is there any other way or a method to utilize this filter to change their srcset-behaviour?
The code you showed in your question, is not how you do it correctly. Wordpress has a whole documentation page about how to do it. You should do it like:
add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
}
Inside Wordpress, I need to generate and create inside the upload folder a new cropping image size that has:
width=205px
height=120px
Inside my function.php here is my code:
// Call function on after setup
add_action( 'after_setup_theme', 'theme_setup_img' );
function theme_setup_img() {
add_theme_support( 'post-thumbnails' );
add_image_size('search-thumb', 205, 120, true );
// set_post_thumbnail_size( 205, 120, true );
}
However, no new image-sizes have been created inside the upload folder (only default WP sizes). Any solution?
Note: I'm using the default theme and the latest WP version
Your code looks correct. Mine is slightly different and I know it works:
if (function_exists('add_theme_support'))
{
// Add Thumbnail Theme Support
add_theme_support('post-thumbnails');
add_image_size('large', 700, '', true); // Large Thumbnail
add_image_size('medium', 250, '', true); // Medium Thumbnail
}
This was taken from the HTML5 Blank Theme by Todd Motto. Gerald also mentioned writing a script to re-render but there's a great plugin for that called Regenerate Thumbnails that does the same thing.
This might be due to you calling the new size inside the "after_setup_theme" action... I use the following code:
// Add custom image sizes
if( function_exists( 'add_image_size' ) ) {
add_image_size( 'search-thumb', 205, 120, true );
}
And it works every time... if it's inside the functions.php file, you don't need an action or hook to make it work.
Also, you can add this to functions.php to make your custom sizes show up in the drop down menus when inserting images into pages/posts/where ever:
// Functions to add custom image sizes to the media library thickbox area
// and put them into drop down
function my_insert_custom_image_sizes( $sizes ) {
// get the custom image sizes
global $_wp_additional_image_sizes;
// if there are none, just return the built-in sizes
if ( empty( $_wp_additional_image_sizes ) )
return $sizes;
// add all the custom sizes to the built-in sizes
foreach ( $_wp_additional_image_sizes as $id => $data ) {
// take the size ID (e.g., 'my-name'), replace hyphens with spaces,
// and capitalise the first letter of each word
if ( !isset($sizes[$id]) )
$sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
}
return $sizes;
}
add_filter( 'image_size_names_choose', 'my_insert_custom_image_sizes' );
You will need a plugin (I use AJAX Thumbnail Rebuild) to resize old images already uploaded before this code was implemented.
The problem here was the "Dynamic Image Resizer" plug-in.
It was breaking my theme with Wordpress 4.0.
I want to add an option to add feature image on add new post page like the image below.
How can I do it?
You need to use the wordpress function add_theme_support( 'post-thumbnails' );
Just add that line of code in your wordpress functions, and it will allow you to do that.
Read more about it here: http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
Hope that helps!
UPDATE: here is what I use in my functions.php. It creates re-sized versions of your uploaded images in your uploads folder. very useful:
// post thumbnail support
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'featured-thumb', 282, 158, true );
}