Panel Macro Background Image

[stephanie lollar]

I am trying to set an image as a background within a panel macro. Is there a way to do this? Note we do not have html enabled.

[scott · Accepted solution]

Here is a macro that I wrote that allows you set a custom background, corner radius etc.

## Macro title: Image With Background
## Macro has a body: Y
## Body processing: Rendered
## Output: Selected output option
##
## Developed by: Scott Greig scott@scottart.com
## This free to use and modify... Have fun!

## This is an example macro
## @Param PanelTitle:title=PanelTitle|type=string|required=false|default=|desc=Panel Title
## @Param PanelWidth:title=Panel Width|type=string|required=false|default=auto|desc= Examples: auto,4px,50%
## @Param BorderStyle:title=Border Style|type=string|required=false|desc=Examples: solid,dashed
## @Param BorderColor:title=BorderColor|type=string|required=false|default=black|desc=Examples: solid,dashed
## @Param BorderWidth:title=Border Pixel Width (Value Only)|type=int|required=false
## @Param BorderRadius:title=Border Radius (Value Only)|type=int|default=0|required=false
## @Param Image:title=Image Name|type=string|required=false
## @Param ImageRepeat:title=Image Repeat|type=enum|enumValues=repeat,repeat-x,repeat-y,no-repeat,space,round|default=repeat|desc=Choose how the background image is tiled
## @Param BackgroundColor:title=Background Color|type=string|required=false
## @Param ContentPadding:title=Content Padding Pixel Width (Value Only)|type=int|default=10|required=true
## @Param TitleBackgroundColor:title=Title Background Color|type=string|required=false
## @Param TitleColor:title=Title Text Color|type=string|required=false
#set ($borderWidth = $paramBorderWidth+"px")
#set ($contentPadding = $paramContentPadding+"px")
#set ($borderRadius = $paramBorderRadius +"px")

#set ($borderTopRadius =$borderRadius )

#if($paramPanelTitle != "")
#set ($borderTopRadius ="0px")

<div style="color: $paramTitleColor; background: $paramTitleBackgroundColor;border-radius: $borderRadius $borderRadius 0px 0px;padding:10px;border: $borderWidth $paramBorderStyle $paramBorderColor;border-bottom-style: hidden; width: $paramPanelWidth;"><b>$paramPanelTitle</b></div>
#end
<div style="background-image:url('$paramImage');background: $paramBackgroundColor;border-radius: $borderTopRadius $borderTopRadius $borderRadius $borderRadius ;background-repeat:$paramImageRepeat;padding:$contentPadding;border: $borderWidth $paramBorderStyle $paramBorderColor;width: $paramPanelWidth;">$body</div>

Here is a sample with custom background from the web:

 https://media.wired.com/photos/5a593a7ff11e325008172bc2/master/w_1280%2Cc_limit/pulsar-831502910.jpg

Also showing a custom title background color and radius

[stephanie lollar]

Thank you @scott - I will try this and let you know how it goes!

[stephanie lollar]

@scott This worked after making Param lower-case - thank you!

I would like to be able to use an image not on the web, in other words an image attached to the page. Is there a way to do that?

[Curtis Freudigmann]

@stephanie lollar -

If you have an image attached to your page, you can click the attachments button (little paperclip) at the top of the page. Then click on the image name you'd like to use from the list. Once you click on it, it will show a preview of the image. If you right-click the image you can click 'Copy Image Address'. This will provide you with a URL to use to link to an image attached to your page.

[scott]

Oops I didn’t notice that it got converted to upper case when I pasted it in. Sorry.  :)

[stephanie lollar]

Thank you both!

[scott]

Here is a user macro that I made.  I allows you to set the background image, the corner radius, padding width etc.  This is provide as is etc. etc.

## Macro title: Panel With Background
## Macro has a body: Y
## Body processing: Rendered

##
## Developed by: Scott Greig
## Date created: 19/07/2019
## Installed by: My Name

## This is an example macro
## @Param PanelTitle:title=PanelTitle|type=string|required=false|default=|desc=Panel Title
## @Param PanelWidth:title=Panel Width|type=string|required=false|default=auto|desc= Examples: auto,4px,50%
## @Param BorderStyle:title=Border Style|type=string|required=false|desc=Examples: solid,dashed
## @Param BorderColor:title=BorderColor|type=string|required=false|default=black|desc=Examples: solid,dashed
## @Param BorderWidth:title=Border Pixel Width (Value Only)|type=int|required=false
## @Param BorderRadius:title=Border Radius (Value Only)|type=int|default=0|required=false
## @Param Image:title=Image Name|type=string|required=false
## @Param ImageRepeat:title=Image Repeat|type=enum|enumValues=repeat,repeat-x,repeat-y,no-repeat,space,round|default=repeat|desc=Choose how the background image is tiled
## @Param BackgroundColor:title=Background Color|type=string|required=false|desc=This will disable the background image if set.
## @Param ContentPadding:title=Content Padding Pixel Width (Value Only)|type=int|default=10|required=true
## @Param TitleBackgroundColor:title=Title Background Color|type=string|required=false
## @Param TitleColor:title=Title Text Color|type=string|required=false
#set ($borderWidth = $paramBorderWidth+"px")
#set ($contentPadding = $paramContentPadding+"px")
#set ($borderRadius = $paramBorderRadius +"px")

#set ($borderTopRadius =$borderRadius )

#if($paramPanelTitle != "")
#set ($borderTopRadius ="0px")

<div style="color: $paramTitleColor; background: $paramTitleBackgroundColor;border-radius: $borderRadius $borderRadius 0px 0px;padding:10px;border: $borderWidth $paramBorderStyle $paramBorderColor;border-bottom-style: hidden; width: $paramPanelWidth;"><b>$paramPanelTitle</b></div>
#end
<div style="background-image:url('$paramImage');background: $paramBackgroundColor;border-radius: $borderTopRadius $borderTopRadius $borderRadius $borderRadius ;background-repeat:$paramImageRepeat;padding:$contentPadding;border: $borderWidth $paramBorderStyle $paramBorderColor;width: $paramPanelWidth;">$body</div>

[Curtis Freudigmann]

Hi @stephanie lollar

I have found that with Confluence Server and access to the stylesheet, you can target the panel class and add a background image using css.

So something like:

.panelContent { background-image: url([enter.url.here])}

*Remove [ ] brackets

I was able to test this and it works, however, because I am targeting ALL panel classes with this, every panel on this space will have the same background image.

HTH

-Curtis

[stephanie lollar]

Thank you, that is what I'm looking for, but I need a different image in each panel.

[stephanie lollar]

I'm wondering if there is a way to reference a panel by id or text within the panel?

[Curtis Freudigmann]

I looked a little more in to this and it seems there might be an Add-On for this, unfortunately however, I do not believe that is possible using my method.

-Curtis