Stock Images for Confluence

Add high-quality stock images from unsplash.com with ease. Select from presets, search photos or add random images to enhance the look and quality of your Confluence pages & blog posts.

Comment

Inspiration

Pictures say more than a thousand words! We all know this saying. For good reason! People like things and understand them better when they can grasp them in simple imagery.
Have you ever heard of the “Picture Superiority Effect”? When people hear or read information, they’re likely to remember only 10 percent of that information 3 days later. On the other hand, if the message is presented with relevant and suitable images, people retained 65 percent of the information 3 days later. Interesting, right? But... Many users who create/edit Confluence pages or blog posts (news) often don't have the appropriate images at hand or images that are simply not appealing. Free high-quality stock images can help users enhance their content visually and make it more memorable to readers. In addition, we believe that sharing things for free, like the photographers who offer their images on unsplash.com, makes the world a little bit better.

What it does

  • Search 1 million+ of photos by search terms or presets
  • Integrate free high-quality images into confluence content easily
  • Enhance Confluence pages/blog posts visually

How did we built it

We started with creating a Figma prototype we shared with some marketing people to find out if the use case is relevant for them and if it solves their problem. Then, we got into the forge tutorials and set up our first "hello world" forge app. After that, we started to create a basic connection to the unsplash.com API and displayed a simple random image in a forge macro. Once this step was done, we developed an appealing user interface that allows users to find suitable images and add them to their Confluence content conveniently.

Challenges we ran into

One of our greatest challenges was the attempt to implement our design prototype into the new forge macro sidebar. Unfortunately, we were not able to implement it due to the lack of necessary UI components in UI Kit (images, buttons, etc.) or the availability of Custom UI. Since modal dialogs are not available for forge macro configuration and the macro body is not editable in page edit mode we had to find a work-around through the macro configuration in the view mode of the page. The advantage of this workaround is, that once Custom UI is available in the forge macro sidebar, the macro can be moved there without much effort and will immediately be released for all users.

Another feature we missed is the possibility to detect the edit and view mode within the macro.

Another problem is that the performance of the Forge Cloud functions is unreliably. The app receives timeouts occasionally, which we can't do anything about.

Accomplishments that we're proud of

We're very happy to finish our first Forge app within 4 days and be part of the codegeist 2021. No animals, people, or plants were harmed during development. ;)

What we learned

  • How to develop a cloud-native app with the Atlassian Forge Framework
  • How to use Atlaskit React components
  • What the Forge macro sidebar can and can not do
  • How to use and integrate the unsplash.com API

What's next for Stock images for Confluence

  • We're excited to move our Custom UI macro configuration to the new Forge macro sidebar as soon as this is possible to bring the user experience of our app to a higher level.
  • Filter options such as portrait/landscape or colors would allow the user to achieve better results even faster.
  • Implementation of more stock image databases to get the best search results for your purpose - Integrate existing customer asset management databases or public cloud services like Dropbox or one.com
Share this project:

Updates