View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

adding code to images

Thread began 11/10/2009 2:57 pm by clickhappy392103 | Last modified 11/11/2009 2:50 pm by clickhappy392103 | 2564 views | 10 replies

MickW

Hi,
I've tackled this and I can't see a way of setting it up automatically.

What I've done is created a 'User Guide' for my client covering the use of the CMS as a whole and then added specific instructions for the lightbox. This involves editing the source code in the CMS which is not that great but it's not too complicated.
Basically what I've done is taken them through how to optimise images for the web so that they end up with an image that is the 'larger version' with a reasonably small filesize (less than 200kb).

I have already placed the required lightbox javascript in the head of the page.

Then they place the image on the page using the CMS and in the image editor change JUST the width (to maintain the ratio) to the required thumbnail size.
Then:
1.In the CMS editor select the ‘thumbnail’ image and click the ‘Insert/Edit Image’ icon to open the ‘Image Properties’ dialogue.
2.Click the ‘Link’ tag.
3.Click ‘Browse Server’.
4.Select ‘Image’ from the ‘Resource Type’ drop down menu (top left).
5.Click on the filename of the image you want to use.
6.Check the URL box has been filled with a value in the ‘Link’ tag area of ‘Image Properties’ e.g.
http://www.yoursite.co.uk/cms/cms_images/mirror.jpg.
7.Make sure that the ‘Alternative Text’ has been entered.
8.Click ‘OK’ to exit ‘Image Properties’.
9.In the CMS editor click the ‘Source’ button and the source code of the editable section of the web page will be shown (N.B. be very careful here!!).
10.Locate the following piece of code:
<a href="http://www.yoursite.co.uk/cms/cms_images/01_mirror.jpg">
(The section at the end in italics will relate to the image used and will vary)
Immediately after the ‘<’ insert ‘rel="lightbox"’ so that the piece of code reads:
<a rel="lightbox" href="http://www.yoursite.co.uk/cms/cms_images/01_mirror.jpg" >
!! Important
– Be sure to select the code beginning with ‘<a href=’ and NOT the code beginning with ‘src=’

10.I have found it best to click the ‘Source’ button to return to the CMS editor preview window – sometimes if this is not done your edit will not be saved. If it doesn’t work this is the first thing to check.
11.Click ‘Save’.

I have found that if you insert
‘rel="lightbox"’before the closing > it works just as well but the editor moves it to after the opening < if you insert it as described it gets moved to the end :rolleyes:

HTH

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...