Sidebar

The sidebar shows up beside most pages in CalmView, including the list of search results, the advanced search screen, the record view, the hierarchy browser, and others. It allows you to provide more content to visitors, including a record chosen at random from the Record Showcase, a list of useful links, and social media content from sites like Twitter and Instagram. Any of the sidebar sections can be turned off if you prefer. These are all configured in CalmViewRefreshConfig.xml, a file in the \CalmView\Configuration folder.

A list of search results in CalmView, showing the sidebar at right, featuring a record from the showcase, useful links, a Twitter feed, and an Instagram picture

Activating sections of the sidebar

The code to activate/deactivate the sections of the sidebar is in the SectionsCollection section. The sidebar shown above is configured as follows:

<SectionsCollection>

<Sections>

<Section name="ShowcaseItem" enabled="true"/>

<Section name="WhatsNew" enabled="true" maxItems="4"/>

<Section name="UsefulLinks" enabled="true"/>

<Section name="InstagramCard" enabled="true"/>

<Section name="TwitterCard" enabled="true"/>

<Section name="Youtube" enabled="true"/>

<Section name="SocialContent" enabled="true"/>

</Sections>

</SectionsCollection>

The 'Section' element with name 'ShowcaseItem' controls the section that extracts a record at random from the Record Showcase. The sections with the names UsefulLinks, TwitterCard, and InstagramCard control the Useful Links, Twitter, and Instagram sidebar sections, respectively. To turn a sidebar section on and off, change enabled to 'true' or 'false'.

Useful Links content

The code to edit the Useful Links section of the sidebar is in the UsefulLinksCollection section. The sidebar shown above is configured as follows:

<UsefulLinksCollection>

<UsefulLinks>

<UsefulLink title="The National Archives" url="https://discovery.nationalarchives.gov.uk/"/>

<UsefulLink title="ArchivesHub" url="https://archiveshub.jisc.ac.uk/"/>

<UsefulLink title="AIM25 (London archives)" url="https://aim25.com/"/>

<UsefulLink title="Europeana" url="https://www.europeana.eu/portal/en"/>

<UsefulLink title="Internet Archives" url="https://archive.org/"/>

</UsefulLinks>

</UsefulLinksCollection>

For a link to appear in the Useful Links section, there must be a UsefulLink element for it. It is possible to add any number of links, but be mindful of how much space they will take up. To add a new Useful Link, add a new UsefulLink element line to the list, and to remove a Useful Link, remove its UsefulLink element line from the list. Links will appear on screen in the order they are listed here.

The content after 'title' is what is displayed for the user to click. 'url' is the address of the website that the user will be taken to.

Twitter content

Entire feeds from Twitter (of all the tweets from a given user or a list of users) can be added to the sidebar. The code to link to the Twitter feed is in the MediaSourceCollection section. The section shown above is configured as follows:

<MediaSourceCollection>

<Mediasources>

<MediaSource name="Youtube" source="https://www.youtube.com/embed/Bo_30a9_JLc"/>

<MediaSource name="Twitter" source="https://twitter.com/axiellalm"/>

<MediaSource name="Instagram" source="https://www.instagram.com/p/BxjTTlrC_Ra/"/>

<MediaSource name="Facebook" source="https://www.facebook.com/axiellalm/"/>

</Mediasources>

</MediaSourceCollection>

The 'MediaSource' element with the name 'Twitter' controls the Twitter feed. To change the feed you are linking to, find the embed URL of either the Twitter profile (like the Axiell profile used above) or Twitter list you would like to link to. For a profile, the embed link should be the same as the link you would use to access the feed in our internet browser. Paste that URL in the 'source' section.

Instagram content

A specific post from Instagram can be added to the sidebar. The code to link to the image you would like to embed is in the MediaSourceCollection section. The section shown above is configured as follows:

<MediaSourceCollection>

<Mediasources>

<MediaSource name="Youtube" source="https://www.youtube.com/embed/Bo_30a9_JLc"/>

<MediaSource name="Twitter" source="https://twitter.com/axiellalm"/>

<MediaSource name="Instagram" source="https://www.instagram.com/p/BxjTTlrC_Ra/"/>

<MediaSource name="Facebook" source="https://www.facebook.com/axiellalm/"/>

</Mediasources>

</MediaSourceCollection>

The 'MediaSource' element with the name 'Instagram' controls the Instragram post. To change the post you are linking to, find the embed URL of the post you wish to link to (on Instagram to find this you generally need to open the post, click the three-dots button, and click 'Embed') and copy just the actual URL (that begins with http), ignoring the rest of the code that comes along with it. Paste that URL in the 'source' section.

➤