Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

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?

11 answers

1 accepted

6 votes
Answer accepted

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

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

Like Peter Flynn likes this
Like andora29 likes this
Like andora29 likes this

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.

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.

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!

Works perfectly for banners on 100% width, thanks!

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

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.

Like # people like this

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 

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. smile

Hi,

 

Can you please share the code for left justification?

Thanks.

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

Like andora29 likes this

Just using

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

and it works 

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

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

 

Thanks

Like heather_meadows likes this

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!

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

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 ?

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

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

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.

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

Like # people like this

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.

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.

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).

0 votes
Deleted user Aug 22, 2016

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.

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

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence

🏑 Atlympic Event: Confluence

Hello Community!  Quick disclaimer: We are running a contest on Community (The Atlympics!) from July 23rd - August 8th of 2021. If you are interested in participating in this contest (prizes! ...

390 views 15 12
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you