Custom image size cropping

Hi Ismael,
thanks for your reply.
Unfortunately this will not set all the responsive image sizes within the srcset attribute.
We found this code in the theme documentation and tested it. So far it’s working great. But its not described how to set the crop position. Is this posibile? And also we still want the images to have unique names like described above.

/**
 * Allow to change or add definition of themes registered image sizes
 * ==================================================================
 * 
 * see enfold\functions.php around line 146ff for theme defined image sizes
 * 
 * You need to regenerate the WP generated thumbnails with a plugin like 
 * 
 * https://wordpress.org/plugins/regenerate-thumbnails/
 * https://de.wordpress.org/plugins/regenerate-thumbnails/
 * 
 * when you modify image sizes.
 * 
 * 
 * Copy the following snippets in functions.php and modify to your needs
 * 
 * @param array $sizes              
 * @return array                
 * 
 * @version 1.1.0
 * @since Enfold 3.0  ??
 */

/**
 * Add or modify image sizes
 * 
 * @param array $sizes
 * @return array
 */
function custom_modified_thumb_sizes( array $sizes )
{
  /**
   * Example: Change sizes for 'masonry'
   * 
   */
            //  set to true to crop images (= default value if not set)
  //$sizes['masonry'] = array( 'width' => 1024, 'height' => 1024, 'crop' => false );
  
  /**
   * Example: Add new size for 'my_custom_size'
   */
  $sizes['test_img_size'] = array( 'width' => 800, 'height' => 450, 'crop' => true );
  $sizes['test_img_size_tab'] = array( 'width' => 650, 'height' => 366, 'crop' => true );
  
  return $sizes;
}

/**
 * Add or remove selectable image sizes
 * 
 * @since 4.7.5.1
 * @param array $selectableImgSize
 * @param array $imgSizes
 * @return array
 */
function custom_modify_selectable_image_sizes( array $selectableImgSize, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  $selectableImgSize['test_img_size'] = 'Test Bildgröße';
  $selectableImgSize['test_img_size_tab'] = 'Test Bildgröße Tab';
  
  /**
   * Example: Remove an image size 
   */
  unset( $selectableImgSize['extra_large'] );
  
  return $selectableImgSize;
}

/**
 * Add additional human readable image sizes (prepared in case we allow to add custom image sizes by theme)
 * 
 * @since 4.7.5.1
 * @param array $readableImgSizes
 * @param array $imgSizes
 * @return array
 */
function custom_modify_readable_image_sizes( array $readableImgSizes, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  $readableImgSizes['test_img_size'] = 'Test Bildgröße';
  $readableImgSizes['test_img_size_tab'] = 'Test Bildgröße Tab';
  
  return $readableImgSizes;
}

add_filter( 'avf_modify_thumb_size', 'custom_modified_thumb_sizes', 10, 1 );
add_filter( 'avf_modify_selectable_image_sizes', 'custom_modify_selectable_image_sizes', 10, 2 );
add_filter( 'avf_modify_readable_image_sizes', 'custom_modify_readable_image_sizes', 10, 2 );

Best regards,
Sebastian

Hi Ismael,

thanks for the advice :)

Is it possible to get unique names for the images when using the same size?

For example we’re having the size 1920x700px and we want to make two crop positions selectable for this size, so we can choose between those two images. Right now the cropped image gets the size as addition at the end (header-intro-1920×700). Is it possible to give the image name another addition like header-intro-1920×700-leftright or something like that?

Best regards,
Sebastian

Hi,
yeah, I know but the thumbnail name ist always created with the resolution as addition.

imgname-1920×700 (crop, left, top)
imgname-1920×700 (crop, right, center)

This wont work because only one image at a time can have the same name. So what we need is a solution that adds another addition which stands for the crop position.

So we need something like this,

imgname-1920×700-lefttop (crop, left, top)
imgname-1920×700-rightcenter (crop, right, center)

so we can use the same image with different crop positions.

Regards,
Sebastian

Hi Ismael,
ok, so am I doing something wrong?
This is the code in the functions.php

function custom_modified_thumb_sizes( array $sizes )
{
  /**
   * Example: Change sizes for 'masonry'
   * 
   */
            //  set to true to crop images (= default value if not set)
  //$sizes['masonry'] = array( 'width' => 1024, 'height' => 1024, 'crop' => false );
  
  /**
   * Example: Add new size for 'my_custom_size'
   */
  $sizes['divide_img_top_center'] = array( 'width' => 1920, 'height' => 500, array('top','center') );
  $sizes['divide_img_center_center'] = array( 'width' => 1920, 'height' => 500, array('center','center') );
  $sizes['divide_img_bottom_center'] = array( 'width' => 1920, 'height' => 500, array('bottom','center') );
  
  return $sizes;
}

/**
 * Add or remove selectable image sizes
 * 
 * @since 4.7.5.1
 * @param array $selectableImgSize
 * @param array $imgSizes
 * @return array
 */
function custom_modify_selectable_image_sizes( array $selectableImgSize, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  
  $selectableImgSize['divide_img_top_center'] = 'Trenner Bild (Top)';
  $selectableImgSize['divide_img_center_center'] = 'Trenner Bild (Center)';
  $selectableImgSize['divide_img_bottom_center'] = 'Trenner Bild (Bottom)';
  
  /**
   * Example: Remove an image size 
   */
  unset( $selectableImgSize['extra_large'] );
  
  return $selectableImgSize;
}

/**
 * Add additional human readable image sizes (prepared in case we allow to add custom image sizes by theme)
 * 
 * @since 4.7.5.1
 * @param array $readableImgSizes
 * @param array $imgSizes
 * @return array
 */
