Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

The Responsive page meets the Adaptive Image Gallery

PVII Adaptations and Image Gallery Magic 2: They just fit

Adaptations Tutorials Home | IGM2 Home

PVII Adaptations produces responsive Web pages that automatically adjust to the size of the browser window or the type of device being used. When you need to deploy an image gallery in a responsive page you're going to want a powerful and responsive gallery. Image Gallery Magic 2 is all that and more.

This tutorial is in 2 parts:

You will create a default Adaptations page and customize the page layout. Then you will add an IGM2 image gallery to your customized page. Part 1 requires that you have purchased and installed the Adaptations Responsive Page Pack. Part 2 requires that you own Image Gallery Magic 2.

Download the tutorial folder

The adaptations-igm-tutorial folder contains a folder of images that you can use for your gallery. The images are sized and optimized for the type of gallery you will create. After downloading the folder, unzip it and place it inside a defined Dreamweaver Web site.

Download the tutorial folder

Part 1

In part 1 you will create an Adaptations page and then customize it.

Create your page

In Dreamweaver, choose File > New PVII Page Pack and select Adaptations

The Adaptations UI will open

For Page Design select 02: 3 Columns Max Width

For Menu Type select Static CSS Menu - Single Level. If you own Pop Menu or Tree Menu Magic, you may select one of those instead.

The Save As dialog will open.

Browse to your adaptations-igm-tutorial folder and save the page as finished.htm

Click Save

Your new Adaptations page will be created and opened.

That was easy!

Customize the layout

You will swap positions of the sidebar and navigation columns, change the color of the main content column, and remove the 3 column structure inside the main content column.

Swap the sidebar and navigation columns

The default position of these columns, sidebar first and navigation second, is accomplished using CSS positioning. The natural positions of these elements, in the page markup, is actually navigation first, then the sidebar. It is this way so that in narrow windows and mobile devices we can move the navigation menu to the top of the page.

Open your p7adapt-02.css file and locate these 2 rules:

.sidebar {
width: 20%;
float: left;
position: relative;
left: -20%;

line-height: 1.5em;
}
.navigation {
width: 20%;
float: left;
position: relative;
left: 20%;

}

Remove the position and left properties from each rule so that look like this:

.sidebar {
width: 20%;
float: left;
line-height: 1.5em;
}
.navigation {
width: 20%;
float: left;
}

Save your CSS file.

Your page will now look like this:

Remove the 3-column structure in the main column

Place your cursor Inside the first column in the 3-column structure—the one with the heading Column 1.

On the Tag Selector bar that runs along the bottom of Dreamweaver's window (above the Property Inspector) locate the tag <div.inner-columns-wrapper> and click it. The entire 3 column inner structure will become highlighted.

Press your Delete key to remove the structure. Your page will now look like this:

Jazz up the sidebar and main content text

Adaptations comes with a custom style class called fancy-quote, which uses the embedded Federo font face (see the Adaptations user guide for details). Let's assign it to the paragraph text in the sidebar and the main column.

Place your cursor inside the sidebar paragraph text and switch to code view. Locate the opening paragraph tag just below the level 2 heading Adaptable:

Assign the fancy-quote class to the paragraph tag:

Repeat the process to assign the fancy-quote class to the paragraph in the main column.

The fancy-class text will be rendered in the Federo font face. Preview in a browser or Live View, while connected to the internet, to see the font rendered. The only little detail that needs tending to is the font color. Let's change it to white.

Locate the following rule in your style sheet and change the color value to #FFF (white):

.fancy-quote {
font-family: "Federo", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
letter-spacing: 0.15em;
margin-bottom: 15px;
color: #FFF;
}

Of course, the fancy-quote text in the main column is now invisible (white on white), but we'll fix that in the next step.

Color the main column black

To color the main column black locate the following rule in your p7adapt-02.css style sheet and change the background color and color properties to #111 and #7A96AD:

.main-content .content {
padding: 20px 32px;
background-color: #111;
font-size: 1em;
border-radius: 0px 5px 5px 0px;
color: #7A96AD;
}

Your page will now look like this:

Now we're ready to build the gallery.

Save your page.

Part 2

In part 2 you will add an Image Gallery 2 gallery to your Adaptations page.

Create the gallery

In Dreamweaver, place your cursor at the end of the paragraph in the main column—just to the right of the ending period.

Open the IGM2 interface via the Insert Panel/Bar (PVII category) or by using the Insert menu.

Set Thumbnails to Below Image

Set Caption to None | Set Description to None

Set Animation to 8-Full Fit Cross Fade

Leave all other options default.

Click the Import button.

The Import dialog will open

Click the Browse button next to the Full Size Image Folder box

Browse to the fullsize folder inside the p7IGM_images folder and select the first image.

Click OK

Click the Browse button next to the Thumbnail Image Folder box

Browse to the thumbs folder inside the p7IGM_images folder and select the first image.

Click OK

You are returned to the Import Images dialog, along with your images.

Click Select All to select all of the images, then click the OK button

You are returned to the main IGM2 interface with your images.

Click the "Next: General Gallery Options →" button

Set Toolbar Below Image and check the following Toolbar Controls: First, Previous, Pause/Play, Next, Last, and Fullscreen.

For Cycles check Play Continually

Leave all other options default.

Click OK to build the gallery.

Your page now looks like this:

Have a look in a browser:

Good job!

About the images

The images we included were optimize to a size of 1440 x 810 pixels. This is an HD (16:9) aspect ratio ideal for modern widescreen monitors and mobile devices. The size was also chosen to deliver a fairly crisp upsizing when viewing the gallery in full-screen mode. If your images are more conventional or differ in aspect ratios (landscape and portrait) you would want to choose an animation method other than Full Fit Cross Fade or Ken Burns and you would also want to choose the fixed height option. You can read more about how to work with images in the IGM2 user guide.