Custom crop for blog index featured images?

[Zach]

I love that the Blog add-on can generate new image sizes for the featured images on the blog index page, but I wonder how to customize the crop on a per-image basis? I installed a plugin that can custom-crop and regenerate WP image sizes (Image Regenerate & Select Crop Settings). But the new images created by GP don’t seem to be registered as site-wide WP image sizes.

If I created custom image sizes outside of the customizer (like this), how would I let GP know that it should use that size in the blog index?

[Leo]

Hi there,

Easiest way would be to use WordPress’ Edit image: https://codex.wordpress.org/Edit_Media#Edit_Image

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Zach]

Nope. The size that GP generates via Blog settings does not show up in Edit Image. What I’m trying to do is make a custom-cropped size (besides the thumbnail) without cropping the other sizes (medium, large, etc).

For example, if my standard sizes are:

Thumbnail (150×150 hard crop, cropping area editable in WP Edit Image dialog)
Medium (fit into 300 width or height)
Large (fit into 1024 width or height)

I want GP to generate and use a new size for the Blog index (700×350 hard crop) but after it generates those variants they are not listed in the WP Edit Image dialog for the original image, and thus cannot have their cropping areas edited.

See what I mean?

[Tom]

GP does on-the-fly resizing, so it doesn’t actually generate a re-usable image size.

If you want to generate a new size, you can use add_image_size:

add_action('after_setup_theme', 'tu_add_image_sizes');
function tu_add_image_sizes() {
    add_image_size( 'custom-image-size1', 300, 9999 ); // 300 pixels wide (and unlimited height)
    add_image_size( 'custom-image-size2', 220, 180, true ); // (cropped)
}

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zach]

That gets me half way, but how should I tell GP to use my new image size for featured images in the blog index?

If I don’t specify a size in customizer -> blog settings then it will CSS-resize the fullsize images (since it doesn’t know which image-size use).

If I do specify the size in customizer then it generates its own new images (as you said) with no custom crop option. Since those images aren’t registered as WP sizes then I can’t get access to them in the WP image editor.

[Tom]

Ah, you can tell GP to use your created image size instead of the full image by adding this line into your function: add_filter( 'generate_page_header_default_size','custom-image-size1' );

So your function would be:

add_action('after_setup_theme', 'tu_add_image_sizes');
function tu_add_image_sizes() {
    add_image_size( 'custom-image-size1', 300, 9999 );
    add_filter( 'generate_page_header_default_size','custom-image-size1' );
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zach]

Thanks much!

[Tom]

You’re welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zach]

This works fine on Blog index pages, but it interacts with Page Headers (as the function name implies). On single posts where the 1.4 beta Page Header is turned off it seems like GP is trying to insert a featured image and failing to find the custom size I created. It inserts the fullsize variant and throws an error. To show the problem I’ve turned off the Page Header on single Pages via the Global Locations UI. Here’s a Page:
https://www.zachpoff.com/site/software/film-o-sync/
(The custom image size does exist for this image: https://www.zachpoff.com/site/wp-content/uploads/Film-O-Sync-2014-04-06-screenshot-600×600.jpg )

My function:

// ----------------------
// Add image size for blog index pages
// ----------------------

add_action('after_setup_theme', 'tu_add_image_sizes');
function tu_add_image_sizes() {
    add_image_size( 'large-thumbnail', 600, 600, true ); // (cropped)
	add_filter( 'generate_page_header_default_size','large-thumbnail' ); // (tell GP to use this size for index pages)
}

[Zach]

Just an update. This problem still exists in GPP 1.4.3.
The error is this:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'large-thumbnail' not found or invalid function name in /home/zachpoff/public_html/site/wp-includes/class-wp-hook.php on line 298

This error only appears if I leave the Page Header Global Location unset. It is thrown on each single post/page where a featured image has been set, even if I disable the Page Header element using the Disable Elements metabox in the editor. (If I enable the Page Header element I get the error followed by a full-sized featured image.) If there’s no featured image all is well.

My current workaround is to have a Page Header with an empty div and assign it in Global Locations. That solves the problem, but it adds padding since I’m using separate containers for this layout. (For demonstration I’m leaving it unset to demonstrate the problem, as stated in post above.)

Thanks for looking into this thorny problem. Lots of conflicting conditions but I’d love to get it right!
-Zach

[Tom]

Sorry! I must have missed your previous message.

Can you try replacing: add_action( 'after_setup_theme', 'tu_add_image_sizes' );

With: add_action( 'wp', 'tu_add_image_sizes', 50 );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zach]

Sadly no change in behavior. Just to make sure, here is the complete snippet:

add_action( 'wp', 'tu_add_image_sizes', 50 );
function tu_add_image_sizes() {
    add_image_size( 'large-thumbnail', 600, 600, true ); // (cropped)
	add_filter( 'generate_page_header_default_size','large-thumbnail' ); // (tell GP to use this size for index pages)
}

[Tom]

Does the error go away if you remove this line?:

add_filter( 'generate_page_header_default_size','large-thumbnail' ); // (tell GP to use this size for index pages)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zach]

Yes it does. The thumbnails are still the correct size in my blog and CPT archives (which was the whole point) but I assume that’s because they were already generated and they match the dims set in the Customizer > Blog > Featured Images?

[Tom]

Ah, I think I know the answer.

Do this instead:

add_action('after_setup_theme', 'tu_add_image_sizes');
function tu_add_image_sizes() {
    add_image_size( 'large-thumbnail', 600, 600, true ); // (cropped)
    add_filter( 'generate_page_header_default_size', 'tu_set_image_size' ); // (tell GP to use this size for index pages)
}

function tu_set_image_size() {
    return 'large-thumbnail';
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts