Share

TEN STEPS TO BUILDING A PHOTO GALLERY WEBSITE WITH DREAMWEAVER CC

By Dan Carr

There are many ways to get a photo gallery online, but there’s nothing quite like building it yourself. In this article, you’ll learn how to design a clean, sophisticated photo gallery website with a few fancy flourishes that looks great across devices—desktop and laptop computers, tablets, and phones. Along the way, you’ll learn how to use Adobe Dreamweaver CC and acquire skills you can take to future projects.

Your site will be powered by Web-standard technologies, such as HTML5, CSS3, and JavaScript. That’s important because you’ll use this approach to create content that can be seen in any modern browser.

And because you can’t assume that every site visitor is on a traditional computer, your gallery site will also be responsive; that is, you can read and navigate it across a range of screen sizes (see Figure 1). Dreamweaver’s Bootstrap framework provides an easy way to learn and build with responsive design. 

View the live demo site.

 

Figure 1. Your photo gallery grid will scale to the size of the screen it’s viewed on.

Before you start to follow the steps below, download the project files. You’ll work with the Dw-gallery folder as your project folder. If you run into problems, you can reference the Dw-gallery-completed files.

Use the following links to download the project assets:

 

STEP 1: SET UP A NEW SITE WITH BOOTSTRAP 

Always start your projects by creating a new Site, so that Dreamweaver knows where to add files. Use the Dreamweaver workspace to speed through the process (see Figure 2).

Here’s how to create a new Site:

1.   Choose Site > New Site.

2.   In the Site Setup dialog box, add the following values:

      a.   Site Name: Dw-gallery

      b.   Local Site Folder: Dw-gallery (browse for Dw-gallery on your desktop)

3.   Take a minute to review the supplied assets. An images folder contains the 12 images you’ll use in the project. You can also add your own images at any point.

4.   Right-click on the Site folder and choose New Folder. Name the new folder css (see Figure 3).

Figure 2: The Dreamweaver CC workspace

Figure 3. The Files panel showing the project folder and assets

As you work through the project, you’ll save your custom CSS in a separate file to keep the code manageable. You’ll create the CSS file first, so you can attach it to your HTML pages as you create them.

Here’s how to create a CSS file:

1.   Choose File > New.

2.   In the New Document dialog box, choose the CSS document type.

a.   Click the Create button to create the file.

3.   Save the file into the css folder.

a.   Name the file styles.css.

b.   Click the Save button and confirm that the file appears in the css folder in the Files panel (if you don’t see it, click the refresh button).

The gallery project uses a single webpage in its design, so you’ll create an HTML page, which automatically adds Bootstrap to the project. You’ll configure the Bootstrap framework as you create the file (see Figure 4).

Here’s how to create an HTML page with Bootstrap:

1.   Choose File > New.

2.   In the New Document dialog box, choose the HTML document type.

a.   Click on the Bootstrap tab, and enter the following values:

 i.     Bootstrap CSS: Create new

 ii.     Attach CSS: styles.css (browse for the styles.css file)

 iii.     Design: Uncheck the pre-built layout option

b.   Click the Create button to create the file.

Figure 4. The New Document dialog box showing Bootstrap Options

Figure 5. The project folder with the Bootstrap files, the HTML file, and the CSS file

3.   Update the page title.

a.   In Code View, take a moment to review the boilerplate code Dreamweaver provides. You can see that Bootstrap is set up and you’re ready to start adding content.

b.   Find the title tag at the top of the code, and add the title “Photo Gallery”.

4.   Save the file into the root of the project folder.

a.   Name the file gallery.html.

b.   Click the Save button. The Bootstrap framework is automatically added to the project folder. Confirm that all the files are in place (see Figure 5).

Now you can use Bootstrap on the gallery page and any other pages you create. You may be prompted by the In-App Update feature when a new version of Bootstrap becomes available. If that happens, update, clean out your project folder, and restart Dreamweaver to start creating pages. 

 

Figure 6. The 12 sections of the Bootstrap grid with overlying rows and columns

STEP 2: CREATE A GRID CONTAINER AND ROW LAYOUT

