Support

Account

Home Forums Add-ons Repeater Field Custom Image Size without Cropping

Solving

Custom Image Size without Cropping

  • Hi…I’ve tried to follow some documentation examples, but seem to not be getting it to work properly….I basically just want to be able to define the size of the image displayed…Currently, I can easily adjust the size by choosing the pre-defined sizes [thumbnail], [medium], [large] — however, I want to create a slightly smaller size than [medium], but without cropping it as the [Thumbnail] does.

    Currently, this is the code I am testing to display the data on one of the pages (the code below works):

    <?php if(get_field('list_of_games')): ?>
      <?php while(has_sub_field('list_of_games')): ?>
       <?php $post_object = get_sub_field('game_name');
             if( $post_object ): 
               // override $post
          $post = $post_object;
          setup_postdata( $post ); 
    ?>
    
    <table class="tg-table-plain">
      <tr>
        <td class="feature-game-img"><img src= "<?php $image = get_sub_field('image'); echo $image['sizes']['medium']; ?>" /></td>
        </td>
      </tr>
    </table>
    
       <span><?php the_sub_field('list_of_games'); ?></span>
            <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
     
        <?php endif; ?>
      <?php endwhile; ?>         
    <?php endif; ?>

    I would greatly appreciate any help with getting this set with a custom image size.

    Thanks!

  • Maybe we can help each other on this one? I’ve been working on something similar with no luck.

    I got so far as creating a custom image size by adding something like this to the functions.php file:

    if ( function_exists( 'add_image_size' ) ) {
    	add_image_size( 'homepage-thumb', 97, 83, true ); /* 97px wide by 83px tall */
    }
    
    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    
    function my_custom_sizes( $sizes ) {
        return array_merge( $sizes, array(
            'homepage-thumb' => __('Homepage Thumbnail'),
        ) );
    }

    Replacing homepage-thumb with the name of your custom thumbnail size. Where it says “true” that just uses a soft proportional crop, instead of a hard crop. If you changed that to “false” it will create a new separate image file when you upload, rather than just resizing the original image to those proportions.

    The problem I’m having, is the code to use that image isn’t working. I can’t even get it to show the default thumbnail size. I tried using your code above, like this:

    <img src="<?php $homethumb = the_field('button_one_image'); echo $homethumb['sizes']['homepage-thumb']; ?>" />

    I don’t know what I’m doing wrong though, I must be missing something.

  • @treebeard – Ya, I am pretty much completely lost on this too…The only way I am able to get my images to display are by using “Image Object”…but, I think I read in order to do custom sizes you need to use “Image ID”….im hoping ACF Support can help tweak my code to get this to work.

  • I feel your pain, I spent all day on this, but I got it to work. I posted separately about it, maybe this will help you?

    http://support.advancedcustomfields.com/forums/topic/custom-image-size-with-image-field/

    I ended up having to use “Image ID” instead of URL, but the code posted there is exactly what I’m using.

    The only change would be to choose either true or false, for the image size code in the functions file, here:

    add_image_size( 'homepage-thumb', 97, 83, true );

    I have mine set to true so it doesn’t distort the image – check out this page in the WP docs, about “Crop Mode” :

    http://codex.wordpress.org/Function_Reference/add_image_size#Crop_Mode

    Hope that helps!

  • Hii..thanks, i will look at this and hopefully see how to do…i just get confused with the way my code is setup…

    Is this ‘homepage Thumbnail’ the name of field type?

    'homepage-thumb' => __('Homepage Thumbnail'),

  • homepage-thumb is the name I came up with, you can call it anything you like. So for instance, you could set up your functions.php file like this:

    if ( function_exists( 'add_image_size' ) ) {
    	add_image_size( 'my-custom-thumb-name', 97, 83, true );
    }
    
    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    
    function my_custom_sizes( $sizes ) {
        return array_merge( $sizes, array(
            'my-custom-thumb-name' => __('My Custom Thumbnail'),
        ) );
    }

    my-custom-thumb-name is the name of your additional image size (you can call it whatever you want).

    I would recommend not using the term “image” for anything just to make sure it doesn’t cause any conflicts (say with WP or with another plugin.)

    Then in your template, you could use this:

    <?php
    	$attachment_id = get_sub_field('my-image-subfield-name');
    	$size = "my-custom-thumb-name";
    	$image = wp_get_attachment_image_src( $attachment_id, $size );
    ?>
    
    <td class="feature-game-img"><img src= "<?php echo $image[0]; ?>" /></td>

    my-image-subfield-name is the the name of your subfield (again, I would avoid using “image” just in case).

    Then all you need to do is echo the image there. You’ll notice the attachment_id uses get_sub_field instead of just get_field.

    Theoretically this should work, although I haven’t tested it.

    Also you might not see an image if you don’t upload new images because WP would need to create the new image size you created during the upload to the media library.

    See if that works, and if not, let me know.

  • Also, I forgot to mention, in the admin where you set up the image subfield, use “Image ID” for the Return Value.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Custom Image Size without Cropping’ is closed to new replies.