Creating content similar to Atlassian Support

[Brendan Freestone]

Hi - I've started using Scroll Viewport app for my confluence, similar to Atlassian.

Does anyone know how to go about creating the cards on their homepage? Is it a plugin, shortcode? etc?

Talking about the 6 main boxes on this page:

https://support.atlassian.com/jira-software-cloud/

[Matt Reiner _K15t_ · Accepted solution]

@Brendan Freestone

You could use the Help Center theme, which creates cards like this automatically. You can see them in action on our help site.

These cards are created for each space in your help center. If you'd like a tile that takes users somewhere other than a space in the help center, you could add a space with the information to generate the card and then add a redirect macro on the home page of the space to wherever you'd like users to be sent.

[Brendan Freestone]

Hi Matt - that's perfect - but what content do you have on that homepage do generate  those cards?

My heirachy as two items at the top - and the page just displays an accordion rather than cards.

[Brendan Freestone]

Actually I found it - when editing the theme, in theme properties settings

- spaceHomePage.topicType=tiles

Thank you for your help!

[Ajay _view26_]

@Brendan Freestone ,

We too use Scroll View Port for our Help Documentation. 

You would need to customize the velocity template based on your styling . Attached is a reference code of our Home page which uses cards.

##========== Search section ================================
<header id="home_header" class="v26-home-header-search">
<section>
<h1>$repository.name</h1>
$include.template("/partials/search_snippet.vm")
</section>
</header>
##
##========== Rest ===============================================
##
<div id="ht-wrap-container" class="sp-grid-float" style="background: #FAFBFC;">
##
##======== Tiles for each child pages with links ==============
##
<article class="ht-content">
<div id="main-content" class="wiki-content">
<div class="sp-grid-section">
<div class="sp-grid-cell sp-grid-100">
##========
#set( $vp = "v26Pages")
#set( $map = {
"${vp}_default" :'default',
"${vp}_faqs" :'faq',
"${vp}_get_support" :'get-support',
"${vp}_getting_started" :'getting-started',
"${vp}_rest_api" :'rest-api',
"${vp}_setup_and_administer" :'setup-administer',
"${vp}_visualize_and_analyze" :'analyse-visualize',
"${vp}_publish_reports" :'viewing-insights-publish-reports'
} )
##========
##
## RECTANGLE CARDS
##
<div class="v26-row landing-page-tiles">
#foreach($item in $page.children)
<div id="second"class="v26-panel" style="width:400px">
<div style="padding: 15px 0;">

## --------- Set card image name ---------
#set( $indexName = $item.title.toLowerCase().replace(" ", "_"))
#set ($varName = "${vp}_${indexName}")

#set ($imageName = '')
#set ($str = '')
#set ($str = $map.get(${varName}))

#if((!!$str) && $str.length() >1)
#set ($imageName = $map.get(${varName}))
#else
#set( $imageName = 'default')
#end
## ------------------------------------
<img src="${theme.baseUrl}/assets/img/${imageName}.svg/" alt="..." class="img-fluid img-responsive">
</div>

<section class="panelContent" style="padding-left:25px;">
<h1><a href="$item.absoluteLink">$item.title</a></h1>
<ul style="list-style-type: none;padding: 0;">
#foreach($sub in $item.children)
## --- limit to 2 sub pages in case of FAQs ------------
#if(($item.title.toLowerCase() != 'faqs') || ( $item.title.toLowerCase() == 'faqs' && $velocityCount < 3))
<li><a href="$sub.absoluteLink">$sub.title </a></li>
#end
#end
</ul>
<p style="text-align: center;"><br></p>
</section>
</div>
#end
</div>
## end card
</div>



</div>
## ==== $page.content (Add later if required) =============
</div>
</article>

##
##======== Footer =============================================
##
$include.template("/include/include-footer.vm")
</div>

[Brendan Freestone]

Thank you for the response.