2

I need to add rel="lightbox" to the anchor tag when you select a target image using either Image or TextImage component. The anchor tag is automatically generated by CQ, but I am unable to find where this happens, or more importantly, if there is a method I can call to add this string.

I am looking over the Adobe documentation for the built-in Image component (http://dev.day.com/docs/en/cq/5-3/javadoc/com/day/cq/wcm/foundation/Image.html), which I cloned and modified slightly for separate Lightbox use.

Image object has protected Map<String,String> getImageTagAttributes(), and I hope there is some equivalent object for anchors in a class that I'm not aware of.

Here is our current Image component that I used for reference.

<%@ page import="commons.Doctype,
    wcm.api.components.DropTarget,
    wcm.foundation.Image" %><%
%><%@include file="/apps/site/global.jsp"%><%
String alignment = properties.get("alignment", "");
Image image = new Image(resource);

    //drop target css class = dd prefix + name of the drop target in the edit config
    image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image");
    if (!alignment.isEmpty() && !alignment.equals("center"))     
    image.addCssClass(alignment);
    image.loadStyleData(currentStyle);
    image.setSelector(".img"); // use image script
    image.setDoctype(Doctype.fromRequest(request));
    // add design information if not default (i.e. for reference paras)
    if (!currentDesign.equals(resourceDesign)) {
        image.setSuffix(currentDesign.getId());
    }
    if (alignment.equals("center")) {
    %><div class="center"><%
    }
    %><% image.draw(out); %><%
    %><cq:text property="jcr:description" placeholder="" tagName="small"/>
    <% if (alignment.equals("center")) {%>
    </div>
    <% } %>

Right now I'm using jQuery to do the job, but I don't want to rely on scripting if possible.

justacoder
  • 2,684
  • 6
  • 47
  • 78
  • 1
    This is perhaps a cheesy way to do it, but we solved this problem by avoiding the `<% image.draw(out)%>` call; instead we just emit something like ` – David Gorsline Jan 30 '13 at 20:46
  • What about if a target image isn't selected? Do you have a conditional for that? The hyperlink has to wrap round the source image only if a target image is found. – justacoder Jan 30 '13 at 21:21
  • Hmm, not sure about that. Perhaps the getHref() and getInnerHtml() methods of [DownloadResource](http://dev.day.com/docs/en/cq/5-3/javadoc/com/day/cq/commons/DownloadResource.html), from which Image inherits, could be useful? – David Gorsline Jan 30 '13 at 21:28

2 Answers2

1

You should be able to extend the image component and use

image.addAttribute("rel","lightbox");

as per

Image Class documentation for CQ5.5

antonyh
  • 2,131
  • 2
  • 21
  • 42
  • I just tried it out, but unfortunately I need the `rel` attribute added to the hyperlink around the image, not the image itself. – justacoder Feb 04 '13 at 15:30
  • Good point. You could change the lightbox to find tags that contain – antonyh Feb 05 '13 at 16:08
  • Another idea; instead of invoking image.draw(out) you could write the output to a Writer, then manipulate it before sending it to out. It seems that the description from the javadoc is "Writes this image as tag to the given writer by invoking the following - calls getImageTagAttributes() - prints the link tag if needed - prints the image tag - prints the attributes - closes the image tag - closes the link tag" so it looks like there's no control over the link. Personally, I feel this would work but potentially be version specific and possibly break if you upgrade CQ. – antonyh Feb 05 '13 at 16:17
  • I tried manipulating `getImageTagAttributes()` also, but it is a protected class that I cannot access. For now I'm just using jQuery to look for specific classes that the IMG tag has, and getting its parent anchor link value. – justacoder Feb 05 '13 at 19:48
  • You could subclass the Image class, then you could access the method (assuming it's not Final). – antonyh Feb 06 '13 at 20:41
0

You could look at Sling Rewriters to do that work: http://sling.apache.org/site/rewriting-the-output-through-pipelines.html Basically you can like parse your response and modify it on the fly.

Maksim Kviatkouski
  • 81
  • 5