kiwi
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.
[h4]Further enhancement if you want to display PDF files in the same way.[/h4]
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.