Now you’re ready to code. You’ll begin by creating a grid for your photo thumbnails. You’ll use Bootstrap components to initially create the layout, and you’ll learn about using containers and grids to position your content (see Figure 6).

Figure 7. The Bootstrap Components section of the Insert panel

Bootstrap components are HTML and CSS widgets that form some type of common screen element (buttons, lists, containers, form elements, etc.). There are pre-configured Bootstrap components in Dreamweaver’s Insert panel, which simplifies generating content and learning how everything works (see Figure 7). 

Here’s how to add a Container-fluid component:

1. In Code View, click just below the opening body tag to select the place where you want to add the component code.

2. In the Insert panel, switch to the Bootstrap Components section using the menu at the top of the panel.

3. Click on the Container-fluid component to add the code.

a.  Take a look in Code View to see that the container is simply a div tag with the “container-fluid” class attached to it.

4. Add an id attribute to the div, with a value of “image-grid”.

a. You’ll use the div id as a selector in CSS.

Here’s how to add a Grid Row with Column component:

1.   In Code View, you should see that the container div is selected. If not, click on it to select it.

2.   In the Insert panel, click on the Grid Row with Column component to add it to the page.

a.   The Insert rows and with columns dialog box appears.

i.  Change the No. of columns to add field to 1.
ii. Press OK.

The code should look like this:

<div id=”image-grid” class="container-fluid">
          <div class="row">
                      <div class="col-lg-12"></div>
           </div>
</div>

The three levels of div tags define the fluid container, the first row in the grid, and the first column in the grid. The Bootstrap grid system is defined by 12 vertical sections. The row spans all 12 sections. The column spans a specified number of sections over the underlying grid. In this example, the column spans all 12 sections at the large size (notice the pattern used in the class name: col + size + span). You can attach multiple classes to a column to set its size at four breakpoints, generically referred to as large (lg), medium (md), small (sm), and extra small (xs).

Here’s how to update the sizing logic of the column:

1.   Update the column div with the following three classes:

<div class="col-lg-3 col-xs-6 custom-col"></div>

The first class (col-lg-3) sets the column to span three sections of the grid on a large screen, the second class (col-xs-6) sets the column to span six sections on an extra small screen, and you’ll create and use the third class (custom-col) to add padding to the column.

To style the code with CSS, you’ll start by setting the background color of the page and adding padding and margins for the grid (see Figure 8).

Figure 8: The fluid container selected in Live View

Here’s how to add CSS:

1.   Click on the styles.css link above Live View to switch Code View to view the CSS file. You can click on the Source Code link to get back to the HTML view. This is a great way to navigate code as you work.

2.   Copy and paste the following CSS into the CSS file, in Code View:

body{

      background-color:#040607;

}

#image-grid{

      margin:6px;

}

.custom-col{

      padding:6px;
      overflow:hidden;

}

Beyond the grid logic, the important thing to note is that you started the grid layout in a container. The container can be fluid (and flex to the edges of the screen), or it can be constrained to a column (in the center of the screen). 

 

Figure 9: The basic thumbnail design

STEP 3: CREATE A THUMBNAIL IMAGE FOR THE GRID

In this section, you’ll create a template for the selectable thumbnails that will compose the image grid (see Figure 9). You’ll use an anchor tag surrounding an image tag to create the basic layout.

Let’s move to Code View and add the tags. You may notice that the anchor tag includes the “img-button” class and the image tag includes the “img-responsive” class. The img-button class is a custom class you’ll define. The img-responsive class is supplied by Bootstrap and enables the image to scale along with the grid. 

Here’s how to add HTML code:

1.   Click the Source Code link at the top of the workspace to return to HTML in Code View.

2.   Add the following code to the HTML file, inside the column div tags.

<a href="#" class="img-button">

   <img src="images/photo-01.jpg" alt="Thumbnail" class="img-responsive"/>

</a>

Here, you’re sizing the thumbnail based on the responsive size of the image in the grid layout. As the image size flexes with the grid, the anchor tag and surrounding column size themselves along with it, and the rest of the design displays in a relative way.

Now, let’s create the img-button class. You’ll use this selector to target elements within the thumbnail, but it also needs to have its cursor turned on so it looks selectable.

Here’s how to add CSS code:

1.   Copy and paste the following code into the CSS file:

.img-button{

   cursor:pointer;

}

At this point you can see a single photo in the grid, and if you move your cursor over it, you’ll see the pointer.

 

Figure 10: The thumbnail with caption

STEP 4: ADD A CAPTION TO THE THUMBNAIL

You can add a caption to the thumbnail template by adding a few more tags inside the anchor tag. In this step, you’ll use CSS to create a gradient background for the caption and to precisely position it above the image (see Figure 10).

Follow these steps to add HTML code:

1.   Add the following code inside the anchor tag, after the image tag:

<div class="caption">

    <p>Caption text goes here</p>

 </div>

The additional code is straightforward: The div creates the background for the caption and includes the “caption” class that you’ll create in a moment. The paragraph tag contains the caption text.

Before you add styles to the caption class and paragraph tag, let’s link to the Open Sans Google Web Font. This will enable the use of a unique sans-serif font.

Here’s how to add a web font:

Copy and paste the following code into the top of the CSS file:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

/* font-family: 'Open Sans', 'sans-serif'; */

With the web font in place, you’re ready to style the caption background and text. The background is defined with a gradient, and the text uses the Open Sans web font.

Follow these steps to add CSS code:

1.   Copy and paste the following code into the bottom of the CSS file:

.img-button > .caption{

   position: absolute;

   bottom:0;

   width: 100%;

   height: 100%;

   text-align: center;

   background-image: -webkit-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: -moz-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: -o-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: linear-gradient(180deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

}

.img-button > .caption p{

   position: absolute;

   bottom: 0;

   width: 85%;

   margin: 20px;

   font-family: 'Open Sans', 'sans-serif';

   font-weight:100;

   font-size:1em;

   color:white;
}

The code above uses absolute positioning on both the background gradient and the text within the gradient’s bounding box (refer back to Figure 8). By doing so, you can place the elements where you want them above the image, while still allowing the design to scale itself with the screen size.

 

STEP 5: CREATE AN ANIMATED TRANSITION

You can take your CSS effects further by adding transitions and transformations to the caption. Use Dreamweaver’s CSS Transitions panel to help set up an effect that shows and hides the caption as you mouse over the thumbnail.

In this step, you’ll add transition settings to the caption class, and you’ll create a selector for the hover state.

Here’s how to add CSS code:

1. Copy and paste the following code into the .img-button > .caption class in the CSS file:

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

bottom:-30%;

opacity:0;
 

2. Copy and paste the following code below the .img-button > .caption class:

.img-button:hover > .caption{

   -webkit-transform: translate(0em,-30%);

   -moz-transform: translate(0em,-30%);

   -o-transform: translate(0em,-30%);

   transform: translate(0em,-30%);

   opacity:100;

}

Note that the effect works by first setting the default state of the caption and its transition parameters, followed by setting transformations on the thumbnail’s hover state. Be sure to update the “bottom” property to -30 in the .img-button > .caption class – the transform in the hover state animates the caption back into view.

 

STEP 6: DUPLICATE COLUMNS AND ROWS TO COMPLETE THE GRID

At this point you have a fully functional thumbnail ready to go, but you want to end up with a responsive grid of 12 thumbnails (see Figure 11). Fortunately, you can easily generate the rest of the grid using Dreamweaver’s duplicate column and duplicate row features. 

Figure 11: The completed image grid container 12 thumbnails

Figure 12: The selected column in Live View

Let’s finish the grid and take a look.

Start by duplicating the column three more times to finish the row. Remember that you set the columns to span three columns in the grid at the large size. That means that there should be four columns per row, to fully use the underlying 12-column grid.

Here’s how to duplicate columns:

1.   Select the column by clicking on it in Live View (see Figure 12). If you select another element, you can use the arrow keys to navigate to the column div.

2.   Click on the Duplicate column button in the lower right of the selection.

3.   Repeat the process to create two more columns (see Figure 13).

Figure 13: The grid row with 4 columns

Now, you’ll create two more rows in the grid by duplicating the first row (along with its four thumbnails).

Here’s how to duplicate rows:

1.   Select the row by clicking on it in Live View (see Figure 14). 

Figure 14: The selected row in Live View

2.   Click the Duplicate row button to create a copy (see Figure 15). 

Figure 15: The duplicate row in the grid

3.   Create a third row to complete the grid (see Figure 16).

Figure 16: The completed grid 

The grid structure is in place, but each thumbnail shows the same content. You can update the template code with unique images and caption text for each thumbnail. You’ll start by editing the image tags.

Here’s how to complete the code update:

1.   In Code View, update the src attribute of each image tag to point at a unique image. Currently, all images are set to image/ photo-01.jpg. Simply change the number sequentially between 01 and 12.

2.   Update the caption text for each thumbnail. You can add your own text, or copy the supplied captions from the README file in the project folder.

You can see how easy it was to generate thumbnails and rows in the grid. You can use the same logic to extend the design with more rows, or a different number of columns in each row. 

 

STEP 7: BUILD A MODAL PRESENTATION WINDOW

With the image grid finished, you’re ready to create the popup dialog to display the full-size image. (In this design, we’re using a single large image for both the thumbnail and large version because it’s the easiest approach for the exercise, but in the real world you’d want to optimize the image size based on the screen size.)

To display the large image version, you’ll build a single Bootstrap popup dialog and switch the image dynamically using JavaScript. Bootstrap takes care of the popup functionality for you.

Let’s create the HTML elements needed to define the popup window. Essentially, a modal dialog is a series of nested div tags, each with classes applied to them (modal, modal-dialog, modal-content, modal-body, etc.).

Follow these steps to add HTML code:

1.   Copy and paste the following code into the HTML file, below the image grid code:

<div id="modal-preso" class="modal fade" role="dialog">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-body">

        <div id="close-wrapper">

        <button id="close-btn" type="button" class="close" data-dismiss="modal">&times;</button>

        </div>

        <img id="modal-image" src="images/photo-01.jpg" alt="Popup" class="img-responsive"/>

             <div class="popup-caption">

                   <p>Caption goes here...</p>

             </div>

      </div>

    </div>

  </div>

</div>

The code above includes a close button, an image, and a caption at its core. You’ll use JavaScript to update the image source whenever you click on a thumbnail.

Next, you’ll add CSS to customize the modal layout, the styles on the button, and the styles on the image.

Here’s how to add the CSS code:

1.  Copy and paste the following code at the bottom of the CSS file:

.modal {

  text-align: center;

  padding: 0!important;

}

.modal:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle;

  margin-right: -4px;

}

.modal-dialog {

  display: inline-block;

  text-align: left;

  vertical-align: middle;

  margin:4px;

}

.modal-body{

   padding:12px;

   background-color:black;

}

.modal-body img{

   width:100%;

}

#close-wrapper{

   position:absolute;

   top:0;

   right:0;

   width:55px;

   height:55px;

   background-color:rgba(0,0,0,0.5);

   border-bottom-left-radius:6px;

}

#close-btn{

   position:absolute;

   top:20px;

   right:25px;

   color:white;

   opacity:1;

}

.popup-caption{

   width:100%;

   padding-top:6px; 

   background-color:black;

}

.popup-caption p{

   text-align:center;

   font-weight: 300;

   font-size: 1em;

   color: white;

   font-style: normal;

   font-family: 'Open Sans', sans-serif;

   color:white;

   margin-bottom:-4px;

}

 

@media (min-width:763px){

   .modal-dialog{

         width:80%; 

   }

}

 

@media (min-width:1250px){

   .modal-dialog{

         width:70%; 

   }

}

 

The code above configures the popup’s size and position on the screen, and styles the close button and caption. You can change the size of the popup in the media queries at the bottom.

 

Figure 17: The modal popup showing the large image

STEP 8: SET UP THE THUMBNAILS TO LAUNCH THE WINDOW

Now that you have the popup dialog in place, you can launch it by selecting a thumbnail in the grid (see Figure 17). To link the thumbnails to the popup, you’ll add the data-toggle and data-target attributes to the anchor tags.

