Question

When for example, we would normally add background images into a stylesheet via a class, is it possible in cq for an author to specify an image, and cq itself to amend the CSS to add the class and background image specification.
I guess the other way is for the sling resource to add an inline stylesheet. What’s the best method?

Answer 1

I’ve done something similar in modifying components in CRX(DE) using an inline stylesheet so that their dialogue window has additional fields for users to enter. I added to the image component a field for having a target image selected from the DAM for target when clicked.

You could do something along the lines of this:

Component properties

/yoursite/components/content/-yourcomponent-/dialog/items/bgImage (your component tree may vary slightly)

fieldLabel : String = Image to Link to
jcr:primaryType : Name = cq:Widget
name : String = ./bgImage
xtype : String = pathfield

Add the following to /yoursite/components/content/-yourcomponent-/yourcomponent.jsp

<%
String bgImage = properties.get("bgImage", "");
String cssStyle = "";
if (bgImage != null) {
  cssStyle = "background:url(" + bgImage + ") no-repeat;";
}
%>

<div style="<%= cssStyle %>">
  // Other output here
</div>

This is a very rough draft, but you should get the idea.

Update: If you wish to add CSS classes externally, and reference them in code. However, you’d still have to append a user-selected image as an inline, or internally.

• In CRX(DE), expand /etc/designs/-yoursite-/styles.css/files in your development/author instance
• Add a new CSS file accordingly, or append your code to an existing file
• The system will merge all CSS files into one huge styles.css file
• styles.css is cached by the system, so changes may not occur immediately based on application settings.

<div class="imageDiv" style="<%= cssStyle %>"> </div>