Make webtrees stories module images open in “colorbox”.

Make webtrees stories module images open in “colorbox”.

Any one who has upgraded to webtrees 1.4.1 and uses the “stories” module, or our simpl_pages module will by now realise there is a new way to include images. The standard html code should be something like:

<img src="mediafirewall.php?mid=M738">

That is perfect if you only want to display a small image. But if you want to show a thumbnail image that you can click on to show the full size version, as you can in normal webtrees pages, you need only add a little more code. (Note: to do this you will need to edit the “source” of your story or page. It cannot be done with the editor.)

First, your <img> tag needs to be part of a link (<a> tag ), and second it needs a couple of specific tags within it to identify it to colorbox. But that’s all.  🙂  Here is the previous example, extended for colorbox:

<a alt="the title of your image" class="gallery cboxElement" href="mediafirewall.php?mid=M738"
type="image/jpeg" title="the title of your image">
     <img src="mediafirewall.php?mid=M738&thumb=1">
</a>

The key additions are

  1. The section class=”gallery cboxElement”. Without that colorbox will ignore it.
  2. The section title=”the title of your image is where you place the title that will be displayed on the colorbox pop-up. It would normally be the same as the necessary “alt” element of the link.
  3. The addition of &thumb=1 after the second media reference. This ensures the image thumbnail is used rather than the full sized image. You can leave that out if you do want to display the full sized image.

You also of course need to add css styles to the thumbnail image, to control it’s position and size, but that’s just part of the normal process of adding an image.

Further enhancement if you want to display PDF files in the same way.

This requires a very slightly different format, changing type=”image/jpeg” to type=”application/pdf”. The code therefore becomes:

<a alt="the title of your image" class="gallery cboxElement" href="mediafirewall.php?mid=M738"
type="application/pdf" title="the title of your image">
     <img src="mediafirewall.php?mid=M738&thumb=1">
</a>

If you find this doesn’t work for PDFs on your site check how they open in the rest of webtrees. If they open in your browser and not the “colorbox” popup window it means you are using a theme that does not have colorbox PDF support included.

kiwi
About The Author

Personal Website



5 Comments

Jamie » 6 Nov 2013 »

Can I also do this with a pdf file?

    kiwi

    kiwi » 6 Nov 2013 »

    Yes, it should work the same as PDFs in the main webtrees pages. BUT I don’t think many (any?) standard webtrees themes are configured to display PDFs in colorbox. Greg felt it was easier to let the browser open or download them. If that is the case for your theme then no, it won’t work properly. Do you have a PDF attached to an individual in webtrees you can test that on? Otherwise I can look on your site for you tomorrow.

kiwi

kiwi » 12 Nov 2013 »

I have now updated this article to include the changes necessary for the code to work with PDFs as well providing your theme includes PDF support for colorbox.

jacoline » 12 Nov 2013 »

With the new header it works perfect. And I can also view one picture and opening another one if I do not want to use the thumbs but having a full size picture instead.

This is really a great module. Creates so many ways to use it! webtrees should actually have it as standard imo.

Great job Nigel!

    kiwi

    kiwi » 13 Nov 2013 »

    Just for general clarification.
    Jacoline is referring to this code as used in the simpl_pages module. This article was actually written for the standard webtrees stories module, but the same code does work in any place that allows you to write your own format-able (html) text, such as HTML blocks, the standard webtrees FAQ pages, etc..

Have your say!

Have your say!

This site uses Akismet to reduce spam. Learn how your comment data is processed.