Data attributes are used by Bootstrap to define the type and behavior of the elements they are attached to. The data-toggle attribute enables the button to open the popup, and the data-target attribute defines the div name to use as the target.

Here’s how to add data attributes to the anchor tags:

Go back through 12 thumbnails and edit the anchor tags to look like this:

<a href="#" data-toggle="modal" data-target="#modal-preso" class="img-button">

Now as you click on the thumbnails, you can see that the popup dialog appears. The same image appears for each thumbnail – you’ll fix this in the next step using a little JavaScript.

 

STEP 9: RESPOND TO EVENTS USING JAVASCRIPT

Bootstrap uses jQuery at its core, which means that you can use the benefits of jQuery while working with Bootstrap components and other elements on the page. In this step, you’ll set up code to respond to thumbnail clicks.

You can create a separate JavaScript file in which to write your code, or you can add a script tag to the HTML page. In this tutorial, you’ll write the code on the HTML page to keep it simple. A best practice is to include the script tag and JavaScript code at the bottom of the page, so that the code executes after the page loads (see Figure 18).

Figure 18: The script tag in Code View 

Here’s how to add a script tag to the HTML page:

In Code View, scroll to the bottom of the body tag, and add a script tag.

<script>

// Add JavaScript code here…

</script>

Now you’re ready to write JavaScript inside the script tags. You’ll create an event handling function and work with jQuery.

Follow these steps to add JavaScript event handling code:

Copy and paste the following code inside the script tags:    

$(".img-button").on("click", function(){

  

   // Get the path to the selected image

   var imgPath = $(this).find('img').attr("src");

              

   // Update the CSS to show the image

   $(".modal-content img").attr({"src":imgPath});

              

   // Get the caption text

   var caption = $(this).find(".caption p").html();

              

   // Update the caption in the popup

   $(".modal-content .popup-caption p").html(caption);

});

The code above references the selected thumbnail and passes the image path and caption to the modal popup. As you test the image grid in Live View, you can see that the popup dialog shows a unique image whenever you click on a thumbnail.

 

STEP 10: PREVIEW THE DESIGN

So far you’ve used Live View directly in Dreamweaver to preview the project. Now that you have fully functional photo gallery, it’s time to start testing across screens. First, you’ll probably want to test across desktop browsers where you’ll see the large size of the design. You can do that easily using the File menu.

Here’s how to preview on the desktop:

1.   Choose File > Preview in Browser > [Browser] (F12). The browser you select in the Preview in Browser menu opens, showing you the photo gallery.

2.   Change the size of the browser to see how the design responds.

Once you’re confident in the design, you’ll want to make sure that it looks good at small and extra-small screen sizes on a device browser. You can use Dreamweaver’s Device Preview feature to load the site from your computer to your device.

Figure 19: The Device Preview URL and QR code

Here’s how to use Device Preview:

1.   Start Device Preview

a.   Click on the Device Preview button to generate a URL for the preview (see Figure 19). Dreamweaver uses a local Node server to generate the URL and stream it to a device connected to the same Wi-Fi network. If you click on the Device Preview button and can’t connect to the Node server, follow the resulting message link to get help.

2.   Set up your device

a.   Make sure your phone or tablet is on the same Wi-Fi network as your computer.

b.   Scan the QR code from Dreamweaver, or open a browser and type in the URL.

c.    Explore the photo gallery on your device.

3.   Make edits in Dreamweaver and see the updates on your device. You can also display information about the device by clicking on the Inspect to debug button (see Figure 20).

Figure 20: Device Preview on a phone

Your photo gallery project is complete. You should now be comfortable with Bootstrap in Dreamweaver CC.

If you want to build a more advanced version of the photo gallery, you could optimize the images so that mobile viewers don’t have to load full-size images on their devices. You might also want to expand on the features in the modal popup.

Check out the Dw-gallery-extras.zip file to see a version of the photo gallery with slideshow functionality and forward and back buttons in the popup. The extras are primarily in the additional JavaScript. See if you can deconstruct the files and update your project.

For more information about Dreamweaver and Bootstrap, check out the following resources: