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

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

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

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.

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

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

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.

0 votes
Davin Studer Community Leader Jan 14, 2014

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

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
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

323 views 23 8
Join discussion

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