Turn your Affinity Boardroom banner into an animated image gallery in just a few minutes!
View the finished example page and then return here to learn how you can make your banner come to life.
Each Affinity Boardroom page comes with a banner image that you can replace with an Image Gallery Magic 2 (IGM2) animated banner. This tutorial will show you how.
This tutorial requires PVII Affinity, the Affinity Boardroom theme pack, and IGM2
To make the tutorial easier, we've prepared a zip file of 4 images that you can use for practice:
Unzip the images and place them inside the art folder of your Affinity site.
Open your Boardroom page. Click on the banner image and then switch to Code View:
<div id="banner"><img src="art/art-room.jpg" alt="" class="scalable"></div>
Remove the image and leave your cursor inside the opening and closing banner DIV tags:
<div id="banner">Cursor Here </div>
Open the IGM2 interface.
Set Thumbnails, Caption, and Description to None.
Set animation to Ken Burns and deselect (un-check) Auto Set Ken Burns.
Click the Browse... button to the right of the Image Path box and browse to your art folder.
Select art-room.jpg as your first image.
Click the Add button and add the remaining 4 art-room images as depicted in the screen capture below.
Select each image in your list and set its Ken Burns Start/Finish parameters as follows:
Start: Vertical: Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5
Start: Vertical: Center Horizontal: Right Zoom: 1.4 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1
Start: Vertical: Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5
Start: Vertical: Center Horizontal: Left Zoom: 1.5 Duration: 8 (seconds)
Finish: Vertical: Top Horizontal: Center Zoom: 1
Start: Vertical: Center Horizontal: Right Zoom: 1.45 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.1
Click the Next: General Gallery Options button
Leaving all other options set to their default values, set Paginator to Below Image with a Pause/Play Control only.
Set Show Initial Image and Pause Time to 7800 (ms).
Set Style Theme to 03-Style Three
Click OK.
In your Affinity CSS file, locate the #banner rule and remove the border-bottom declaration:
#banner {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
In your p7IGM03.css file, locate the .p7IGM03_FSwrapper rule and change the border property to border-bottom:
.p7IGM03_FSwrapper {
position: relative;
padding: 0px;
overflow: hidden;
border: 1px solid;
border-bottom: 1px solid;
}
In your p7IGM03.css file, locate the .p7IGM03 .p7IGM-canvas rule and add a vertical-align property set to bottom:
.p7IGM03 .p7IGM-canvas {
background-color: transparent;
vertical-align: bottom;
}
Save your files and pat yourself on the back. You are finished!
For a Ken Burns animation to work best, your images should all be the same size. Image width should be equal to or greater than the max-width of your layout, which is 1360 pixels. We made the practice images 1440 pixels wide. The Ken Burns parameters were set to provide a pleasing and well-orchestrated effect as one image transitions into the next. Please see the IGM2 user guide for a complete discussion of the Ken Burns settings. Of course, if you do not have time to play cinematographer, you can leave the Ken Burns set to the default random mode.
A Groundbreaking Addition to your Affinity Toolbox
Boardroom Theme Home Page | Boardroom Examples | Buy Boardroom Now ($45)
Affinity Boardroom extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Boardroom is mobile-ready and responsive. Boardroom comes with a fully commented CSS file to assist you in customizations. Of course, PVII support is always ready to help you whenever needed. Boardroom also comes with a suite of custom Dreamweaver Snippets that enable you to customize the row and column configuration of your pages.