Adding Images and lightbox in wysiwyg

6 posts by 4 authors in: Forums > CMS Builder
Last Post: October 1, 2009   (RSS)

By (Deleted User) - September 30, 2009

Hello,

When an image is added using the upload function in wysiwyg, is there an automatic way of adding:

rel="lightbox-Page Title" title="my caption"

Can I also automate the link to the larger version?

Basically I would like to use the lightbox programme to link from the image selected using wysiwyg and the automatically add a link to the largest sized image and add tha above lightbox code.

I know you can add a link to the larger image and edit the html like the following post but I don't think my client would get it.
http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/gforum.cgi?post=68930;search_string=lightbox%20wysiwyg;t=search_engine#68930

Thanks Jono

Re: [jonoc73] Adding Images and lightbox in wysiwyg

By Chris - September 30, 2009

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!
All the best,
Chris

Re: [jonoc73] Adding Images and lightbox in wysiwyg

By aev - October 1, 2009

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-

Re: [aev] Adding Images and lightbox in wysiwyg

By (Deleted User) - October 1, 2009


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

Re: [Dave] Adding Images and lightbox in wysiwyg

By (Deleted User) - October 1, 2009

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