- This topic has 16 replies, 3 voices, and was last updated 3 years, 8 months ago by
Tom.
-
AuthorPosts
-
July 31, 2017 at 4:46 am #357432
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?
July 31, 2017 at 8:48 am #357580Leo
StaffCustomer SupportHi 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/July 31, 2017 at 10:10 am #357630Zach
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?
July 31, 2017 at 10:32 pm #357876Tom
Lead DeveloperLead DeveloperGP 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-developmentJuly 31, 2017 at 11:30 pm #357897Zach
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.
August 1, 2017 at 12:44 am #357920Tom
Lead DeveloperLead DeveloperAh, 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-developmentAugust 1, 2017 at 12:57 am #357933Zach
Thanks much!
August 1, 2017 at 9:44 am #358136Tom
Lead DeveloperLead DeveloperYou’re welcome! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 4, 2017 at 5:34 am #359637Zach
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) }
August 21, 2017 at 7:18 pm #370851Zach
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!
-ZachAugust 22, 2017 at 12:06 am #370954Tom
Lead DeveloperLead DeveloperSorry! 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-developmentAugust 22, 2017 at 7:45 am #371224Zach
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) }
August 22, 2017 at 9:07 am #371331Tom
Lead DeveloperLead DeveloperDoes 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-developmentAugust 22, 2017 at 9:47 am #371369Zach
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?
August 22, 2017 at 11:50 pm #371695Tom
Lead DeveloperLead DeveloperAh, 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 -
AuthorPosts
- You must be logged in to reply to this topic.