Pop up images in Plone 5?

Plone Support
41

If you want a smaller image with a popup to a larger one, just add the image inside your a tag and leave off the button styles.

<p><a class="pat-plone-modal" 
href="http://url.to.your.small.image" data-pat-plone-modal="width: 100%"><img src="http://url.to.your.LARGE.image"></a></p>
42

Hmmm... I copied/pasted your text into the plone page (in the 'source code' view), replaced with url of a small image on my site (the .png) and the full size image (the .jpg). But, it shows the full size image on the page, not the small one. Also, upon clicking on that full size image on the page it gives the image as a popup (from the medialog.magneticpopup) and and this error message in the middle: "There was an error loading modal". Perhaps there is an interaction with the medialog.magneticpopup. Thanks for continuing to try, I find these patterns cool.

43

If you add the medialog.magneticpopup you should not add manual image popup.
If you want manual popup don't install the add on ( or modify the javascript to check for a class)

44

@dgroos little correction, for what ever reason it seems you need an extra option data-pat-plone-modal="image: true"

Following example works for me. You may want to add an extra style (within your css/less files) .plone-modal-content img { max-width:100%;} to make the image fit within the overlay.

<a class="pat-plone-modal" data-pat-plone-modal="image: true" 
    href="http://localhost:11160/test5/ahklun_and_wood_river_mountains.jpg" 
    data-linktype="internal" data-val="0618ca20688f41629fe03303bedee0a9">
  <img src="http://localhost:11160/test5/ahklun_and_wood_river_mountains.jpg/@@images/9cc6a06e-d492-44d0-9c89-8b963261ec93.jpeg" 
  data-linktype="image" title="Ahklun_and_Wood_River_Mountains.jpg" 
  data-val="0618ca20688f41629fe03303bedee0a9" 
  data-scale="mini" alt="Ahklun_and_Wood_River_Mountains.jpg" class="image-inline">
</a>
45

what is the data-val (can it be used for anything useful (like making a new pattern that could be appended by a class, linking to the full image ) ?

46

Don't know, TinyMCE adds those things

47

Seems like it might work though unable to fully test as per @espenmn's comment above as I have medialog.magneticpopup in place (which I will be using!) Thanks @agitator! (PS @espenmn let me know if the doc work would be helpful)

48

As you see, the add-on has no 'description, how etc': GitHub - espenmn/medialog.magneticpopup: pop up images for plone #content

If possible, fork this and write the doc.

49

I use collective.prettyphoto for this in Plone 5 which works fine.

It adds image popups and nice galleries.

50

Do you have some pages where you use it ?

51

yes i have.

52

Is there any easy way to get image captions and image popups working yet (using Plone 5.1.2.1 (5112))?
Preferably that a content writer, not developer, can tick the missing caption box then adding an image and default/configurable image behavior will provide popup/zoom.

Before posting, reluctantly, I have spent hours reading forums, looking at addons (prettyphoto, etc. with their insufficient doco) so now at a loss and behind schedule with my project, so as not to waste other's time!
Probably @jplono if you have an example put a link to it, don't just say "yes i have"! Thanks - Plone5 is great - just difficult to use in places and really hard to get others (devs) on board.

53

With medialog.popup will add that behavior for ALL images (please read the whole thread).

That said: The caption added in TinyMce for the images does not show, not sure if this is fixed yet: Image captions in TinyMCE - #20 by espenmn

54

Can you provide an URL

55

Thank you. I actually read the whole thread and many others!

  1. Ideally was looking for a solution without using any addons (minimising bad experiences by using as vanilla a Plone as possible).
  2. I dismissed medialog.popup as it has no documentation (or links to nonexistant documentation) which inspires no confidence in what might be a great solution.
    Thanks again.
56

If you read the thread, you see that I made this add-on to help someone that did not get it to work by following the advices. So, I have not used this add on myself ).

If you read it again, you will see that it is just adding some javascript which you can copy to your theme if you prefer that (and you could add a class that you choose in TinyMCE if you need the users to be able to choose which images to 'pop-up.

The magnetic popup is probably at: Magnific Popup: Responsive jQuery Lightbox Plugin