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 is…no 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
<div data-cq-component=“title”>This points to the title-component</div>
<div data-cq-component=“image”>points to the image component</div>
<div data-cq-component=“text”>points to the text component</div>
<img src=“img/product.png” alt=“Photo of Polar Brake Goggles” title=“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
<div data-cq-component=”/apps/myproject/component/mycomponent”>custom component</div>
Here is more documentation around this feature: