You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
- Support
- Forum
- JCE Editor
- Images distorted when using captions
Support is currently Offline
Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
From 09:00 To 17:00 Europe/London (BST)
Please post your question in the Forum and we will get back to you as soon as we can.
We are having an issue where if you load a photo into and article and adjust the size - and then add a caption using the Add Caption button, the dimension for the resized photo disappears and the photo appears to be distorted.
In other words, if we want to have a caption for a photo, we cannot adjust the size of the photo.
On pages such as this one:
http://scarsdale10583.com/section-table/7016-historic-mid-century-home-is-back-on-the-market-in-fox-meadow
if you scroll down and look at the photo of the house with the caption under it the photo is getting distorted. If you look at the real one you see it is much wider:
http://scarsdale10583.com/images/stories/July2018/columbia.jpg
When editing the article in the back end the photo also looks normal and in the correct proportions.
When viewing the back end editor the caption settings are as shown in the attached photo. The image settings are also as shown in the attached photos.
The rendered image shows the following code:
The code for the image shows this:
<span class=" wf_caption" style="margin-right: 10px; float: left; max-width: 400px; width: 100%; display: block;"><img style="margin: initial; float: none; width: 100%;" src="images/stories/July2018/columbia.jpg" alt="columbia" width="400" /><span style="text-align: center; display: block;">From the Edgar A. Tafel Archive at Columbia University</span></span>
It seems to be doing this by default on almost every image we post. What is causing this distortion and how do we fix it so that the Add Caption button works properly all the time?
In other words, if we want to have a caption for a photo, we cannot adjust the size of the photo.
On pages such as this one:
http://scarsdale10583.com/section-table/7016-historic-mid-century-home-is-back-on-the-market-in-fox-meadow
if you scroll down and look at the photo of the house with the caption under it the photo is getting distorted. If you look at the real one you see it is much wider:
http://scarsdale10583.com/images/stories/July2018/columbia.jpg
When editing the article in the back end the photo also looks normal and in the correct proportions.
When viewing the back end editor the caption settings are as shown in the attached photo. The image settings are also as shown in the attached photos.
The rendered image shows the following code:
The code for the image shows this:
<span class=" wf_caption" style="margin-right: 10px; float: left; max-width: 400px; width: 100%; display: block;"><img style="margin: initial; float: none; width: 100%;" src="images/stories/July2018/columbia.jpg" alt="columbia" width="400" /><span style="text-align: center; display: block;">From the Edgar A. Tafel Archive at Columbia University</span></span>
It seems to be doing this by default on almost every image we post. What is causing this distortion and how do we fix it so that the Add Caption button works properly all the time?
I added that CSS to the stylesheet and it is still happening. Up until the point I add the caption everything looks fine. If I add a caption it skews the whole image. Even if I go back into the image editor after adding the caption and tell it to do auto for the height or even if I give it a set height it still skews. I even tried putting !important after the height:auto in the css file.
Best page to reference this on right now is here:
http://scarsdale10583.com/section-table/29-around-town/7070-shake-shack-to-open-on-central-avenue-plus-more-retail-news
Third image from the bottom has a caption on it. The CSS I put in the file is being overridden by inline css being placed directly into the document by the plugin.
See the attached file to see it. I removed the caption because this is one of the main articles right now. Also, when I removed the caption it left the image dimensions all screwed up. I had to go back in and edit the image again in order to get it back to a normal size...
Best page to reference this on right now is here:
http://scarsdale10583.com/section-table/29-around-town/7070-shake-shack-to-open-on-central-avenue-plus-more-retail-news
Third image from the bottom has a caption on it. The CSS I put in the file is being overridden by inline css being placed directly into the document by the plugin.
See the attached file to see it. I removed the caption because this is one of the main articles right now. Also, when I removed the caption it left the image dimensions all screwed up. I had to go back in and edit the image again in order to get it back to a normal size...
I added that CSS to the stylesheet and it is still happening.
I am not seeing the css rule in the source code for the template's stylesheets.
You appear to be using some kind of compression plugin for javascript and css on your site, which may be using cached files, which is why the wf-caption css rule is not included.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
You're right. It was the JCH Optimize plugin that was preventing the fix from being applied. Thank you!
In case anyone else runs into this problem there is a setting in JCH's advanced options to allow it to include inline styles as a part of the compressed style sheet. Turn that item off and it may help with that part of the problem. I still had to add the other CSS to the stylesheet though as mentioned above.
In case anyone else runs into this problem there is a setting in JCH's advanced options to allow it to include inline styles as a part of the compressed style sheet. Turn that item off and it may help with that part of the problem. I still had to add the other CSS to the stylesheet though as mentioned above.
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!