Skip Navigation

[Resolved] Image preview in CRED edit form, full size

This thread is resolved. Here is a description of the problem and solution.

Problem:
CRED edit post forms, with image upload fields, shows the existing image in FULL-SIZE not a "mini-version" of the image.

Solution:
150x150 px thumbnail is generated natively by WP core as the_post_thumbnail and this should be generated regardless of Toolset or CRED or theme.

To forcefully resize images, you can follow any one of the ways below:

1. Add this css in CRED form >> CSS editor section -- this is the easiest option:

 img[id^='loaded_']{width:150px;} 

2. OR you may use WordPress custom size thumbnail method as I mentioned before:
https://toolset.com/forums/topic/image-preview-in-cred-edit-form-full-size/#post-561260

This support ticket is created 7 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 16 replies, has 3 voices.

Last updated by tinaH 7 years, 2 months ago.

Assisted by: Noman.

Author
Posts
#559997
image in full-size.png
berore update.png

After upgrading CRED to latest version, CRED edit post forms, with image upload fields, shows the existing image in FULL-SIZE not a "mini-version" of the image.
Breaks layout and looks very strange.
Attaching images for before update and after.

#560036

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Tina,

Thank you for contacting Toolset support. I am not able to reproduce this issue at my end with latest Toolset CRED.

1. Could you please try to check it by deactivating all third-party plugins (except Toolset) and switching back to the Default Theme (e.g. Twenty Sixteen theme) to see for any possible conflicts with any of the plugins or themes?

2. Please delete all sort of caches in your site plugin cache (if any), CDN / server cache (if any), browser cache too. Would be useful by creating a new CRED form or test with a different image.

3. Further, you can also check it by deactivating Layouts plugin or by adding CRED form directly into a View / Content Template.

Thank you

#560247

Regarding your questions:
1. Disabling all other plugins but Toolset - image still in full-size
2. no cache plugin is active
3. Activating Toolset starter theme. With toolset active. All other plugins off. Image is not expanding entire page but still larger than before update. (100% width instead of 150px)

I have found what is causing the problem.
I do not know from where it originates but the developers can probably tell...

Cred 1.8.8
The preview image is loaded with an element.style {max-width: 150px;}

Cred 1.9.1
No element.style, no other size limitations,

Toolset Starter Theme 1.4.2
The theme modifies the image size with a custom style in style.css;
img, .wp-caption {max-width: 100%; height: auto;}.
Disabling the 100% width makes the image expand to full-size

Another finding:
I reviewed other forms (cred 1.9.1 active) with image upload fields. They load the generated 150x150px version of the image and has therefore no need of any css, correcting the image size.
The post in question, does not have a 150x150 version of the full-size image.
Why, I do not know ... but it's not relevant for this problem

Conclusion
Cred 1.9.1 needs to either reimplement the element.style from v1.8.8 or add a function that checks if there is an 150x150px version to use as preview image. If not, some kind of action.

#560294

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

1. I have debug this issue and I am not able to reproduce this issue with Toolset Starter theme 1.4.2 and CRED 1.9.1.

150x150 px thumbnail is generated natively by WP core as the_post_thumbnail and this should be generated regardless of Toolset or CRED or theme, so you need to debug why its not generating in your site:
https://developer.wordpress.org/reference/functions/the_post_thumbnail/#user-contributed-notes

2. Please try to check it by deactivating all third-party plugins and switching back to the Default Theme (e.g. Twenty Seventeen theme) to see for any possible conflicts with any of the plugins or themes.

Thanks

#561111

There is nothing to debug.

You will not find the error if you are using an image that has a 150px version of the image.

But if you add the style from v 1.8.8 this problem will never happen.

#561260

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I understand your concern, but what I am trying to say is 150x150 thumbnails are created natively by WP core and these are always generated. And CRED is inheriting that same thumbnail function in Uploaded image preview. So you need to see why your site is not generating 150px thumbs in general. You can test this by uploading an image directly in backend of WP editor or featured image section.

You can add this in your theme’s functions.php file to exclusively generate 150x150 thumbs in your site.

 add_image_size( 'custom-size', 150, 150 ); 

add_image_size() function: https://developer.wordpress.org/reference/functions/add_image_size/#crop-mode

Right now we don’t have any way to enforce or crop thumb directly on the page (except loading 150px thumb). I have submitted a feature request to have more control on the preview image in the recent past as well.

Thanks

#563699

I added my own css to my theme, but I wanted you to know that this change causes problems if, for any reason, there is no 150x150 image.
A very simple solution is to take back the element.style that CRED 1.8.8 had

#564206

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Okay, I will escalate it to our 2nd Tier support for further review shortly, so that it can have a second look from our team.

Thanks

#564236

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

I have now escalated this issue to our 2nd tier support for further review and we will get back to you with an update.

Thank you

#564851

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Tina,

Our 2nd tier has checked this issue and below is the response:

“ We rely on the Thumbnail Size stored. I don’t think this is good, but it’s also no BUG.

I just filed a request that enables you to control the size of those Images.
Maybe we should also add an option to force that, and if no thumbnail the user must pass another size.

And it was doing same thing in last CRED versions as well. It was not resizing anything, I tested this in CRED 1.8.x and up.

We always either render the whole thing or the size stored as thumbnail.

Please can you show us how that worked? In my test with the old CRED it always calls the whole image, just as in the new version, when no Thumbnail exists. “

If we miss something, maybe you can show us that it was behaving different? (Screen-recorded video or screenshots along with html/css code where you can see those classes applied.

Also, it would be great if you can test in a fresh WP install or in any other site. Because the issue can be only in this particular site somehow. Thanks

#565642

There must be some confusion here.
Quote
"In my test with the old CRED it always calls the whole image, just as in the new version, when no Thumbnail exists"
Yes that is what I am saying too.

"If we miss something, maybe you can show us that it was behaving different?"
Please read my second post on this topic more thorough.
https://toolset.com/forums/topic/image-preview-in-cred-edit-form-full-size/#post-560247
The difference is the element.style

#566372

Dear Tina,

Noman isn't available currently, he will be back in tomorrow, you will get update soon.

#566748

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Tina,

Our 2nd tier also said that we can’t see element.style class in old CRED version, as I get to know there was no such class applied by old CRED too. So if you can show it to us with screenshots and inspect on the code, css file line number etc. Then I can forward that info for further review of this issue again.

Thanks

#566782

They didn't look properly.
CRED 1.8.8
class.credfile.php
row 213

class="js-wpt-credfile-preview-item wpt-credfile-preview-item" style="max-width:150px"
#566855

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks alot for providing more info, I have forwarded this again to our 2nd tier and we will update you soon.

Thanks