How do I add a page header image while exporting to pdf?

Ravindranath Mopparthy June 28, 2018

I tried the technique mentioned here: https://confluence.atlassian.com/doc/advanced-pdf-export-customizations-198806890.html

 

I added css style like below, under pdf stylesheet

  1.  @page  
  2. {  
  3.    @@top-left { 
  4.     background-image: url("https://nviera.atlassian.net/wiki/download/attachments/676528129/FINALLOGO.png?api=v2")  
  5.    }  

    It didn't work.

 

I tried adding  the following to pdf layout

  1. <div style="margin-top: 10.0mm;">  
  2.   <img src="https://nviera.atlassian.net/wiki/download/attachments/676528129/FINALLOGO.png?api=v2" />  
  3. </div>  

    This didn't work either.  I verified that I was using a proper existing image url, by following the image link, and I was able to download successfully.

 

The documentation is confusing.  Finally I failed and asking for help.

1 answer

0 votes
Emily Errico June 28, 2018

It's been a while since I wrote our styling, but it still works so let me see if I can remember how I did it.

I added this to PDF Layout. The /download link between "quotes" has to be stored somewhere in your space. Then you take the image link from there, and edit it so it starts with /download and ends with your file type, like .png.

 <div style="margin-top: 10.0mm; text-align:left"> 
<img src="/download/attachments/1111/s.png" />
</div>
>

 In the PDF Stylesheet, I have the following code under @Bonifacp.

 @top-left 
{
content: element(header);
hr
{
display: block;
height: 1px;
border: 0;
border-top: 2px solid #a8a8a8;
margin: 1em;
padding: 0;
}
}

So the main difference between what you and I did is that I called back to the header code with "content: element(header);". Try doing that, and also cutting your link down to:

/download/attachments/676528129/FINALLOGO.png

Disclaimer: I am not fluent in CSS at all. I don't know why mine works or how to explain it in any more depth. I wrote it through researching Atlassian documentation and other online resources as well as MANY trial and error tests.

I hope this helps! Let me know if you run into another wall with the CSS styling, I spent an obnoxious amount of time on ours.

Ravindranath Mopparthy July 3, 2018

Thx buddy. I will try out the way you did and see if it works for me.  Meanwhile, i chose to use google docs to create documentation for now.

Emily Errico July 3, 2018

No problem, please keep me posted so I can verify that this is a helpful solution I can offer to others.

I understand the appeal of Google Docs, I grew up using it and find it very intuitive. I've never thought of using it for a wiki or documentation base.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events