[Resolved] Custom image size on query loop (GenerateBlocks)

Home Forums Support [Resolved] Custom image size on query loop (GenerateBlocks)

Home Forums Support Custom image size on query loop (GenerateBlocks)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2318016
    Joey

    I use this code to create a custom image size on WordPress:

    add_action( 'init', function() {
        add_image_size( 'blog', 747, 466.383, true ); 
    } );

    I do this because my images for the blog are 16:9 (1920×1080), for the page hero, but the feed in my blog home shows images at 8:5. In the customizer, I set the blog images to that new image size—this way the images look good on the .single page heros, but are tall enough to look good in the blog feed.

    My issue is that the new image size doesn’t show up in GenerateBlocks. For example, I’m using query loops in several parts of the site that emulate the main feed of the blog (i.e. should be 8:5).

    I can set image size in GenerateBlocks but it only has thumbnail, medium, large, and full. Is there not a way to make that new size appear in the choices?
    I can use CSS with the aspect-ratio property, but I was just wondering why the new size doesn’t appear. Thank you—sorry for all the questions.

    #2318550
    Ying
    Staff
    Customer Support

    Hi there,

    I can set image size in GenerateBlocks but it only has thumbnail, medium, large, and full. Is there not a way to make that new size appear in the choices?

    Are you using the Dynamic image block? If so, change it to the Image block, GB’s image block allows you to set specific image size:
    https://docs.generateblocks.com/article/image-overview/#settings

    #2318615
    Joey

    Hi Ying,

    Yes, I am using the Dynamic image block from GenerateBlocks. I know I can set object-fit with the block builder. I can also set ratio with CSS, which I can’t do with the block builder as far as I know, but would be my other solution. My question is if I can set the actual image size.

    Please see here. It shows thumbnail, medium, large, and full size. But my site has an additional image size called “blog”. Please see here in the customizer. Is there a way to use that image size with GenerateBlocks? Thank you.

    #2318620
    Ying
    Staff
    Customer Support

    Yes, I am using the Dynamic image block from GenerateBlocks.

    GB doesn’t have the Dynamic image block. GB only has the Image block. Just want to make sure you are using the Image block, NOT the Dynamic image block.

    I can also set ratio with CSS

    You don’t have to use CSS, you can directly enter the width and height to achieve this.

    Have you checked this link I attached in my previous reply? https://docs.generateblocks.com/article/image-overview/#settings

    You can see the width and height fields where you can directly enter the actual image size.

    #2318729
    Joey

    I honestly have no idea what a dynamic block is. GB images can be dynamic, if enabled.

    Have you checked this link I attached in my previous reply?

    Yes, I checked your link, it shows the GB image block, which is what I am using.

    Sorry, I think I’m not explaining clearly. I’m asking about image size (the file size of the image being used), not resizing a bigger image. I want to use the image file “blog” that I created, because it is a smaller file size and would load quicker. If I use the image size “large”, which is the closest option in the block editor, and resize it to fit 746×466 (the biggest size I would need in this situation), wouldn’t that slightly slow down the image load and use more bandwidth for users?

    Maybe this is a WP issue, not a GP issue. The WP image block does the same thing: there is only an option for full, large, medium, and thumbnail. Or maybe it’s not an option because it doesn’t make that big of a difference. I was just wondering because when I was editing with the GB editor, it didn’t show all the sizes that are available.

    Sorry for the confusion.

    #2319305
    Ying
    Staff
    Customer Support

    I’m asking about image size (the file size of the image being used), not resizing a bigger image.

    I finally understand what you mean.
    If you want to set which file to use, the option will only be those standard sizes that WP generates when you upload an image to the media library.

    GP or GB doesn’t have the ability to interfere with the image files, it’s managed by WP.

    Not sure if you know, you can set your own dimensions for image size at settings > media.

    And you can create additional image sizes:
    https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/

    #2319555
    Joey

    Oh, shit, this had the answer the whole time, thank you:

    And you can create additional image sizes:
    https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/

    So I had added this snippet:

    add_action( 'init', function() {
        add_image_size( 'blog', 747, 466.383, true ); 
    } );

    Which generated the actual size when I uploaded the image. But I was missing this part of the code:

    function wpb_custom_image_sizes( $size_names ) {
        $new_sizes = array(
            'blog' => 'Blog Size', 
        );
        return array_merge( $size_names, $new_sizes );
    }
    add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

    Which shows that new image size(s) on the block editor. So if anyone else is trying to do this, 'blog' is the name of my custom image size, and 'Blog Size' is what shows up on the block editor. You have to put both of those snippets for it to work. This works for traditional WP images, and it also works on GB images, which can be used on query loops.

    So in the end, this is really a WP issue, not a GP issue. But thank you Yin, I had been searching for that PHP for hours on WP, GeneratePress documentation, Stack Overflow—come to find out it was in WPBeginner. 🙂

    I’ll stop bugging you guys with questions. Thank you for all your help and I really appreciate the support.

    #2388789
    Eric

    Thank you, Joey! I was running into the same exact situation and this solved my issue.

    #2520056
    James

    Thanks, same here. Been using WordPress forever, but finally trying to embrace the damn block editor 🤣

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.