[Resolved] New repeatable image type – thumbnail size

[Author]

Posts

[paulG-5]

Hi

I've just updated the latest plugins, but I have a few issues with the layout of the repeatable fields for images, mainly the size of the thumbnails. I have my thumbnail size set as 400px x 400px. This is overlapping in the backend.

Is there a way of turning this off, or redefining the size in a line of code in functions.

I really don't want to regenerate the image size and recode for the correct sized image.

Also, with the map update, the google map itself is tiny. Is there a setting to make this bigger?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - Here is the Doc link where you will see all available attribute to display the image custom field on front-end:
=> https://toolset.com/documentation/customizing-sites-using-php/functions/#image

You should try to display the medium size image using shortocde: [types field="your-field-name" size="medium"]

[paulG-5]

Hi Minesh.
This is backend only. What you have suggested does not help.
Please see my screenshots attached in my original ticket

[Minesh]

Upps. I thought its on frontend.

Well - Types 3.3 is released with improvements to file kind (image) fields. See the blog post here:
=> https://toolset.com/2019/05/types-3-3-brings-improved-repeating-images-and-rest-api-integration/

Now, in order to minimize the cause of the issue:

Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes?
=> Do you see any difference? are you able to locate any theme/plugin conflict? If no:

I need problem URL and access details where I can see the issue.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[paulG-5]

Hi Minesh.
As mentioned, I know what the problem is. It's using a thumbnail size.

My default thumbnail size is set as 400x400px rather than the default 150px x150px.

This is a common wordpress setting and not a plugin.

If I were to reset the size to 150px x150px and regenerate all my image (2Gb) it would fix the problem on the backend, but destroy my frontend layout.

[paulG-5]

What I'm asking is, is there a way of turning off the new drag and drop image view, or can I add a function in my functions.php file to look at a different image. Failing that is there a way I can add a style to the editor stylesheet to resize the image?

Any other way rather than having to regenerate all the image and recode the frontend?

[Minesh]

Ok - I understand now. And I have tested on my install and seen the issue.

I think I found the solution for you. Please try to add the following plugin that will allow you to add the CSS that will apply on admin section:
=> https://wordpress.org/plugins/add-admin-css/

Once you installed the above plugin go to: Appearance => Admin CSS => within Admin CSS section try to add the following CSS:

.js-wpt-file-preview.wpt-file-preview img {
height:150px !important;
width:150px !important;
}

This will allow you to reduce the display image size using CSS to 150x150. I hope this solution will help you to resolve your issue and you do not need to regenerate the images.

[paulG-5]

Hi Minesh,
Yes I was just replying.

Instead of adding a plugin, I have add the following to my custom functions.php file

function admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/editor-style.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

This allows me to add a style sheet in my child theme called editor-style.css

The style sheet looks like this:

.wpt-file-preview img {
	width:150px;
	height: 150px
}
.wpt-repetitive.wpt-image .wpt-file-preview {
    overflow: hidden;
}

This fixes the issue. Hopefully the looked at in the next update. I'm sure I'm not the only one who has custom sized thumbnails.

[Minesh]

Sure - I'll report your concern in front of our Devs and let's see what they say,

[paulG-5]

My issue is resolved now. Thank you!

[Minesh]

I would like to inform you that Types version 3.3.1 is released which contains the fix for the image size issue.