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 is currently Online

Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
  Tuesday, 22 June 2021
  7 Replies
  1.8K Visits
After adding a single image to 1 line, centered, then using media box to popup a larger image, save, review on the front end and...the image on the page linked to the popup disappears. There is nothing above or below where the image should appear other than the text, like space or an empty image marker.
By that I mean, there is no space reserved for where the image should appear - just nothing.

I tested several methods.
I highlighted the image and selected "Align Center" from the editor buttons. It centers the smaller image on the page as desired, but on the front end it disappears when I refresh the page.
I removed the link from the small image to the popup, saved, refreshed the front end and the image returned.
I moved the small image on the page back to align: left, and after linking the popup the image appeared on the front end along with the popup.
I then opened the media box settings for just that small image, selected "Not Set" and changed that to "Centre" (yes, center is misspelled in the editor). That centered the small image, but the image disappeared on the front end.
I removed everything relating to the left / right positioning of the small image and added a class tag to the <p> tag in which the image was placed. I then added CSS in my main template to align that 1 image (text-align: center).
Low and behold, "that" worked!

So no matter how I attempted to center the image on the page (linked to the popup), it would disappear using any of the "typical" methods of alignment. But adding a class tag and using CSS on the <p> tag works.

You know JCE inside and out and probably already know what's happening.
It seems to be a bug - for me. For those not as adept at CSS, it may be cause for more serious pleads.

Thanks.
more than a month ago
·
#108128
Accepted Answer
Ok, further investigation reveals the cause of the problem is the popup icon, which in order to be positioned correctly, requires the link to be displayed as "inline-block", which then necessitates transferring the margin from the image to the link, as absolute pixel values.

You can disable the popup icon to prevent this by setting the Zoom / Popup Icons parameter to No in the JCE MediaBox parameters, which you can access from the JCE Control Panel.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108113
Please post a link to an example.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108119
I can't do that in the "live" site where I've been working, so let me do that on my development site.

Here is where I'm working on the test for you - https://schoolfortheblonde.com/test-page
I'll include my steps in the article(s) of the test site.

I have successfully re-created the issue in the development site - https://schoolfortheblonde.com/live-site-copy

I installed the same template as is used in the "live" site. My notes about what I did, etc., are contained in that "live-site-copy".

I was sure that I'd prove myself crazy - or paranoid... But my step-by-step process proves that I'm not either. I was able to recreate the issue.

I'm going to continue testing to see if I can do the same thing in another template but in the same test site.
I've successfully made 1 of 3 images disappear using the same method on this page - https://schoolfortheblonde.com/test-page
Clearly, removing the image dimensions makes the image disappear on the front end, although it still appears as expected in the article within the editor on the back end..

Let me know what you think.
more than a month ago
·
#108122
Images are centered when you press the Align Center button by appling an inline style to the image, ie:


style="display: block; margin-left: auto; margin-right: auto;"


You can center the image without using margins if it is the only item in a paragraph, by applying the Align Center to the paragraph instead, eg: click somewhere in the paragraph containing the image, and then click the Align Center button. This will assign a style of text-align:center to the paragrah, center aligning everything in the paragraph.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108128
Accepted Answer
Ok, further investigation reveals the cause of the problem is the popup icon, which in order to be positioned correctly, requires the link to be displayed as "inline-block", which then necessitates transferring the margin from the image to the link, as absolute pixel values.

You can disable the popup icon to prevent this by setting the Zoom / Popup Icons parameter to No in the JCE MediaBox parameters, which you can access from the JCE Control Panel.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108134

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#108137
Ah! Thank you! I knew you'd find it faster than I.

Thinking of "your" side of things... Would it be possible to make the popup icon a transparent png that resides over the image and then use CSS to position the image?
That's just my initial theory, but it would require some testing to figure out the "how" to implement without interfering with anything else.

You do a fantastic job with JCE! I know you'll find a great solution.
In the meantime, I'll disable the icon. I think people are intelligent enough to know they can click on an image that displays the "hand" icon when their mouse runs over the image. But I have the text description for each image also linked. So disabling the icon shouldn't be an issue.

Thank you for digging into this.
Thomas
TAGLLC selected the reply #108128 as the answer for this post — 5 months ago
more than a month ago
·
#108138
Thinking of "your" side of things... Would it be possible to make the popup icon a transparent png that resides over the image and then use CSS to position the image?
That's just my initial theory, but it would require some testing to figure out the "how" to implement without interfering with anything else.


I've tried all sorts of things over the years and the current solution, using an svg icon, is the best so far.

In the meantime, I'll disable the icon. I think people are intelligent enough to know they can click on an image that displays the "hand" icon when their mouse runs over the image. But I have the text description for each image also linked. So disabling the icon shouldn't be an issue.


The RC version I linked to above should sort the problem out.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!