Page tree

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.

ParameterDescriptionValue(s)Example(s)
Page Titledefines a page from which to display block content
  • page title
  • Theme Press Macros
  • PRESS:Theme Press Macros
Initial Delaydefines the number of seconds to wait before the first transition
  • seconds
  • 6
Rotation Delaydefines the number of seconds to wait between transitions
  • seconds
  • 6
Transition Typedefines the type of animation to use between transitions
  • fade
  • instant
  • slideUp
  • slideRight
  • slideDown
  • slideLeft
  • scrollUp
  • scrollRight
  • scrollDown
  • scrollLeft
  • fade
Display Sequentiallytoggles between showing content in order or randomly; select this option to show the navigation controls
  • checkmark
 
Extract Content from Blockstoggles between showing (1) the block and its content or (2) the content only
  • checkmark
 
Vertical Position for Controlsdefines 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 Controlsdefines 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 Controlstoggles 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 Heightdefines the height of each control image
  • pixels
  • 36
Image Widthdefines 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

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:

  1. Open the page containing the content.
  2. Name each block on the page.
  3. Name each thumbnail image file using the same name as the block names.
  4. Attach the image files to the page containing the content.
  5. Open the page containing the macro.
  6. Edit the macro.
  7. 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

Still need help?