// you’re reading...

Plugins / Extensions

Plugin: Reference Image


ReferenceImage is a small helper to reference one image instance to another one, which makes it ideal for image galleries: Editors have only to take care of the large image, the thumbnail (i.e. referenced image placeholder with custom size) is created automatically.

This is done with a little AJAX call from the page (don’t forget to adjust the parameters to match your image placeholder names).

<!IoRangeRedDotEditOnly>
<script type="text/javascript">
// Reference Image via RQL
var xmlHttp = (typeof XMLHttpRequest != 'undefined') ? new XMLHttpRequest() : null;
if (!xmlHttp) {try {xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");} catch(e) {try {xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");} catch(e) {xmlHttp  = null;}}}
if (xmlHttp)
{
	xmlHttp.open('GET', '/cms/PlugIns/referenceImageAjax/referenceImage.asp?source=IMG_SOURCE&dest=IMG_DEST', true);
	xmlHttp.onreadystatechange = function (){ if (xmlHttp.readyState == 4) alert(xmlHttp.responseText); };
	xmlHttp.send(null);
}
</script>
<!/IoRangeRedDotEditOnly>

In the template code above, this event is triggered each time the page is opened for editing. If this seems inappropriate for you (the script being called each time), you can wrap the JavaScript in a function and add a RedDot to call it.

A more advanced solution: After the first successful call, write some content to a standard field (function is not included) and check with some lines of ASP if the field is empty before making the AJAX call.

Download

Latest version can be downloaded/forked at GitHub

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Frederic Hemberger Frederic Hemberger lives in Cologne, Germany where he works as a technical consultant and senior RedDot developer. After years of studying the ancient and mysterious ways of content management, he acquired the black belt of RedDot-fu. After teaching many students in the weird ways of the Dot, he retreated to the old misty mountains to meditate. Legends tell that he finally reached the mysterious state of IoRangeNoRedDotMode.

Discussion

2 comments for “Plugin: Reference Image”

  1. Hi Frederic

    This sounds like the sort of thing we are looking for. I’ve tried to use img_big to generate an img_thumb based on your code but nothing seems to happen…what should I do after unzipping to asp/plugins and pasting into the template?

    Posted by Neil | December 22, 2009, 11:23 am
  2. The JavaScript code references the image as soon as you open your reddot page. (Alternatively, you can also insert a link calling the script code as a function.)

    a) Did you unzip the files to /ASP/Plugins or /ASP/PlugIns/referenceImageAjax/? You have to adjust the path in the JavaScript matching your installation.

    b) Did you already set an image for the large image placeholder?

    Posted by Frederic Hemberger | December 23, 2009, 4:58 pm

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...