Can you set an image size to a percentage?

[Kris Fininen]

Is there a way to set an image size to a percentage in Confluence Server? For example, if we wanted an image to be 35% of the page, and remain 35% of the page when the browser window is resized, or exported to PDF, can we do it?

Thanks!

[Davin Studer · Accepted solution]

With a couple user macros you could do this. With the below users macros you would put the div macro on a page and put your image inside the div. Then in the div properties give it an id like scaling-image. Then in the style macro target any images inside that div like so ...

#scaling-image img {width: 35%;}

User Macros

Macro Name:
div

Macro Title:
div

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 08/10/2018
## @param id:title=ID|type=string|required=false|default=|desc=A unique id for the element
## @param class:title=Class|type=string|required=false|default=|desc=The class of the element
## @param style:title=Style|type=string|required=false|default=|desc=An inline style definition
## @param title:title=Title|type=string|required=false|default=|desc=Text to display in a tool tip
## @param dir:title=Text Direction|type=enum|enumValues=ltr,rtl|required=false|default=|desc=Sets the text direction
## @param align:title=Align|type=enum|enumValues=left,center,right,justify|required=false|default=|desc=Sets the alignment
## @param lang:title=Language Code|type=string|required=false|default=|desc=Sets the language code

#set ($q = '"')
#set ($id = "")
#set ($class = "")
#set ($style = "")
#set ($title = "")
#set ($dir = "")
#set ($align = "")
#set ($lang = "")

#if($paramid && $paramid != "")
    #set($id = " id=${q}${paramid}${q}")
#end
#if($paramclass && $paramclass != "")
    #set($class = " class=${q}${paramclass}${q}")
#end
#if($paramstyle && $paramstyle != "")
    #set($style = " style=${q}${paramstyle}${q}")
#end
#if($paramtitle && $paramtitle != "")
    #set($title = " title=${q}${paramtitle}${q}")
#end
#if($paramdir && $paramdir != "")
    #set($dir = " dir=${q}${paramdir}${q}")
#end
#if($paramalign && $paramalign != "")
    #set($align = " align=${q}${paramalign}${q}")
#end
#if($paramlang && $paramlang != "")
    #set($lang = " lang=${q}${paramlang}${q}")
#end

<div${id}${class}${style}${title}${dir}${align}${lang}>
$!body
</div>

Macro Name:
style

Macro Title:
CSS Stylesheet

Macro Body Processing:
Unrendered

Template:

## Developed by: Davin Studer
## Date created: 08/10/2018
## @param media:title=Media|type=string|required=false|default=All|desc=Optionally specify which media types the style applies to, eg: print,aural,embossed
## @param import:title=Import|type=string|required=false|desc=Optional URL for an external style sheet to import

<style type="text/css">
########################################################################################
## Below CDATA fixes issue with greather than and less than symbols being escaped out ##
########################################################################################
/*<![CDATA[*/
#if($parammedia && $parammedia != "" && $parammedia != "All")
@media $parammedia {
#end
#if($paramimport && $paramimport != "")
@import url($paramimport);
#end
$!body
#if($parammedia && $parammedia != "" && $parammedia != "All")
}
#end
/*]]>*/
</style>

[Kris Fininen]

Thanks for the reply, but we need a solution that will export out to PDF and HTML using K15t Scroll Exporters. K15t exporters ignore space CSS and so far we have not been able to get Confluence to recognize CSS IDs.

[Tom Rough]

Hi Kris, Hi Davin, 

The approach of using Davin's user macros would actually work for controlling the image sizing with Scroll PDF Exporter v4.x exports.  As you can see from my example, I added width and height attributes to the Style-macro target and the export preserves this information: 

Unfortunately, as you rightly stated Kris, with our version 3.x Exporters (such as with Scroll HTML Exporter), the specific information is not preserved. This may be something that we look into having available with Scroll HTML Exporter in the new major version but there are no concrete plans for this as yet. 

Thanks, Thomas (K15t Software)

[Kris Fininen]

Hi Thomas,

Thanks for your input here. We are using Scroll PDF Exporter 4.4.4. So far, our department has been hesitant to use macros not in the Atlassian Marketplace.

Based on your examples, I went ahead and marked Devin's solution as an accepted answer. Hopefully this will be useful to others.

Thanks Everyone!