[Resolved] Custom Image Sizes

Home Forums Support [Resolved] Custom Image Sizes

Home Forums Support Custom Image Sizes

  • This topic has 12 replies, 3 voices, and was last updated 2 months ago by Fernando.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2241695
    Laura

    Hi,
    I’m trying to create custom images sizes.

    I have this in child functions:
    // Add custom image sizes //
    add_action( ‘after_setup_theme’, function() {
        add_image_size( ‘logo-horiz’, 500, 200, true );
        add_image_size( ‘logo-vert’, 250, 175, true );
    } );

    I have regenerated thumbnails, see earlier email with issues with that.

    No new image sizes show up in the image choices in the post image block. What am I doing wrong?

    Also, how would I tell the sizes to be 500 width max? Also I don’t want cropping. What does the true represent?

    Thanks!

    #2241763
    David
    Staff
    Customer Support

    Hi there,

    thats because WordPress decided to hard-code the list of sizes in the image select box.
    You can add your own sizes using this PHP Snippet:

    add_filter( 'image_size_names_choose', function() {
    	return [
    		'thumbnail'    => __( 'Thumbnail', 'generatepress' ),
    		'medium'       => __( 'Medium', 'generatepress' ),
    		'medium_large' => __( 'Medium Large', 'generatepress' ),
    		'large'        => __( 'Large', 'generatepress' ),
    		'full'         => __( 'Full Size', 'generatepress' ),
                    'logo-horiz'   => __( 'Full Size', 'generatepress' ),
                    'logo-vert'    => __( 'Full Size', 'generatepress' ),
    	];
    } );

    In your code. the true specifies that the image should be cropped. Change it to false if you do not want to crop.
    If you want to just set a max width then only set a single value eg.

    add_image_size( 'your-image-slug', 500 );

    That will create a max 500px wide image of variable height without cropping.

    More info here:

    https://developer.wordpress.org/reference/functions/add_image_size/

    #2241772
    Laura

    As always, thank you David!
    So are you saying leave what I have in the child functions file and add this to Snippets? Both go together? So if I want to add more image sizes, do it in both places?

    #2241781
    David
    Staff
    Customer Support

    Thats correct. You need both.
    Your snippet to create the new sizes.
    My snippet so they appear in the select list.

    #2241786
    Laura

    And “my snippet” should be in child functions not in Snippets?

    I also have this one…
    add_action( ‘init’, function() {
    add_image_size( ‘logo_profiletop’, 500, false ); // 500 width max no crop
    } );

    Should I delete that from functions?

    I have it as you said…but I still don’t see the new image sizes as an option to choose from…but this is from within WPGeoDirectory but they say it will read any sizes that are available. So I must still be missing something.

    I have this in functions:

    // Add custom image sizes //
    add_action( ‘init’, function() {
    add_image_size( ‘logo_profiletop’, 500, false ); // 500 width max no crop
    } );
    add_action( ‘after_setup_theme’, function() {
    add_image_size( ‘logo-horiz’, 500, false );
    add_image_size( ‘logo-vert’, 250, false );
    } );

    And this in Snippet:
    add_filter( ‘image_size_names_choose’, function() {
    return [
    ‘thumbnail’ => __( ‘Thumbnail’, ‘generatepress’ ),
    ‘medium’ => __( ‘Medium’, ‘generatepress’ ),
    ‘medium_large’ => __( ‘Medium Large’, ‘generatepress’ ),
    ‘large’ => __( ‘Large’, ‘generatepress’ ),
    ‘full’ => __( ‘Full Size’, ‘generatepress’ ),
    ‘logo-horiz’ => __( ‘Full Size’, ‘generatepress’ ),
    ‘logo-vert’ => __( ‘Full Size’, ‘generatepress’ ),
    ];
    } );

    #2243148
    David
    Staff
    Customer Support

    As you’re using a Child Theme then i would keep the two PHP codes in the child theme functions.php
    That is your add_image_size snippet and the image_size_names_choose i provided.

    OK so my snippet tells the Rest API to display them in tbe Image Attachment select box. And this should apply to any plugin that uses the select box in the editor.

    However, it will only show them if an Image of that size is available. And thats probably the reason they are not showing.
    So after adding a new image size you need to run the Regenerate Thumbnails plugin and WordPress will create the new size images.

    #2244281
    Laura

    It’s still not showing the new sizes.
    I have this in child functions:
    // Add custom image sizes //
    add_action( ‘init’, function() {
    add_image_size( ‘logo-horiz’, 500, false ); // 500 width max no crop
    add_image_size( ‘logo-vert’, 500, false ); // 500 width max no crop
    } );
    add_action( ‘after_setup_theme’, function() {
    add_image_size( ‘logo-horiz’, 500, false );
    add_image_size( ‘logo-vert’, 250, false );
    } );
    add_filter( ‘image_size_names_choose’, function() {
    return [
    ‘thumbnail’ => __( ‘Thumbnail’, ‘generatepress’ ),
    ‘medium’ => __( ‘Medium’, ‘generatepress’ ),
    ‘medium_large’ => __( ‘Medium Large’, ‘generatepress’ ),
    ‘large’ => __( ‘Large’, ‘generatepress’ ),
    ‘full’ => __( ‘Full Size’, ‘generatepress’ ),
    ‘logo-horiz’ => __( ‘Full Size’, ‘generatepress’ ),
    ‘logo-vert’ => __( ‘Full Size’, ‘generatepress’ ),
    ];
    } );

    I have regenerated thumbnails a few times, cleared cache..no dice. Those options don’t show up in the list of optional image sizes.

    Am I doing something wrong?

    #2244497
    Fernando
    Customer Support

    Hi Laura,

    I tested the code and was able to make the new images sizes appear: https://share.getcloudapp.com/Wnu7AlWd

    Can you check if the syntax of your code is correct? For instance, sometimes, copying in pasting makes the quotation marks slanted. They should be straight.

    For reference, here’s the code I tested:

    add_action( 'after_setup_theme', function() {
    add_image_size( 'logo-horiz', 500, false );
    add_image_size( 'logo-vert', 250, false );
    } );
    add_filter( 'image_size_names_choose', function() {
    return [
    'thumbnail' => __( 'Thumbnail', 'generatepress' ),
    'medium' => __( 'Medium', 'generatepress' ),
    'medium_large' => __( 'Medium Large', 'generatepress' ),
    'large' => __( 'Large', 'generatepress' ),
    'full' => __( 'Full Size', 'generatepress' ),
    'logo-horiz' => __( 'Full Size Horiz', 'generatepress' ),
    'logo-vert' => __( 'Full Size Vert', 'generatepress' ),
    ];
    } );

    Hope this helps!

    #2246451
    Laura

    And this would go in child functions, not Snippets, correct?

    #2246455
    Laura

    That worked great! I must have had something wrong in mine.
    Thanks so much! Solved 🙂

    #2246598
    Fernando
    Customer Support

    It can be added to either Code Snippets or functions.php if you’re using a Child theme.

    You’re welcome Laura! Glad you got it to work! 🙂

    #2248644
    Laura

    Thank you! 🙂

    #2248783
    Fernando
    Customer Support

    Feel free to reach out anytime you’ll need assistance with anything else! 🙂

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