Pop up images in Plone 5?

Sure, .... feel free to fork the github repro and add it there...

Soon... after you become a Plone wizard, you can pass the favor on to someone new to Plone :slight_smile:

1 Like

Sorry the language is passing me by... I've explored a few possibilities but to no avail. Would you indicate where I need to put the site address of the image that I want to serve as the icon for the button for the modal?

<p><a class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal" 
href="#modal1" data-pat-plone-modal="width: 100%">Modal extra cool basic</a></p>
<div id="modal1" style="display: none;">

If you want to display an image you've uploaded within Plone in the overlay then just add the url of the image as link/href.

<p><a class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal" 
href="http://url.to.your.image" data-pat-plone-modal="width: 100%">Modal extra cool basic</a></p>

You don't need an extra div for your modal content, pat-plone-modal will create that for you.

I've tried as many iterations as I can think based on the example you gave. No matter what I tried, the button was always the blue button, never was it an image.

I've learned about mockup patterns and am pleased about that! Also the medialog.magneticpopup is working great and am super-pleased with that so I'm going to stop exploring popups at this time. Thanks for your help @agitator!

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>

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.

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)

@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>

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 ) ?

Don't know, TinyMCE adds those things

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)

As you see, the add-on has no 'description, how etc': https://github.com/espenmn/medialog.magneticpopup

If possible, fork this and write the doc.

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

It adds image popups and nice galleries.

Do you have some pages where you use it ?

yes i have.

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.

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

Can you provide an URL

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.

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: http://dimsemenov.com/plugins/magnific-popup/

Plone Foundation Code of Conduct