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?

6 answers

1 accepted

4 votes

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

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.

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 vote
Davin Studer Community Champion 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.

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Published 8 hours ago in Confluence

Think you know shares vs. @mentions in Confluence? Take this collab quiz.

To anyone who doubts that Atlassians are a little too obsessed with collaboration, and tools related thereto, let me describe a recent discussion we had (which took place on our internal Confluence, ...

85 views 2 4
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you