Jun 30, 2013

The DesignImporter component

Posted by Feike Visser

In almost every CQ-project you get a question like 'but I want to style this page *now* to match the new marketing campaign', or 'can't we have a component where I can enter HTML'?

With these questions you always have to think twice how to implement this, and also if you even want to have this available for the author. But from the author side it makes sense to have tooling available that can react quickly on design-changes without have to (re)deploy code.

Now with 5.6.1 you have the 'DesignImporter' component that can help you with these questions.

In this blogpost I will guide through the process how to do this, and the nice thing coding involved.

DesignImporter, what is it?

If I would need to explain it in once sentence I would go for: "The DesignImporter-component lets you import a complete HTML-design (css/js/images/html) inside a part of your page"

I have prepared a simple example to demonstrate how the DesignImporter works, let's first enable the component on this Geometrixx demo page: http://localhost:4502/cf#/content/geometrixx/en/toolbar.html

Go to the Design-mode and enable the DesignImporter component, when you have done that drag the component onto the page.

The two images below show you the steps.


Import your design

Now you can import your design into your page, I have prepared this design-file. Either double-click on the ZIP-logo or drag the file on the component.

When you have done this you will see this appearing on the page.


As you can see a new design is now available inside your existing page, and the best thing for the author....: no coding involved.

Let's have a further look

If you hoover over the items you will see that actually we have now three components: title, image and text component.

When you go to the details of the image you see that it already has a title and alt-text.


How does it work?

So you are wondering what is then inside the zip-file, so let's have a look.

index.html -> contains the HTML that is imported, with the special cq-ids the hint to cq to create components

img-folder -> contains the images

css-folder -> contains the css-files

Here you see an overview on the special ids used inside the index.html file.

is the starting point for the import process
This points to the title-component
points to the image component
points to the text component
Photo of Polar Brake Goggles Image component that specifies the alt-text and title

Other options available:

In the sample that I used the HTML-file pointed to the standard components (title, image, text). If you want to use your own components in the design-file you can do this like this.

Use your own components

custom component