how to adjust the size of the image according to width of screen.

[Jorge]

Some users have really large or small resolutions. I want that the image changes sizes according to the available space to avoid scrolling.

Is this possible?

[jing_hwa_cheok · Accepted solution]

Hi Jorge,


The Confluence attachment macro resize based on the px measure which is fixed and does not scale based on the resolution or the containing block

You can use this simple user macro that I've written. It will resize the image witdh in percent based on the containing block. This means it will resize based on the resolution of your user screen. Just put it in Confluence Admin >> User Macros.

Below is the configuration I used to create the user macro

Put the Code below into the User Macro Template:

## @param attachment:title=File name of the image attachment|type=string|desc=The name of the attachment |required=true|multiple=false
## @param pcent:title=Percentage|type=percentage|desc=The size of the image in percentage|required=true|multiple=false

<ac:image ac:width="$parampcent%"><ri:attachment ri:filename="$paramattachment" ></ac:image>

Type {image and suggestion for the macro will be shown in your macro browser.


Here's an example on how to use this macro:





Fill the first field with the attachment name and the second field with the percentage of the attachment you wish to display based on the containing block.



Hope this helps!



Regards,

Jing Hwa

[Bruce Henry]

This requires admin access to create a user macro. For an easier way that does not require macros see my answer below...

[oib]

Jing_hwa_cheok 's macro worked like a charm for years.
Then, with the (around) 8.7 series of Confluence, the macro stopped working.
So far i can tell that the problem is in the % character needed for sizing.

Anyway, it stopped working and I have no work around.

[kjtester · Accepted solution]

Just using

!untitled.gif|height=100%,width=100%!

and it works 

[Julie MacKenzie]

oh man...I was trying everthing and this fixed it...

ac:height="100%" ac:width="100%"

Thanks

[LaurieC]

Question @kjtester @Julie MacKenzie  -Can you clarify where I am putting this coding? Directly on the Confluence page?

I have Confluence for Data Center and when I use the !, I can pick the image, but then I put in the |height=100%,width=100%! and it just shows up as text on the screen.

Thanks!

[Julie MacKenzie]

go to the source editor on the wiki..its far right corner next to search..click on the <>

[LaurieC]

Hmmm... I don't have it. Looks like I need to install the Confluence Source Editor app? But I only see it for Server. Is that right @Julie MacKenzie ?

[Julie MacKenzie]

I have no idea..we already have the entire wiki set up ..so not sure the framework that was installed.  but I assume yes..as that what the page is

[LaurieC]

Ok. Thanks. I got it to work by clicking Ctrl+Shift+D to get the wiki editor to come up. I can't edit it once I've entered it on the page, but for now it gets me what I need. Thanks for your quick response @Julie MacKenzie

[Kyle Peters]

With the new editor, we appear to have lost the ability to edit image size. Anyone know how to do this now?

[Vinh Thai]

don't think we can do that anymore, very annoying, all the image uploaded in Confluence, Bitbucket are displayed in zoomed giant size ...

Even if I try to resize the image before upload, Confluence/Bitbucket would just be so eager to zoom them up.

[Dave Ingram]

It's a PAIN. Wide shallow images now occupy a HUGE square section of the page. POOR uX for the new editor - Atlassian really should have solved this before dumping the new editor on us 

[Bruce Henry]

The easiest way to do this is to go into the Source Editor (Edit, then click the little "<>" in the upper right) and change the default ac:height="xxx" to ac:width="xx%"

For example:

Change

 <ac:link>
<ri:page ri:content-title="Squadron Art" ri:space-key="disneyid"/>
<ac:link-body>
<ac:image ac:align="center" ac:alt="Ecliptic Evaders' Squadron patch with rebel insignia agaist a background of stylized planets" ac:height="250">
<ri:attachment ri:filename="ecliptic_evaders.png">
<ri:page ri:content-title="Squadron Art" ri:space-key="disneyid"/>
</ri:attachment>
</ac:image>
</ac:link-body>
</ac:link>

to

 <ac:link>
<ri:page ri:content-title="Squadron Art" ri:space-key="disneyid"/>
<ac:link-body>
<ac:image ac:align="center" ac:alt="Ecliptic Evaders' Squadron patch with rebel insignia agaist a background of stylized planets" ac:width="75%">
<ri:attachment ri:filename="ecliptic_evaders.png">
<ri:page ri:content-title="Squadron Art" ri:space-key="disneyid"/>
</ri:attachment>
</ac:image>
</ac:link-body>
</ac:link>
 

This can all be done without needing to have admin access to create a user macro.

[Paul Coada]

This isn't quite true, because it assumes you have installed the Source Editor, which requires admin access to do. It also only works on Confluence Server.

[RWilburn]

Thank you for posting! This works great for me. However, when I close the HTML editor and return to the WYSIWYG editor, the image is HUGE! When I publish or view it, the image looks fine. But in the editor, it is huge and very distracting.

Have you encountered this issue?

Thanks!

[Tom Williams]

Works perfectly for banners on 100% width, thanks!

[Cesar Robles]

We found out that images were not adjusting to browser window size because they were justified in center (as text). Keeping justification to the left did the trick: they respond to window size.

[Vikram Bakshi]

Hi,

Can you please share the code for left justification?

Thanks.

[Allen Chun]

Thanks Cesar, this solves my problem.
for Vikram It's not a code. It's just an alignment on text

[vikram]

hi

[Carl van der Merwe]

As a temporary workaround (assuming no admin access), try restructure your content to allow for placing the image in a grid with more than 1 column, this will greatly reduce the size of the image.

[Eric Stilan]

this is such a regression - its basically going back to creating tables in HTML layout - ugh

[fiona_lebel]

Hi, 

Is it possible to do this for the text into a section ?

In fact, i wanted to fix my text in 2 lines. But when I zoom my page bigger, my text is written on 3 lines. I want to keep de 2 lines format.

Best regards.

Thank you

[Deleted user]

It would be helpful to be able to enter a percentage width instead of just a pixel width in the following toolbar:

image2016-8-22 18:3:29.png

I am getting various scrollbars inside my page due to images extending beyond the available screen area.

[Bruce Henry]

You can actually already do this. See my answer below...

[Susanna Moore]

Agree, you can use CSS to adjust image size. You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).

