Pop up images in Plone 5?

Plone Support
21

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
22

To get the lead image to pop up is quite simple, but I could not find any way of using patterns/mockup to add the effect to all images placed in TinyMCE.

23

You just have to create a link on that image that points to the image itself and add the pat-plone-modal class.

Some kind of JS-Helper-Plugin for TinyMCE would be nice though.

24

.... tell that to my editors ::

25

Ok, I get it a bit more, @agitator! I can just go to the page to which you linked with samples of Patterns and paste some of the provided code into the source code for a plone page.

I added this to the source code on a sample page on my site:

<a href="#modal1" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
                     data-pat-plone-modal="width: 400">Modal basic</a>
   <div id="modal1" style="display: none">
     <h1>Basic modal!</h1>
     <p>Indeed. Whoa whoa whoa whoa. Wait.</p>
   </div>

And changed to:

<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;">
<h1>Basic modal!</h1>
<p>Indeed. Whoa whoa whoa whoa. Wait.</p>
<p><img class="image-inline" src="../../../resolveuid/[my-image-id]/@@images/image/large" alt="" data-linktype="image" data-scale="preview" data-val="[my-image-id]" /></p>

and it will show my image in the popup that displays upon pressing the blue button that says, "Modal extra cool basic". By adjusting the data scale I can get different sizes of the image to display. Three questions at this point:

  1. How do I get the button to be a small sized (for example the "tile" size) instead of being the blue-backgrounded button? I didn't get what you said: "You just have to create a link on that image that points to the image itself and add the pat-plone-modal class."

  2. How would I get the popup background to scale itself based on the size of the image displayed (tried setting to 100% but that's not it)?

  3. Is there a relatively easy way to make this responsive so that it displays nicely on a mobile device for example?

Thanks!!

26

Hi @espenmn, thanks for your reply. I'm still struggling for the bigger context. In your example I see the script (lines 19-34) is inserted in a file "chapter.pt". You said (as I understand) to put that snippet in the index.html file.

  1. I find I can access that file through the browser: go to site setup, theme, copy the barceloneta theme, make active, go to index.html and could paste that snippet between the </div> and <footer> lines, for example, probably not what you are talking about.

  2. I found the file on my file system too: Plone/buildout-cache/eggs/plonetheme.barceloneta-1.6.23-py2.7.egg/plonetheme/barceloneta/theme/index.html and could paste in the snippet there, too. perhaps closer to what you are talking about?

Yet I can't imagine how that would give me the option to make a thumbnail to expand into a larger image as did your screen shots expand on your page. Is there something I would add to the html code in a plone page then when wanting to turn an image into that popup/zoom? Would I have to add something from jquery.magnific-popup somewhere?

27

agitator is talking about linking each image to itself to get it to pop up.
I am talking about having a javascript to make all images have a pop-up link by default (all images in the #content area will be clickable).

For that to happen, you will have to include the same javascript as I did in my chapter.pt file.
Where you add this is not too important, but the easiest if you dont know Plone too well is to do it in the theme, where there is an index.html file

I think that is 'good enough', in the index.html you should add everything inside

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

and change ++theme++k16theme to ++theme++nameofyourtheme

Then add jquery.magnific-popup.js to your theme (add a file in your theme (mine is here: http://www.marfag.no/++theme++k16theme/jquery.magnific-popup.js

no

you might have to add some css to make it look better (but it will work without it)

here is my css:

http://www.marfag.no/++theme++ebooktheme/HTML-CSS/magnific-popup.css

1 Like
28

Thanks for detailed instructions @espenmn!

  1. I pasted the code into the index.html accessed through the browser as described before.
  2. I changed to ++theme++mythemename
  3. Here is where I got off track:
  4. I made a new file right under the index.html file and named it the same as you did as can be seen in the screen shot)
  5. I then went to your page to which you linked, copied the entire contents and pasted it in the newly created empty file. Upon saving and clicking on the triangle 'attention' icon I got the error message as shown in the screen shot.

I also went back to https://github.com/dimsemenov/Magnific-Popup but didn't know where to start copying from there. Any ideas?

sss-493.png734×449 54.8 KB

29

I made this (untested..... if it works someone owes me a favor :slight_smile: )

Please take backup, I have not had the time to test it (it is 'night' here):

  1. download it from github
  2. add the folder to your src folder
  3. add it to eggs section of buildout
  4. add it to src section of buildout ( develop = src/medialog.magneticpopup )
  5. run bin/buildout, start Plone
  6. install it
1 Like
30

will back up and give it a try, thanks!

31

@3dogMcNeill @JotaMG

you can get caption (the title) if you edit the CSS (or replace it with with the original CSS from magnetic popup)

Update: caption is fixed, enabled by default.

I am not sure about the parsing of the url, if someone that know javascript can take a look at it, it would be nice)

32

This is what I did:

  1. downloaded zip file onto the server into Plone/zeocluster/src/ and unzipped it.
  2. changed ownership: sudo chown plone_buildout:plone_group -R medialog.magneticpopup-master/
  3. added medialog.magneticpopup to eggs section of buildout.
  4. couldn't find a section, "src = " but did find the " develop = " section and put:
  5. develop =
    src/medialog.magneticpopup
  6. ran sudo -u plone_buildout bin/buildout and got a few lines:
    Couldn't develop '/usr/local/Plone/zeocluster/src/medialog.magneticpopup' (not found)
    Couldn't find index page for 'medialog.magneticpopup' (maybe misspelled?)
    Getting distribution for 'medialog.magneticpopup'.
    Couldn't find index page for 'medialog.magneticpopup' (maybe misspelled?)
    While:
    Installing client1.
    Getting distribution for 'medialog.magneticpopup'.
    Error: Couldn't find a distribution for 'medialog.magneticpopup'.

Any ideas? Now it's night my time... :wink:
Thanks!

33

@dgroos putting the class pat-plone-modal on the link binds the in plone included js for modals on to that link, the modal now uses the href of the link as target for the content to load.

This could also be done with a style format that you can add to the TinyMCE control panel, you can also add corresponding styles to make the button for example smaller - then you could select it from the formats menu as a preset.

Unfortunately you still have to set the data-pat-plone-modal attributes by hand. The width attribute also support percentages as value and will act responsive to a certain extend.

@espenmn you could also try a diazo rule to put those attributes on desired tags (which also could be a format from the style menu) http://docs.diazo.org/en/latest/recipes/adding-an-attribute/index.html.

1 Like
34

So far so good

Seems like it has been put in the wrong folder , make sure it is in /usr/local/Plone/zeocluster/src/

35

Update:

I have added it to pypi , so you can skip the develop part
(just add it to eggs and run buildout)

... be aware that it is still alpha.

1 Like
36

Ah, I didn't catch this: /usr/local/Plone/zeocluster/src/medialog.magneticpopup-master$

I'll install from pypi...
And just did!
Required an instance restart for it to show up in Addons to install and then installed w/out hiccup!

I then went back to my site and every image that is embedded in a page is clickable and opens in a nice pop up!!! This is the behavior I like!

On a large enough screen the popup expands to the size of the original image, however, it is also responsive such that it fits nicely on whatever size of browser window--looks great on my phone. I can write up some documentation for this, would that help?

Thanks @espenmn!

37

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
38

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;">
39

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.

40

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!