Pop up images in Plone 5?

You mean, when added inside the Tiny Mce editor, right?
A very good question, I also would like to know...
(that, and having captions on images)

Yes. And captions too.

This was not the default behaviour, but some add-ons added this functionality.
Maybe you mean the news item view?

I found some code in a template for Plone 5 (that is installed, but not used). This 'kind of works (maybe some css is enough)):

It will give you this (click on image):
http://www.medialog.no/morefeatures/design

That's the behavior I want, yes. I thought it was built into Plone 4 if a caption was included.

I just ran into this myself :slight_smile: I know it's a bit of extra work, but you'd add / upload the image first (e.g. into the /images folder) then you add the image into the page via TinyMCE and then you can also make the image a link to itself (inside the /images folder) and you select "Open in new window/tab".

You saw this thread on captions? Image captions in TinyMCE

Hi Christina,
If you would like to open a pop ti upload the imagae with caption than can use the zopyx.tinymceplugins.imgmap 0.3.2.1.

This module allows you to edit image maps inside the TinyMCE editor in Plone 4.0 or higher.

Thanks,
Jitesh Agrawal

I'll try that although I'll have to change it to not open in a new window. Thanks.

There haven't been any updates since 2012 and Plone 5 runs newest version of Tiny MCE so I'll test it. Thanks.

This doesn't allow saving the image in a smaller size and clicking on it for a larger version. Also, I don't think this is too complicated for content contributors—I forsee it not happening.

Wouldn't you save the image full size and then in TinyMCE pull it in and specify the size (200x200, 400x400, etc.)? You'd make it link to the full size image.

if you do it that way, yes; sorry, I meant just saving the image as an image.

In Plone 4, I added a simple script, very much like what @espenmn posted above, but it was tied to the lightbox for captioned images. Captioned images template is in Plone 5, but like it's said in the thread @tkimnguyen posted, doesn't seem to be implemented.

FWIW, here it is:

plone.outputfilters.browser/captioned_image.pt

<dl tal:attributes="style string:width:${options/width}px;;;
	                class options/class;">
<dt><a tal:omit-tag="options/isfullsize" rel="lightbox"
   tal:attributes="href options/url_path;"
   tal:content="structure options/tag">[image goes here]</a></dt>
 <dd class="image-caption"
     tal:attributes="style string:width:${options/width}px;;;"
     tal:content="options/caption|nothing">
 </dd>
</dl>

Anyway, I think this should be a default feature in Plone, even more that in order to have a simple pop-up, it only depends on the main jquery file, and nothing more is needed.

(and, in NewsItem, the current Plone 5 implementation of the leadimage pop-up is broken. sometimes the image does not fit the pop-up)

In my modest opinion it is very unfortunate that Plone has Less, requirejs, etc, etc, but is unable to do a proper image pop-up out of the box?

I'll submit this as an enhancement.

1 Like

The with is a css issue ( Max-with: 100% )
I have adferd the popup in medialog.leadimagesize

Since I was struggling for a long time, I put my code here....

<script>
  require([
    'jquery',
    '++theme++mytheme/jquery.magnific-popup'  // Note: no `.js`
  ], function($) {
       $('#content-core img').magnificPopup({
        type: 'image',
        callbacks: {
            elementParse: function(item) {
                item.src = item.el.attr('src');
            }
        }
        });
       
    });
</script>
2 Likes

I too find that pop up images are very important, they embed rich visual info into web pages, referenced by a thumbnail of the image--best of both worlds, dense readable web pages with detailed visual images on demand. They worked great in my Plone 3 and Plone 4 sites with FancyZoom View. Helpful in my use of plone in high schools.

I've been studying the discussion on this page but unfortunately am unable to follow your conclusion @espenmn (I don't code). I did see "jquery.magnific-popup" being referenced and checked it out and it looks like it has beautiful functionality but didn't see how it could be integrated into a plone 5 site as it seems to be a wordpress plugin. I'm guessing I'd have to add it somehow to my theme? Is there some help section on the plone site that explains this process?

Maybe you should look at http://plone.github.io/mockup/dev/#pattern/modal
You can find an example implentation in https://github.com/plone/plone.app.contenttypes/blob/master/plone/app/contenttypes/behaviors/leadimage.pt#L9

1 Like

The result is like this (click on the image):
http://www.marfag.no/f11/kapittel-3-organisering-av-undervisningen

I put that javascript in my theme (in the index.pt file):

In the template, it is like this (or add that to the theme as well)

1 Like