[Davin Studer]

You could use CSS media queries, or you could use Javascript to iterate through the images on the page and adjust the size depending on the viewport width. It looks like Confluence keeps two versions of images you attach ... the original and a thumbnail. Looks like the only difference in the url to the image is the "attachments" vs "thumbnails" folder (ex. /download/attachments/... vs. /download/thumbnails/...). When you use the image sizing buttons in the editor the smallest two(small & medium) use the thumbnail version of the image and the other two(large & original) use the attachments version of the image. So, if you use Javascript you might want to consider swapping out the image if you resize it smaller ... not for bandwidth purposes as you have already downloaded the image but rather for display quality. Although even that might not be a big deal as all the newer browsers will do image interpolation when downsizing rather than just pixel resizing. But if your user base uses IE < 9 then you might still want to swap out the image with the thumbnail if you drasticly reduce the size as the image quality might look bad when you resize the original down.

[Mick Davidson]

Jorge,

If you click on the image in Edit mode, you should see a number of options that allow you to re-size the image.

There is a set of three squares that make the image smaller or bigger when you click them.

At the beginning of the options there is a field showing how many pixels the graphic currently is. You can click in there and enter another figure.

Note that while you can edit that figure, the graphic will not always be able to re-size to the figure you enter. I've no idea why it does this, but that's my experience.

Cheers.

[jhonwills72]

Adapting image sizes based on screen resolutions is key for user experience. It ensures accessibility of Wwe 2k14 and prevents unnecessary scrolling. Responsive design is definitely the way to go for accommodating diverse user preferences.