Inline images coming to you!

[#1]

Hi Community! I’m Tamim, a Product Manager on the Atlassian Editor team 👋

I understand that, for many people, the process of adding inline images in Confluence Cloud has often involved manual workarounds and felt quite restrictive.

We heard you and felt your pain, and now we (the Media Experience team) have released the ability to add an image inline!

As an added bonus, we’ve allowed you to switch between inline and block-level images.

What is an inline image?

Unlike block-level images, an inline image is simply the ability to insert any image within any text with ease.

How does it work?

Inserting an image within text and headers

Inline images naturally size to the context of where they are placed, creating a uniform sizing experience.

---

Support for a wide variety of nodes

Inline images are supported through text and can be used in most nodes available in the editor today.

---

Toggling between inline and block-level images

Users can easily toggle between inline images and block-level images. We even bring over supported attributes like alternative text, links, and borders.

---

Borders

Inline images support borders on images that have transparent backgrounds.

---

Link support

When creating technical documentation, users have the ability to include external links on inline images, which can offer conveniences such as references to documents.

Editor

---

 Renderer

Grouped layouts

We have organized the layout buttons into their own contextual menu, which displays the selected active layout.

                 

This feature is rolling out over the next month so if you don’t see it on Confluence today, you will soon! Please let us know what you think or ask any questions in the comments below - we would ❤️ your feedback and stay tuned for more media improvements coming soon!

P.S Inline images may not be viewable on mobile at the moment, but our dedicated mobile team is actively working to resolve this.

[Alex Young]

I like this a lot! Question I have though, when a user clicks on the inline image, will it open up the full resolution of the image in the same way that block-level images do when there is no hyperlink on it? I feel like it is sort of implied in the post but wanted to verify.

I would love to use this for screenshots that are associated with specific bullet points, but that would necessitate that the full image can be viewed.

[Matt Reiner _K15t_]

Inline images, we've missed you!

Great work @Tamim Noorzad and team!

[Humashankar VJ]

Great to know - Excited to experience @Tamim Noorzad 

[Yatish Madhav]

Nice! Thanks @Tamim Noorzad 

[Tamim Noorzad]

Thanks for the awesome feedback all!

@Alex Young the team is looking into adding in the full size view functionality for inline images, as this was originally out of scope for this project.

Keep the feedback coming!

[Douglas Hand]

Glad to hear the full functionality is being worked on, as this version is only partially finished and still does not work in the way users need and have been requesting to be restored since 2019.

For the record, the functionality we asked for was the ability to be able to add and show images side by side instead of one image per line. This inline solution you have added is more like the emoji workaround foolishly suggested in the JIRA ticket, which locks the user into tiny little thumbnails that do not open the original image when clicked and cannot be resized - essentially defeating the entire point of the feature we asked to be restored.

Do we have an ETA on this complete solution?

[Alex Sramek]

Thanks y'all! Can we make them bigger without changing the text size? It's going to be a bit of a headache if my TOC is littered with Header 1 items because I want larger thumbnails.

[Tamim Noorzad]

@Douglas Hand - we are working on the functionality to allow you to click on an inline image and preview it (if it doesn't have a hyperlink) - should be out very soon!

Also, you can add two images side-by-side right now using the wrap text function. Give that a go and see if that works.

@Alex Sramek - currently we have limited the size of the image to force it to remain inline. Otherwise there would be no difference between the inline and block level image insertion. i.e you can resize a block level image to be slightly larger than an inline image. Hope that helps!

[Alex Sramek]

Hi @Tamim Noorzad thanks for responding!

Those would still be different things, though.

For block-level, we are limited to one image per line, and either at the left or the right. What I'd really love to see is multiple images per line, inline with text, but bigger than the text. It's just SO SMALL inline that it's not really useful. Like, if I have a photo in there you can't even tell what it's a photo of.

[Alex Sramek]

Waaait a minute, you can have multiple images side by side with wrap text??? Is this a new feature???

[Douglas Hand]

@Tamim Noorzad the wrap setting does work in a way closer to what we want, but it's still not good enough. It is neither intuitive or user-friendly. 

I don't think our request is being properly understood. 
The previous version of Confluence had native image insertion functionality, whereby a user could copy and paste or insert images freely into pages and resize them at will. It didn't rely on a restrictive grid based system and it didn't require workarounds like word wrap to get it to work.

As an art director who has been using this functionality for years to create visual design briefs for my creative dept. It was perfect and allowed me a lot of flexibility and speed.
This new version is slow, cumbersome, ugly and simply not the tool we had before. We are all perplexed as to how this happened in the first place, and frustrated that every solution presented seems to be just a worse version of what we had. 

I am happy to work with you to achieve the result we are all asking for.

[William Lu]

Is there a way to change the default selection to use "Original Size" instead of "inline"?

I find myself having to change EVERY image to "Original size".

For inserting 100+ images, this can be frustrating.

[Tamim Noorzad]

Hey @Douglas Hand, If you're open to it, we can schedule a Zoom call to better understand your requirements and ensure we're aligned before proceeding.

This will allow us to discuss any specifics in detail and lock in a plan that meets your needs effectively.

https://calendar.app.google/vZYDtuyeU7WKLPPb7

P.S this also applies to anyone else reading this :) 

[Douglas Hand]

@Tamim Noorzad maybe next week. I'm in Sydney (AEST time) so let me know when best suits you.

[Kurt Bonheure]

When creating a page with loads of images it's very frustrating that "inline" is the default. Every single image has to be manually changed to "Original size".

How can you implement this without realizing this is a breaking change in workflow for everyone using Confluence?

We're getting tons of questions of our users which have to create numerous pages on a daily basis.

Please advise how to proceed with this...

PS:  Same frustration that there is no default setting for borders and border color and size either on a page-level, user-level, space-level or application level...

[Hassi Hales]

Very well! Great work done by all the team. Appreciated.  

I am having few Questions can anyone just help me out in that

Q1. Are there any limitations or considerations one should be aware of when using inline toggles across different Atlassian products?

Q2. How can inline toggling be utilized in Service Desk projects to streamline communication with customers?

If the team could help me in that!

[Hassi Hales]

Good to know that 

Hi I am having few questions.  

Are there any limitations or considerations one should be aware of when using inline toggles across different Atlassian products?

How can inline toggling be utilized in Service Desk projects to streamline communication with customers?

Will anyone help me or the team!

[Hassi Hales]

I am having some of the questions. Anyone know about it or the team could let me know about these Questions. 

Are there any limitations or considerations one should be aware of when using inline toggles across different Atlassian products?

How can inline toggling be utilized in Service Desk projects to streamline communication with customers?

[Tamim Noorzad]

@William Lu @Kurt Bonheure  

The position of the cursor determines the type of image insertion i.e if you insert an image with the curse inline in between text, then the default image insertion will be inline. If you insert an image with the cursor in a new line with no text, the default image insertion will be "original size". Hope that helps!

[Linda Gross]

I was actually very happy to have the inline images back BUT when it comes to an export (word, html...) of the page, the images are waaay to big and I can't see an option to define the pixcels..
Are we the only ones with this problem?

[Dan Greene]

@Tamim Noorzad- What's the status of inserting images via URL instead of upload with this?  Inline images + CI/CD badges = super win!

[Tamim Noorzad]

@Hassi Hales No limitations that I'm aware of from the current scope. Currently inline images is only available in Confluence.

@Linda Gross That is a bug, which I have reported to the team and they are working on a resolution. Thank you for reporting it!

@Dan Greene this work is being scoped out and prepared for the roadmap.

[Daniel Ferreira]

@Tamim Noorzad 

The default is still inline for a blank bullet point.

Following the blank line logic, I think it should be Original.

Is this a mistake, or intended behaviour?

[skonop]

hi, great news! How can we use it via API?

when creating content from HTML we can use the following to insert an image

<ac:image><ri:url ri:value="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg" /></ac:image>

what needs to be done so that this image appears inline?

[Tamim Noorzad]

@Daniel Ferreira Based on the logic, a bullet point is not considered as a blank line as the bullet point is counted as a character (as it would if it was a numbered point). Hope that makes sense.