function custom_modify_readable_image_sizes( array $readableImgSizes, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  
  $readableImgSizes['divide_img_top_center'] = 'Trenner Bild (Top)';
  $readableImgSizes['divide_img_center_center'] = 'Trenner Bild (Center)';
  $readableImgSizes['divide_img_bottom_center'] = 'Trenner Bild (Bottom)';
  
  return $readableImgSizes;
}

add_filter( 'avf_modify_thumb_size', 'custom_modified_thumb_sizes', 10, 1 );
add_filter( 'avf_modify_selectable_image_sizes', 'custom_modify_selectable_image_sizes', 10, 2 );
add_filter( 'avf_modify_readable_image_sizes', 'custom_modify_readable_image_sizes', 10, 2 );

If i then select the different sizes in the backend it outputs the same image for each section.

See this screenshot:
Also the size is not shown correct:
The size in the code is 1900×500 but the dropdown shows 1500×391.

Do I have to change something in the functions or why is this not working yet?

Best regards,
Sebastian

Hi Ismael,

no, the original size is 1920x1275px.

I’ve created you a temporary login.

Best regards,
Sebastian

Hi Ismael,

i used a different image every time (fresh upload). Is it only working when regenerate thumbnail is used? I thought it would work for any fresh uploaded image and only for already uploaded images you have to use the regenerate?

I’ve changed the invalid values and uploaded a new image. The Label in the select dropdown still shows the wrong reoslution for the images.
The image ist still the same even if i select a different size for each one of the three images in this pages.

So what am I doing wrong, or is it just not working the way i suppose it to be?

Best regards,
Sebastian

Hey,
here is the updated code:

function custom_modified_thumb_sizes( array $sizes )
{
  /**
   * Example: Change sizes for 'masonry'
   * 
   */
            //  set to true to crop images (= default value if not set)
  //$sizes['masonry'] = array( 'width' => 1024, 'height' => 1024, 'crop' => false );
  
  /**
   * Example: Add new size for 'my_custom_size'
   */
  $sizes['divide_img_top_center'] = array( 'width' => 1920, 'height' => 500, array('center','top') );
  $sizes['divide_img_center_center'] = array( 'width' => 1920, 'height' => 501, array('center','center') );
  $sizes['divide_img_bottom_center'] = array( 'width' => 1920, 'height' => 499, array('center','bottom') );
  
  return $sizes;
}

/**
 * Add or remove selectable image sizes
 * 
 * @since 4.7.5.1
 * @param array $selectableImgSize
 * @param array $imgSizes
 * @return array
 */
function custom_modify_selectable_image_sizes( array $selectableImgSize, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  
  $selectableImgSize['divide_img_top_center'] = 'Trenner Bild (Top)';
  $selectableImgSize['divide_img_center_center'] = 'Trenner Bild (Center)';
  $selectableImgSize['divide_img_bottom_center'] = 'Trenner Bild (Bottom)';
  
  /**
   * Example: Remove an image size 
   */
  //unset( $selectableImgSize['extra_large'] );
  
  return $selectableImgSize;
}

/**
 * Add additional human readable image sizes (prepared in case we allow to add custom image sizes by theme)
 * 
 * @since 4.7.5.1
 * @param array $readableImgSizes
 * @param array $imgSizes
 * @return array
 */
function custom_modify_readable_image_sizes( array $readableImgSizes, array $imgSizes ) 
{
  /**
   * Example: Add my_custom_size registered before
   */
  
  $readableImgSizes['divide_img_top_center'] = 'Trenner Bild (Top)';
  $readableImgSizes['divide_img_center_center'] = 'Trenner Bild (Center)';
  $readableImgSizes['divide_img_bottom_center'] = 'Trenner Bild (Bottom)';
  
  return $readableImgSizes;
}

add_filter( 'avf_modify_thumb_size', 'custom_modified_thumb_sizes', 10, 1 );
add_filter( 'avf_modify_selectable_image_sizes', 'custom_modify_selectable_image_sizes', 10, 2 );
add_filter( 'avf_modify_readable_image_sizes', 'custom_modify_readable_image_sizes', 10, 2 );

The sizes show up correct in the theme options but if i then select them in the layout builder the crop position isn’t correct. Is there a problem with the code above?

Thanks,
Sebastian

Hi,
yes, I always do that.

But I’ve uploaded new images so it should not be necessary to regenerate the thumbnails, as discussed before.

I’ve reactivated the access link. See private content.
Unfortunately I can’t grant u ftp access.

Thanks in advance.

Regards,
Sebastian

Hi Ismael,

I’ve activated the editor. Feel free to edit the functions.

Thanks,
Sebastian

Hi Ismael,

thanks for you effort. Looks good now.

The last task ist just cosmetic but it would be nice, if this can also be fixed.

The Labels of the image size selection are still wring. Can you fix this?

Thanks so far.

Kind Regards,
Sebastian

Hi Ismael,
sorry for the late reply.

I’m not sure what you mean with remove the existing thumbnails. The labels a wrong for every new uploaded image. Unfortunately it’s very confusing for the editors. Is this no common issue?
Theme Options show the correct resolution but in the select dropdown when you upload images to media library there are completely different resolutions.

Best regards,
Sebastian

Hi,

sorry, but i don’t get it. What would it change if i upload a new img? The sizes which can be selected don’t change if i upload a new img.
The size should be 1920 x 700 but this size woh is shown in the dropdown is not even close to this.

View post on imgur.com

Best Regards,
Sebastian

Hi,

yes, we enabled it but we did that when we installed the theme, so it was enabled all the time. I don’t know why it’s not working right now but the sizes in the dropdown select were wrong all the time since we added the new sizes.

Regards,
Sebastian