Today, a huge number of illustrations related to marketing, product updates, internal communications, corporate news are available in stock photos. Such images evoke the necessary emotions from readers and also, such images will help illustrate abstract concepts using photos of specific objects. But finding the right image can be difficult and time-consuming... The Imagine plugin solves that!

We created a plugin to import images into Confluence from Unsplash so that companies make to creates awesome documents and increase reader engagement. You can also use this plugin just for inspiration!

What it does

With the Imagine plugin and Unsplash, Confluence users have access to a huge number of images right directly on the Confluence page editor. Unsplash contains over 2 million free photos - in high-resolution, in different genres, and on different topics.

Search in the Unsplash database is carried out using a convenient Imagine macro: users can select photos by keywords, and then immediately add the image they like to the Confluence page, preset the desired photo size.

Images can be searched and inserted on the Confluence page editor as simple:

  1. Add Imagine macro to your Confluence page (Type / and then choose Imagine macro).
  2. Enter the name of what image you’re looking for.
  3. Choose a favorite image from the enormous Unsplash catalog!

After an image is inserted, click the image and move the slider to resize it. You can also position the image relative to the center of the Confluence page using the handy controls.

The Unsplash license assumes that you are free to use these images for commercial and non-commercial purposes. No permission needed (though attribution is appreciated!)

How we built it

Imagine is built on Atlassian Forge using Custom UI. To build UI we used Atlaskit and Styled Components libraries. Inside Atlassian Forge we used a macro module. Our app connects to Unsplash API, which implements searching images by keywords and getting high-resolution photos. To store data in each macro we used Storege API by Forge.

Challenges we ran into

One of the most significant challenges was the non-scaling of macros. We hope it will be fixed soon as well as positioning macros relative to the page. Another significant challenge was to create a modal window inside macros. We didn't solve this problem. It would be great to provide clear examples in the documentation. It also wasn’t easy to come up with a good solution for use macros config to our goals because of limited UI kit components and the impossibility implement Custom UI inside of config tab, so we realized configuration inside macros body. Another problem is the impossibility of editing macros in the page editor (only in read view after inserting macro).

Remote work was a particularly unique challenge faced by our development team at this hackathon, but we were able to work together productively thanks to Jira, Confluence, Teams, and Telegram - these tools made planning and our daily meetings easier. We also worked closely with our marketing team to better understand the needs of future Imagine plugin users.

Accomplishments that we're proud of

We are very excited to be able to present Imagine plugin as a finished product to an audience. We are proud of the energy put into this project and its end results. The early reviews are great and we get a lot of compliments from small and large companies that really want to use the Imagine plugin.

What we learned

  • We found out how to create apps on Forge Atlassian.
  • We learned how to use the Using Forge UI kit and Atlaskit elements to maintain the look and feel of Atlassian products.
  • Implementing third-party APIs.
  • Working with Forge Storage API.

What's next for Imagine — Photos and image library for Confluence

We plan to continue to support and grow Imagine application post-hackathon, regardless of whether we win. Soon our development team to expand the list of integrations with popular providers of stock photos, illustrations, and videos such as Adobe Stock, Shutterstock, iStock, Depositphotos, Pexels, etc. With just the click of a button, you will create beautiful visual content for any Confluence page!

Built With

+ 39 more
Share this project: