How do you create an image link in Rx (with a caption!)?

stephenh · January 13, 2009, 11:53pm

I would like to add an inline link or template to an Ephox field that would contain a Rhythmyx Image content item linking to some other content item in Rx.

Either one is supported in and of itself … add an inline link to some text, then add an inline image or template with size/styled image.

Has anyone come up with an elegant way to create these together? (i.e. not cutting and pasting them together in code view, if that even works)

Alternatively, or in addition to this, our users would like to be able to add a caption to an image that is added in an inline template from an Ephox field. The caption would be unique just for that usage, so it could not be stored with the image content item. Nor could it practically be stored in the current content item being authored, as there could be several images with captions added to the same body field.

Thanks in advance for any suggestions or guidance on either of these two options!

stephenh · January 14, 2009, 12:00am

For some reason, this forum doesn’t like html code pasted in the body …

stephenh · February 10, 2009, 2:18pm

Here is how we wound up implementing this:

In order to support the feature to have a linkable image with a caption, we created a new content type called SuperImage to hold a caption field, a reference to an image (via a slot on a new snippet template) and a reference to a content item (another slot). We then created some macro code based off of the Rx slot macros to pull out the content item from each slot and then extract the relevant properties to assemble as html image, link, and caption. The main macro, renderInlineImage, is called from an inline snippet template. We set up two templates, one for floating the image left, another for floating the image right.

Template:

&lt;body&gt;
	
	#set($floatStyle = "floatLeft")
	#renderInlineImage($floatStyle)

&lt;/body&gt;

Macros:

#**
Macro to support inline super-image (linkable image with optional caption) to a content item body field.
Add this macro to a wrapper snippet template, which then gets referenced by the inline template chooser.
@param floatStyle css instruction on how to align the super-image div (Examples: floatLeft, floatRight)
@author stephenh
@date 1/19/09
*#
#macro(renderInlineImage $floatStyle)

#BCinitslot("bcReferenceContent")

#if($sys.currentslot.relresults.size() &gt; 0)
	
	#set($contentItem = $sys.currentslot.relresults.get(0).node)
	#set($contentItemURL = $rx.location.generate($sys.currentslot.relresults.get(0)))

#end

#BCinitslot("bcReferenceImage")
#if($sys.currentslot.relresults.size() &gt; 0)
	
	#set($image = $sys.currentslot.relresults.get(0).node)
	#set($imageAltText = $image.getProperty("rx:title2").String)
	#setImageAssetURL($image 250)
	#set($caption = $sys.item.getProperty("rx:caption").String)
	
#end
#if($image)
	
	&lt;div class="$floatStyle smallImageWithCaption"&gt;
	#if($contentItem)
		&lt;a href="$contentItemURL"&gt;
	#end
	&lt;img src="$imageAssetURL" alt="$imageAltText" /&gt;
	#if($contentItem)
		&lt;/a&gt;
	#end
	#if($caption)
		&lt;div style="padding-left:5px;padding-right:5px;"&gt;$caption&lt;/div&gt;
	#end
	&lt;/div&gt;
#end

#end ## renderInlineImage

#**
Knock-off of Rx System Velocity Macro, initslot. Used to retrieve the content items in a given slot for the current item/template.
Macro will populate $sys.currentslot.relresults with slot contents as JCR Nodes.
@author stephenh
@date 1/15/09
*#
#macro(BCinitslot $slotname)

##&lt;p&gt; DEBUG: Entering macro BCinitslot($slotname)!&lt;/p&gt;
#set($sys.currentslot.slotname = $slotname)
#set($sys.currentslot.slot = $sys.asm.findSlotByName($slotname))

#if ($sys.currentslot.slot)
	#set($sys.currentslot.relresults = $rx.asmhelper.assemble($sys.assemblyItem,$sys.currentslot.slot,$completeparams))
#else
	&lt;h1&gt;ERROR: sys.currentslot.slot not set! Did you pass in a valid slot name?&lt;/h1&gt;
#end
##&lt;p&gt; DEBUG: Exiting macro BCinitslot($slotname)!&lt;/p&gt;

#end

stephenh · February 10, 2009, 2:28pm

Code output was garbled when rendered. Including last post as attachment here.

jitendra · February 10, 2009, 3:10pm

Just out of curiosity, but (stephenh) do you have a problem where the order of items in the slot is not preserved? To further expound, I am attempting to build a slot of some other content item in a template for another item (ie:
CI1 -> Slot1 -> CI2 -> Slot2 -> [information i want] and the template is of CI1)


#set($thisN = $sys.assemblyItem.clone())##
...

$thisN.setNode($currItem)##
#set($moreslotitems  =  $rx.asmhelper.assemble($thisN,$sys.asm.findSlotByName("myslotname"),$completeparams))##
<ul class="resourceAuthorList">
#foreach($slotitem in $moreslotitems)##
<li>$rx.doc.extractBody($slotitem).trim()</li>## 
#end##
</ul>
...

stephenh · February 10, 2009, 3:14pm

Our implementation assumes that only one item will be authored per slot. Additional items would get ignored. A user would create a new SuperImage item for each image/link/caption combo.

jitendra · February 10, 2009, 3:49pm

Apparently if i use something other than $completeparams (like $blank / non existent variable) it will work. Probably has something to do with $completeparams being previously initialized or initialized by the “parent” slot call.

pilotstevek · February 11, 2010, 1:55pm

I have been able to do something similar to what you are doing here but I can’t get the slot (imagelinkslot.jpg) to appear like a normal slot on other content items (normalslot.jpg) at the bottom of the content editor. The only way I can add the link to the slot is through the Active Assembly Table Editor (imagelinkslottableeditor.jpg), this is ok but I would rather have it like all the others for training purposes. Is this because there isn’t a full page template for the image content type?

rmahajan · July 16, 2010, 11:58am

what does #setImageAssetURL($image 250) do? Is there a way to expand this for multiple images in a slot?