Hi Yigit,
thanks for the reply.

Bynder is offering remote access to their library from the media library of wordpress classic editor.
When using the media library from withing avia layout builder the menu list at the left side ist not visible and we can’t select a different library.

Can this be changed or is it only working this way for the ALB?

We also facing the same problem with other remote librarys like Vimeo.

Hope you can help us to figure out how we can enable this for ALB.

Thanks so far.

Regards,
Sebastian

Hi Ismael,
we’ve disabled the responsive option and the imges get displayed with the correct cropping position in the page but in the dropdown the sizes are still wrong. Unfortunately the responsive thumbnails of the images don’t get loaded… is there a way where both can work together?

We’ve insert the snippet and regnereated all thumbnails but the size didn’t change…

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

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 Ismael,

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

Thanks,
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 Rikard,
ok, if there is no way around this, we have to use two different slugs.

Thanks anyway
Gerry

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,
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,
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,
that solution doesn’t really help me, because you can still click on the image itself to switch to the next lightbox.
Furthermore the 1/2 is also visible.
Is there some way to remove the gallery function completely or at least to deactived the switch.
How do we group the lightboxes into two different sets?

Kind regards
Gerry

Hi,

it was the pulse element which overlayed nearby hotspots and let the hover work incorrect. We just hided them so they cant effect the hover anymore.
That fixed the problem.

Thanks for the support.

Best Regards,
Sebastian

Hi Ismael,

it actually works again
Thank you.

But we found another problem with the hotspot.
on mobile, all the hotspots are put in a list under the map.
Is there are the reason why the links from the individual hotspots don’t work in the list?

Best regards,
Sebastian

Hi Victoria,

we’ve installed the Plugin Enable jQuery Migrate Helper according to the article but the error persists.

Best regards,
Sebastian

Hello Ismael,

we’ve updated the theme to version 4.7.6.3 and deactivated all file compression setting but the error still seems to appear.
https://bembe.dev10.econsor-programming.de/
Here you can check the site again.
Is there any other solution for this problem.

Thanks in advance.
Sebastian