Adding Images and lightbox in wysiwyg

Hi Jono,

This is a lot easier to do if you use an Upload field, but possible with a Wysiwyg.

If you right-click on an image in a wysiwyg field and select "Insert/edit image", you can change its size and "Image description". The Image description adds an alt tag to the image, and you can use a little PHP to fix up the HTML:

<?php
$record['content'] = preg_replace('|<img alt=|', '<img rel="lightbox-Page Title" title=', $record['content']);
echo $record['content'];
?>

Adding a link would be a little more tricky. I'm not exactly sure what code is required for the version of Lightbox you're using, but it would probably work something like this:

<?php
$record['content'] = preg_replace('|<img alt="([^"]*)" src="([^"]*)"([^>]*>)|', '<a href="\\2"><img rel="lightbox-Page Title" title="\\1" src="\\2"\\3</a>', $record['content']);
echo $record['content'];
?>

I hope this helps!

Here is an alternative:
http://www.interactivetools.com/forum/gforum.cgi?post=65100#65100

If you install the advlink plugin for tinymce you can add rel's to images, but it must be added manually by the user.


It should be possible to add rel's to all links inside the div containing your wysiwyg output using jQuery, but I'm sorry I don't have the exact code for that. Google could help..

-aev-

Is http://www.interactivetools.com/forum/gforum.cgi?post=65100#65100 still relevant. I currently have version 3.2.6 of TinyMCE.

In the linked post is says:

Copy the advlink directory to the plugins directory of TinyMCE (/jscripts/tiny_mce/plugins).

But there is no directory of this name. I assumed it is /cmsAdmin/3rdParty/tiny_mce/plugins/ so copied the 3.2.6 version of advlink to that folder.

Now I am stuck and can't figure out what to do.

Adding lightbox info into the rel link is familiar to me and I like this way of doing it.

I know you don't support TinyMCE but I'm sure other people would find the info useful for getting lightbox working from a wysiwyg editor.

Thanks Jono

Yep once again you come to the rescue!

Now when you add a link to the larger image, in the Advanced tab it even offers Lightbox as an option in the Relationship page to target menu.

Really easy and it works like a dream.

Thanks Jono