Rotate Content Macro

Last updated

This macro creates a visual rotation of content from blocks on another page. The rotated content can be text or graphics or a combination of both.

In Theme Press, we've simplified the process of rotating content. No need for custom code. To create this type of content, you need:

two Confluence pages
- the page that will display the content
- the page that will hold the content to be displayed
the Rotate Content macro
content

Separate Pages

The Rotate Content macro displays content that lives on another page. As an example, look at the simple example below; it holds the macro. The content itself lives on this page. A screenshot of the content page is to the right. Notice how each piece of rotating content lives within its own block.

Macro

The macro provides several options for configuring how to display and rotate content. Most important of these parameters is Page Title where you define the location of content. Other options include time delays, transition types and navigation controls. For details on each parameter, see the Macro Parameters block below.

Content

The Simple Example displays text-only content. You can also display (1) images or (2) text and images. Additionally, you can design blocks that contain the macro and/or content. Review the Best Practices block for tips on design and usage.

Use Case

In addition to the Simple Example below, you can see this macro in use on the Theme Press Demo Space home page.

Parameter	Description	Value(s)	Example(s)
Page Title	defines a page from which to display block content	page title	Theme Press Macros PRESS:Theme Press Macros
Initial Delay	defines the number of seconds to wait before the first transition	seconds	6
Rotation Delay	defines the number of seconds to wait between transitions	seconds	6
Transition Type	defines the type of animation to use between transitions	fade instant slideUp slideRight slideDown slideLeft scrollUp scrollRight scrollDown scrollLeft	fade
Display Sequentially	toggles between showing content in order or randomly; select this option to show the navigation controls	checkmark
Extract Content from Blocks	toggles between showing (1) the block and its content or (2) the content only	checkmark
Vertical Position for Controls	defines the position of the navigational controls relative to the top or bottom of the block	top bottom	top
Vertical Margin for Controls*	creates space at the top or bottom of the navigational controls; relates to the Vertical Position setting	pixel	20px
Horizontal Position for Controls	defines the position of the navigational controls relative to the left or right of the block	left right	left
Horizontal Margin for Controls*	creates space to the left or right of the navigational controls; relates to the Horizontal Position setting	pixel	20px
Use Images for Controls	toggles between using colors or images for the navigational controls; attach your images to the source page and name each image with the same name as its related block; uour designer styles these controls in the Theme Designer	checkmark
Image Height	defines the height of each control image	pixels	36
Image Width	defines the width of each control image	pixels	36

* Required when defining a vertical/horizontal position.

rotate-content

SIMPLE EXAMPLE

This example is rotating content from the Content for Rotate Content Macro Simple Example page.

If you want to rotate content...

Link

Try the Rotate Content Macro.

Link

No custom content needed.

Link

Content Size

When rotating any type of content, you should consider the space it fills. For instance, let's say you insert two images, each in their own block. The first image is 340 pixels high. The second image is 200 pixels high. When the macro displays these images, the containing block (the block holding the macro) adjusts its height to match that of each image. The same occurs for text.

You have a few ways to resolve this issue. One option is to resize your images to the same height. Another option is to set the height of the macro's block.

Why should I worry about the height of my content or block?

As the height of a block changes to fit its content, any content that follows will move up and down the page.

Macro Parameter: Extract Content from Blocks

Theme Press treats background images as a part of the containing block. This fact affects how you configure the macro's Extract Content From Blocks parameter. Leave this box unchecked if you want background images to appear in the rotator.

Block Padding

When not extracting content, be sure to set the macro's block padding to 0px 0px 0px 0px. These values ensure the content blocks expand to fill the macro block.

Block Design

You may wonder whether to design (1) the block holding the macro or (2) the blocks holding the source content. Use the former for styles affecting all content uniformly. Consider the latter when each piece of content needs a different design.

Navigation Controls

The macro above shows three navigation icons or controls. These controls allow you to focus on a specific piece of content.

Show Controls

To see the controls, check the box for the macro's Display Sequentially parameter.

Appearance of Navigation Controls

Within the theme, your designer adjusts the appearance (size, color, border) of the navigation controls.

Circular Navigation Controls

To achieve a circular control, use the same value for the following fields in the Designer:

Height
Width
Corner Radius

You can also show images for the controls. For example, try cropping a portion of a rotating image or reducing its size to a thumbnail. To add images:

Open the page containing the content.
Name each block on the page.
Name each thumbnail image file using the same name as the block names.
Attach the image files to the page containing the content.
Open the page containing the macro.
Edit the macro.
Select the Use Images for Controls checkbox.

Step 2
Steps 3 - 4

Size of Image Controls

If needed, the macro provides parameters for adjusting the height and width of image controls.

Location of Navigation Controls

You can adjust the position of the navigation controls. To do so, use the following parameters:

Vertical Position for Controls
Vertical Margin for Controls
Horizontal Position for Controls
Horizontal Margin for Controls

The vertical and horizontal positions of the controls above are set to bottom, left. The vertical margin is 10px from the bottom. The horizontal margin is 15px from the left.

Margin Settings

When selecting vertical and horizontal positions, you must include margin settings for each.

Hide Content from Page Tree

Pages that hold rotating content appear when using any page tree macro. To hide these pages, you can move them:

outside of their hierarchy
to a utility space

Page tree

Rotate Content Macro

Rotate Content Macro

User Guide

This macro creates a visual rotation of content from blocks on another page. The rotated content can be text or graphics or a combination of both.

Separate Pages

Macro

Content

Use Case

SIMPLE EXAMPLE

If you want to rotate content...

Try the Rotate Content Macro.

No custom content needed.

Content Size

Macro Parameter: Extract Content from Blocks

Block Design

Navigation Controls

Appearance of Navigation Controls

Location of Navigation Controls

Hide Content from Page Tree

Still need help?

How To Do It

Brikit Platform

Brikit Services