• GitHub
• 03.08.2017
• EN

Plug-Ins: "Reference Image"

Title: Reference Image

Compatibility: 7.5.x

Description:

• 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.

Accessibility:

• In SmartTree

Developed by:  Frederic Hemberger 

Download: Solution Exchange GitHub

Screenshots: n/a

Article:

By Frederic Hemberger ⋅ April 21, 2009 ⋅ 

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 <a title="RQL" href="http://www.reddotcmsblog.com/tag/rql">RQL</a>  
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/<a title="PlugIns" href="http://www.reddotcmsblog.com/category/reddot/reddot-cms/plugins-extensions">PlugIns</a>/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.