Posts tagged "textimage component"

February 10, 2012

How to add align options to the textimage component

If you have ever looked at the textimage component on the geometrixx site and seen that it has a align option for the image.

But, dont see that option when you added  the textimage component on your site.

To add align options for the text and image component for your site, just like the geometrixx site, follow these steps.

1. Locate the paragraph system where you will be adding the text and image component on your site, inside your site’s design folder.

2. Inside the par node, create a node “textimage” of type “nt:unstructured”

3. Inside the textimage node, create a node “cq:styles” of type “nt:unstructured”.

4. Inside the cq:styles node, create a node “imagealign” of type “nt:unstructured”.

5. Inside the imagealign node, you can create as many alignment nodes as you wish.

  • Create a node “image_left” of type “nt:unstructured” and create a property “text” of type String, with the value “Left”
  • Create a node “image_right” of type “nt:unstructured” and create a property “text” of type String, with the value “Right”

6. You will have to handle the actual alignment of the images in your CSS file for divs “image_right” and “image_left” or whatever other values you add to the imagealign node.

 

1:07 PM Permalink