We have an image field as part of a custom field group. This image field displays in the admin area of our site with the following CSS
.wpt-field-item .wpt-file-preview img { max-width: 100%; max-height: 100%; height: auto; width: auto; }
This CSS is within wpt-toolset-backend.css
We want to instead have a max-width of 400px for display here as the image is currently displaying at an enormous size.
While the purpose of that support ticket was to determine how to override the CSS in wpt-toolset-backend.css, I would like to argue that this CSS is problematic and we shouldn't have to override it, it should be fixed in the Toolset plugin.
In the backend when using Toolset custom fields, a File field displays a thumbnail of the file, but an Image field displays the full-sized image. If the image is large, it takes up so much space that it negatively affects the UX. See attached screenshots, which show a Single line text field ("Download Title"), a File field ("Download File"), and an Image field ("Download Preview Image"). The preview of the image field is so large the user must scroll way down to reach the field where they can change the image.
I cannot imagine why an image preview in the backend wouldn't have some kind of size restrictions on it. Would you please add a size restriction on backend image previews?
Hello. Thank you for contacting the Toolset support.
This is strange.
I just checked by adding file and image field and I do not able to see the issue. Please check the following screenshot:
- hidden link
In order to minimize the cause of the issue and to ensure there is no conflict between the theme/plugin you are using:
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?
Also, can you please share the image which is displaying huge in the backend and let me try with exact same image.
OR
Here is the sandbox site and you can auto-login to it using the following link:
- hidden link
Can you please try to reproduce the issue with above sandbox site and send me exact steps I will have to follow to see the issue.
I did some more testing and was able to narrow down the issue.
This problem occurs when inserting the URL of any large image that was not uploaded to the site via WordPress. Toolset is using the WP-generated thumbnail file as a preview image, but if there isn't one, it uses the full-sized image. In other words, if you're using any image not added to the site via the Media Library, it doesn't have a WP-generated thumbnail, and therefore Toolset uses the full-sized image as the preview image.
I still believe this is a valid issue, as I can think of multiple examples of images one might use that aren't from the Media Library:
• An image file uploaded via FTP
• A theme or plugin file
• An external image from another site
• The auto-generated image of the first page of a PDF uploaded via the Media Library (this is what I am currently doing)
Would you consider adding a min-height and/or min-width to the preview image to solve the UX issue? Thank you!
With the sandbox site I shared:
Here is the sandbox site and you can auto-login to it using the following link:
- hidden link
Can you please share exact steps I will have to follow to see the issue? Can you try to reproduce the issue with above sandbox site and send me step by step information I will have to follow to see the issue?
1. Create a custom post type; add a custom image field.
2. Create a new post of that custom post type.
3. In the image field, paste in a URL of an image that is fairly large, which was not uploaded to this site's media library (see my bulleted list of example scenarios in my previous reply). Example of an external image from another site: hidden link
4. Update to reload the page. You will see the large preview image.
I have done this in your sandbox site here: hidden link
I used the example image above for the Gym Photo, and also for the Hour image in the first Opening hours group. Both show up huge.
I got the confirmation that when you use external URLs to upload image it will not be possible to generate the different size image which is eventually possible when you use media library.
The only possible workaround for you is you will have to add custom CSS to adjust the image preview display in backend.
Returning to my original request:
I would like to argue that this CSS is problematic and we shouldn't have to override it, it should be fixed in the Toolset plugin.
I cannot imagine why an image preview in the backend wouldn't have some kind of size restrictions on it. Would you please add a size restriction on backend image previews?
Specifically, you could set max-height: 600px (for example) on the preview image so it does not expand beyond the height of one's browser window. This would solve the UX problem that is currently present, and I don't anticipate that it would cause issues for any users, so it could be made at the plugin level instead of having me override the CSS (which, as noted in the referenced ticket, is not simply a matter of adding it to the theme's styles).
I understand what you are saying and what I can do is I will try to raise your voice in internal ticket I've reported as a supporter there is nothing much I can do. As you can understand I can not decide what feature should be added. I hope you understand this and you are welcome to close this ticket and for now try to use workaround by adding custom CSS in admin.
I see this as a bug and not a feature request. There is a reason it uses in the thumbnail (when there is one) instead of the full sized image -- because it is unwieldy to show the full-size image. I have discovered instances (my bulleted list above) where this doesn't work as intended, and I suggested a way to fix it. The fix will not have any negative impacts; it will fix something that is currently not working as intended. Please report this as a bug instead of a feature request so it can be fixed.
