Image Headers and Emojis for Confluence Data Center

[Chris K]

Hello Community,

In Cloud, Confluence provides the option to "make your pages more memorable" by adding emojis and images to page headers (https://support.atlassian.com/confluence-cloud/docs/make-your-page-and-its-title-more-memorable/)

Does anyone know if this look-and-feel feature will also be released for DC? :)

Thanks in advance and have a nice day!

Chris

[Julie d_Antin _Elements_ · Accepted solution]

Hi @Chris K 

Emojis are on the roadmap (https://www.atlassian.com/wac/roadmap/data-center/emoji-experience?product=confluence&p=b98658e2-ac ) but I didn't see anything on header images in the roadmap.

[Chris K]

Thanks Laura, I guess thats a "Cloud-Only" Feature then :)

[David Yu]

Here's a User Macro you can use to make a Banner Header for Confluence Data Center/Server:

In addition, it supports text inside the banner image itself as an overlay.

## Macro title: Banner Image
## Macro has a body: Y or N
## Body processing: Selected body processing option
## Output: Selected output option
##

## This is an example macro
## @param herotext:title=Title|type=string|required=false|default=My Banner Title|desc=Banner Title
## @param subtitle:title=Subtitle|type=string|required=false|default=|desc=Text to display underneath the title
## @param height:title=Height|type=string|required=false|default=25vh|desc=Banner Height (ex: 25vh)
## @param color:title=Font Color|type=string|required=false|default=#ffffff|desc=Text Color (ex: #6bdfab)
## @param fontsize:title=Font Size|type=string|required=false|default=60px|desc=Font Size (ex: 60px)
## @param imagename:title=Image Name|type=string|required=false|default=hero.png|desc=Image attached to this page (ex: hero.png)

<style>
.hero-section {
background: url('/download/attachments/$content.getIdAsString()/$paramimagename') 50% no-repeat;
background-size: cover;
border-radius: 5px;
height: $paramheight;
text-align: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.hero-section .hero-section-text {
font-size: $paramfontsize;
color: $paramcolor;
text-shadow: 0px 3px 6px rgba(100,100,100,0.75);
}

.sub-title {
margin-top: 20px;
font-size: 13pt;
color: $paramcolor;
}

.page-metadata:hover {
opacity: 1.0;
}

.page-metadata {
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.page-metadata {
opacity: 0;
margin: 0 0 30px;
}

#title-text { display:none; }
</style>

<div class="hero-section">
<div class="hero-section-text">$paramherotext<h3><div class="sub-title">$paramsubtitle</div></h3></div>
</div>