[Resolved] Custom crop for blog index featured images?

Home Forums Support [Resolved] Custom crop for blog index featured images?

Home Forums Support Custom crop for blog index featured images?

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #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?

    #357580
    Leo
    Staff
    Customer Support

    Hi there,

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

    #357630
    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?

    #357876
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #357897
    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.

    #357920
    Tom
    Lead Developer
    Lead Developer

    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' );
    }
    #357933
    Zach

    Thanks much!

    #358136
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! ๐Ÿ™‚

    #359637
    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)
    }
    #370851
    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

    #370954
    Tom
    Lead Developer
    Lead Developer

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

    #371224
    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)
    }
    #371331
    Tom
    Lead Developer
    Lead Developer

    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)

    #371369
    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?

    #371695
    Tom
    Lead Developer
    Lead Developer

    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';
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.