Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

As Confluence editor doesn’t support image editing, we developed Smart Images to provide Confluence users with a full editing toolkit.

Thinking of what you can do with Smart Images on your Confluence page, we thought of two use cases and we tried to demonstrate them for you.

1/ Onboarding

Smart Images consists of many cool features as it's a full editing toolkit. In this use case, we used image annotation and image mapping.

Meet Creativas' Squad and click on us to see us on LinkedIn.

Smart Images
imgSet{"options":{"skin":"light","display":"slider","isVisibleNearby":false,"enableFullScreen":true,"enableKeyboardNav":true,"showCaption":false,"showArrows":true,"autoHideArrows":false,"randomizeSlides":false,"loop":true,"controlNav":"bullets","imageScaleMode":"fit-if-smaller","thumbs":{"orientation":"horizontal","showArrows":true,"autoHideArrows":false,"transitionSpeed":600},"transition":{"enabled":true,"type":"fade","effect":"easeInOutSine","speed":400},"size":{"type":"responsive","width":800,"height":400},"autoPlay":{"enabled":false,"stopAtAction":false,"pauseOnHover":true,"delay":4000},"gallery":{"type":"grid","grid":{"size":{"type":"responsive","width":100,"height":100},"imageScaleMode":"fill"},"masonry":{"size":{"width":200}}}},"elements":[{"id":"32964614","name":"Frame 167.png","version":6,"options":{"title":"Meet the team","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/32964612/Frame 167.png","option":"linkToImage"},"size":""},"pinturaData":{"cropLimitToImage":true,"cropMinSize":{"width":1,"height":1},"cropMaxSize":{"width":16384,"height":16384},"flipX":false,"flipY":false,"rotation":0,"crop":{"x":0,"y":0,"width":2010,"height":959},"annotation":[{"x":"34.12585703324176%","y":"0.20921335685450287%","text":"Meet the team","color":[0,0.1216,0.2471,1],"fontSize":"4%","fontFamily":"'Courier New', monospace","fontWeight":"bold","fontStyle":"normal","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"03fso86qy","disableErase":true,"fontVariant":"normal"},{"x":"0.23464582924830144%","y":"37.36940412735241%","text":"Co-founder Hichem Jouini","color":[0,0.1216,0.2471,1],"fontSize":"2%","fontFamily":"'Courier New', monospace","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"f8g0fafa6","disableErase":true,"fontVariant":"normal","width":336.7922150721004,"height":91.41019158814066,"textAlign":"center","fontWeight":"normal","fontStyle":"normal"},{"x":"42.02019421588854%","y":"37.2689624887484%","text":"Co-founder Firas Mkaouar","color":[0,0.1216,0.2471,1],"fontSize":"2%","fontFamily":"'Courier New', monospace","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"hxnn6vnq1","disableErase":true,"fontVariant":"normal","width":336.7922150721004,"height":91.41019158814066,"textAlign":"center","fontWeight":"normal","fontStyle":"normal"},{"x":"81.27025644754595%","y":"37.24625429504684%","text":"Digital Marketing Lead Khawla Issaoui","color":[0,0.1216,0.2471,1],"fontSize":"2%","fontFamily":"'Courier New', monospace","fontWeight":"normal","fontStyle":"normal","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"wl73b3zqk","disableErase":true,"fontVariant":"normal","width":402.9577114427857,"height":162.97739216818724,"textAlign":"center"},{"x":"18.960529147143156%","y":"60.04890895995474%","text":"Content Creator/ Marketing Assistant Salma Sahnoun","color":[0,0.1216,0.2471,1],"fontSize":"2%","fontFamily":"'Courier New', monospace","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"dc4dnlteb","disableErase":true,"fontVariant":"normal","width":483.05106850998936,"height":149.72424597289432,"textAlign":"center"},{"x":"59.69109854902721%","y":"60.639458927042945%","text":"Full Stack Developer Ramzi Trabelsi","color":[0,0.1216,0.2471,1],"fontSize":"2%","fontFamily":"'Courier New', monospace","rotation":0,"flipX":false,"flipY":false,"opacity":1,"id":"c6b6m3p5v","disableErase":true,"fontVariant":"normal","width":379.67617873765926,"textAlign":"center"}],"decoration":[],"backgroundColor":[0,0,0,0]},"mapAreas":["<area shape=\"circle\" coords=\"633, 490, 91\" href=\"https://www.linkedin.com/in/salma-sahnoun-767297200/\" title=\"LinkedIn profile\" />","<area shape=\"circle\" coords=\"1848, 268, 85\" href=\"https://www.linkedin.com/in/khawla-issaoui-7472b315b/\" title=\"LinkedIn profile\" />","<area shape=\"circle\" coords=\"1387, 492, 92\" href=\"https://www.linkedin.com/in/ramzi-trabelsi/\" title=\"LinkedIn profile\" />","<area shape=\"circle\" coords=\"1009, 270, 97\" href=\"https://www.linkedin.com/in/firas-mkaouar-7267aa9/\" title=\"LinkedIn profile\" />","<area shape=\"circle\" coords=\"175, 266, 88\" href=\"https://www.linkedin.com/in/hichemjouini/\" title=\"LinkedIn profile\" />"]}]}


2/ Product Presentation

Get to know Creativas' apps by clicking on the concerned image within the slider. Each app will redirect you to its documentation where you can find every information you need.

We used image clicking and slider creation in this use case.

Smart Images
imgSet{"options":{"skin":"dark","display":"slider","isVisibleNearby":false,"enableFullScreen":true,"enableKeyboardNav":true,"showCaption":true,"showArrows":true,"autoHideArrows":false,"randomizeSlides":false,"loop":true,"controlNav":"bullets","imageScaleMode":"fit-if-smaller","thumbs":{"orientation":"horizontal","showArrows":true,"autoHideArrows":false,"transitionSpeed":600},"transition":{"enabled":true,"type":"fade","effect":"easeInOutSine","speed":200},"size":{"type":"responsive","width":800,"height":400},"autoPlay":{"enabled":false,"stopAtAction":false,"pauseOnHover":true,"delay":4000},"gallery":{"type":"grid","grid":{"size":{"type":"responsive","width":100,"height":100},"imageScaleMode":"fill"},"masonry":{"size":{"width":200}}}},"elements":[{"id":"32964630","name":"Screenshot 2021-10-11 162959.png","version":null,"options":{"title":"Smart Courses for Confluence","target":{"enabled":true,"link":"https://help.creativas.io/lms","option":"url"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"32964631","name":"Screenshot 2021-10-11 163131.png","version":null,"options":{"title":"Smart Images for Confluence","target":{"enabled":true,"link":"https://help.creativas.io/smart-images/smart-images-documentation-8912995.html","option":"url"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"32964632","name":"smart tables marketplace.png","version":null,"options":{"title":"Smart Tables for Confluence","target":{"enabled":true,"link":"https://help.creativas.io/tab/smart-tables-documentation-1179840.html","option":"url"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"32964633","name":"smart terms glossary marketplace.png","version":null,"options":{"title":"Smart Terms for Confluence","target":{"enabled":true,"link":"https://help.creativas.io/terms/smart-terms-documentation-5570567.html","option":"url"},"size":""},"pinturaData":{},"mapAreas":[]}]}