10. Album Posts

In this section, we'll learn how to create album post galleries in different layouts. We will consider not only the markup of the gallery but also some features of the page structure.

Fullscreen album posts, such as WebGL Carousel, Flat Carousel, and Slider layouts, are placed directly into the main class="anita-main"/ tag, as album listings do. And the Grid layouts are placed as content elements in sections inside the main class="anita-container"/

WebGL Carousel Gallery
 Page Main 
main class="anita-main"

     WebGL Carousel Gallery 
    div class="anita-gl-container-wrap anita-gl-carousel-gallery-wrap anita-scrollEW"
         Album Title 
        div class="anita-fixed-album-title"
            div class="anita-album-title"
                div class="anita-albums-back-wrap"
                    a href="#" class="anita-albums-back"Back to Listing/a
                /div
                h1 class="anita-page-title"Album Title/h1
                div class="anita-post-meta anita-meta"
                    spanCategory/span
                    span10 Photos/span
                /div
            /div
        /div

         Album Gallery 
        div class="anita-gl-container anita-gl-carousel-gallery" data-prev-label="Previous Work" data-next-label="Next Work"
             Gallery Item (Video Example) 
            div class="anita-gl-gallery-item is-video" data-src="video/albums/album01/video01.mp4" data-size="1280x720"/div
             Gallery Item (Image Example) 
            div class="anita-gl-gallery-item is-image" data-src="img/albums/album01/01.jpg" data-size="1440x1080"/div
             Gallery Item 
            ...
        /div

         Post Navigation 
        div class="anita-album-nav-prev"
            a href="https://prev_album_url" class="anita-prev-album-link"
                div class="anita-data-background" data-src="img/albums/prev_album_thmb.jpg"/div
                span
                    Prev Album
                    span
                        Prev Album Title
                    /span
                /span
            /a
        /div
        div class="anita-album-nav-next"
            a href="https://next_album_url" class="anita-next-album-link"
                div class="anita-data-background" data-src="img/albums/next_album_thmb.jpg"/div
                span
                    Next Album
                    span
                        Next Album Title
                    /span
                /span
            /a
        /div
    /div
/main

First of all, let's take a look at the Page Title block. The markup is the same for all fullscreen galleries. The href attribute of the tag a class="anita-albums-back"/ must be # to allow the script to paste the listing page link here automatically. But, you can also specify the direct URL to your album listing page.

Another difference from the album list is the navigation to the previous and next posts feature. It is located directly in the div class="anita-...-gallery-wrap"/ tag right after the gallery. This block is completely hard-coded, so you should just follow the markup.

WebGL Slider Gallery
 Page Main 
main class="anita-main"

     WebGL Slider Gallery 
    div class="anita-gl-container-wrap anita-gl-slider-gallery-wrap anita-scrollEW"
        
         Album Title 
        div class="anita-fixed-album-title"
            div class="anita-album-title"
                div class="anita-albums-back-wrap"
                    a href="#" class="anita-albums-back"Back to Listing/a
                /div
                h1 class="anita-page-title"Album Title/h1
                div class="anita-post-meta anita-meta"
                    spanCategory/span
                    span10 Photos/span
                /div
            /div
        /div

         Album Gallery 
        div class="anita-gl-container anita-gl-slider-gallery" data-type="fade" data-fit="cover" data-intensity="0.5" 
        data-prev-label="Previous Photo" data-next-label="Next Photo"
             Gallery Item (Video Example) 
            div class="anita-gl-gallery-item is-video" data-src="video/albums/album01/video01.mp4" data-size="1280x720"/div
             Gallery Item (Image Example) 
            div class="anita-gl-gallery-item is-image" data-src="img/albums/album01/01.jpg" data-size="1440x1080"/div
             Gallery Item 
            ...
        /div
        
         Post Navigation 
        div class="anita-album-nav-prev"
            a href="https://prev_album_url" class="anita-prev-album-link"
                div class="anita-data-background" data-src="img/albums/prev_album_thmb.jpg"/div
                span
                    Prev Album
                    span
                        Prev Album Title
                    /span
                /span
            /a
        /div
        div class="anita-album-nav-next"
            a href="https://next_album_url" class="anita-next-album-link"
                div class="anita-data-background" data-src="img/albums/next_album_thmb.jpg"/div
                span
                    Next Album
                    span
                        Next Album Title
                    /span
                /span
            /a
        /div
    /div
/main

The data-type attribute is responsible for the effect with which the slides will change. It can take one of 4 values: fade for fading slide transition, parallax for parallax transition, pixel for pixel storm transition, and sliced for the diagonally sliced transition.

The data-fit attribute can be used to change the fit type. You can use one of two values: cover to cover the entire screen with the media, and fit to fit the media on the screen in its original proportions.

And finally, the data-intensity attribute is responsible for the intensity of the transition effect. This option is not compatible with the sliced gallery type.

Flat Carousel Gallery
 Page Main 
main class="anita-main"

     Flat Carousel Gallery 
    div class="anita-carousel-gallery-wrap anita-scrollEW"
        
         Album Title 
        div class="anita-fixed-album-title"
            div class="anita-album-title"
                div class="anita-albums-back-wrap"
                    a href="#" class="anita-albums-back"Back to Listing/a
                /div
                h1 class="anita-page-title"Album Title/h1
                div class="anita-post-meta anita-meta"
                    spanCategory/span
                    span10 Photos/span
                /div
            /div
        /div

         Album Gallery 
        div class="anita-flat-carousel anita-carousel-gallery" data-size="0.82" data-prev-label="Previous Photo" data-next-label="Next Photo"
             Gallery Item (Video Example) 
            div class="anita-gallery-item is-video" data-type="video"
                video src="video/albums/album01/video01.mp4" playsinline muted loop/video
            /div
             Gallery Item (Image Example) 
            div class="anita-gallery-item is-image" data-type="image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/01.jpg" alt="Image Alt" width="1440" height="1080"
            /div
             Gallery Item 
            ...
        /div
        
         Post Navigation 
        div class="anita-album-nav-prev"
            a href="https://prev_album_url" class="anita-prev-album-link"
                div class="anita-data-background" data-src="img/albums/prev_album_thmb.jpg"/div
                span
                    Prev Album
                    span
                        Prev Album Title
                    /span
                /span
            /a
        /div
        div class="anita-album-nav-next"
            a href="https://next_album_url" class="anita-next-album-link"
                div class="anita-data-background" data-src="img/albums/next_album_thmb.jpg"/div
                span
                    Next Album
                    span
                        Next Album Title
                    /span
                /span
            /a
        /div
    /div
/main
Grid layout Galleries page structure

Here we will take a look at the basic page markup for album posts with Grid layouts. You should place the gallery content in place of the (Grid Gallery goes here).

 Page Background 
div class="anita-page-background-wrap"
    div class="anita-page-background" data-src="img/albums/album01_cover.jpg" data-opacity="0.05"/div
/div

 Page Main 
main class="anita-main"
     Page Container 
    div class="anita-container"
        
         Page Title 
        section class="anita-section"
            div class="anita-album-title"
                div class="anita-albums-back-wrap"
                    a href="#" class="anita-albums-back"Back to Listing/a
                /div
                h1 class="anita-page-title"Album Title/h1
                div class="anita-post-meta anita-meta"
                    spanCategory/span
                    span10 Photos/span
                /div
            /div
            div class="anita-page-intro anita-offset-left--33"
                pThis is a short description for the album post./p
            /div
        /section

         Page Content 
        section class="anita-section"
            (Grid Gallery goes here )
        /section

         Next Album Link 
        section class="anita-section"
            div class="anita-next-album-wrap"
                div class="anita-next-album-title"
                    h4
                        Next Album
                    /h4
                    a href="https://next_album_url" class="anita-underline anita-caption"
                        Next Album Title
                    /a
                    div class="anita-page-background" data-src="img/albums/next_album_thmb.jpg">/div
                /div
            /div
        /section
    /div
/main
Adjusted Grid
 Adjusted Grid 
div class="anita-adjusted-grid anita-grid-gallery anita-grid--3cols anita-zoom-hover anita-item-zoom-hover anita-item-fade-hover"
     Gallery Item (Video Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/01.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/video01.mp4" class="anita-lightbox-link" data-size="1280x720" data-type="video"/a        
        /div
    /div
     Gallery Item (Youtube Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/02.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="https://www.youtube.com/watch?v=SDWaEV1RR54" class="anita-lightbox-link" data-type="youtube"/a        
        /div
    /div
     Gallery Item (Image Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/03.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/01.jpg" class="anita-lightbox-link" data-size="1240x960"/a        
        /div
    /div
     Gallery Item 
    ...
/div

The key class for the div class="anita-grid-gallery"/ to make this grid Adjusted is the anita-adjusted-grid. For the Lightbox link, you can use self-hosted video files, images, and Embedded content, like YouTube or Vimeo.

As for the other options, they are the same as for the Classic Grid album listing:

  • Number of Columns
  • anita-grid--2cols - 2 columns grig gallery
  • anita-grid--3cols - 3 columns grig gallery
  • anita-grid--4cols - 4 columns grig gallery
  • Hover Effects
  • anita-zoom-hover - zooming in inner image inside the gallery item.
  • anita-item-zoom-hover - zooming in the gallery item.
  • anita-item-fade-hover - fade out all items and highlight the hover item.
Strong Grid
 Strong Grid 
div class="anita-grid-gallery anita-grid--3cols anita-zoom-hover anita-item-zoom-hover anita-item-fade-hover"
     Gallery Item (Video Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/01.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/video01.mp4" class="anita-lightbox-link" data-size="1280x720" data-type="video"/a        
        /div
    /div
     Gallery Item (Youtube Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/02.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="https://www.youtube.com/watch?v=SDWaEV1RR54" class="anita-lightbox-link" data-type="youtube"/a        
        /div
    /div
     Gallery Item (Image Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/03.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/01.jpg" class="anita-lightbox-link" data-size="1240x960"/a        
        /div
    /div
     Gallery Item 
    ...
/div
Masonry Grid
 Masonry Grid 
div class="anita-masonry anita-grid-gallery anita-grid--3cols anita-zoom-hover anita-item-zoom-hover anita-item-fade-hover"
     Gallery Item (Video Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/01.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/video01.mp4" class="anita-lightbox-link" data-size="1280x720" data-type="video"/a        
        /div
    /div
     Gallery Item (Youtube Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/02.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="https://www.youtube.com/watch?v=SDWaEV1RR54" class="anita-lightbox-link" data-type="youtube"/a        
        /div
    /div
     Gallery Item (Image Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/03.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/01.jpg" class="anita-lightbox-link" data-size="1240x960"/a        
        /div
    /div
     Gallery Item 
    ...
/div

The key class for the div class="anita-grid-gallery"/ to make this grid Masonry is the anita-masonry. All other things are the same as previous.

Bricks Grid
 Bricks Grid 
div class="anita-bricks-grid anita-bricks-1x2 anita-zoom-hover anita-item-zoom-hover anita-item-fade-hover"
     Gallery Item (Video Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/01.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/video01.mp4" class="anita-lightbox-link" data-size="1280x720" data-type="video"/a        
        /div
    /div
     Gallery Item (Youtube Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/02.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="https://www.youtube.com/watch?v=SDWaEV1RR54" class="anita-lightbox-link" data-type="youtube"/a        
        /div
    /div
     Gallery Item (Image Lightbox Example) 
    div class="anita-grid-gallery-item"
        div class="anita-grid-item__inner"
            div class="anita-grid-item__image"
                img src="img/null.png" class="anita-lazy" data-src="img/albums/album01/03.jpg" alt="Gallery Title" width="1240" height="960"
            /div
            a href="img/albums/album01/01.jpg" class="anita-lightbox-link" data-size="1240x960"/a        
        /div
    /div
     Gallery Item 
    ...
/div

In this case, the gallery parent div/ has no class anita-grid-gallery but has the class anita-bricks-grid instead. And there are two classes to define the layout template: the anita-bricks-1x2 class to show 1 large and 2 smaller images and the anita-bricks-2x3 class to show 2 medium and 3 smaller images.

Justified Grid
 Justified Grid 
div class="anita-justified-grid anita-justified-zoom-hover anita-justified-fade-hover anita-justified-image-zoom-hover"
     Gallery Item (Video Lightbox Example) 
    a href="img/albums/album01/video01.mp4" class="anita-lightbox-link" data-size="1280x720" data-type="video"
        img src="img/albums/album01/01.jpg" alt="Gallery Title" width="1240" height="960"
    /a
     Gallery Item (Youtube Lightbox Example) 
    a href="https://www.youtube.com/watch?v=SDWaEV1RR54" class="anita-lightbox-link" data-type="youtube"
        img src="img/albums/album01/02.jpg" alt="Gallery Title" width="1240" height="960"
    /a
     Gallery Item (Image Lightbox Example) 
    a href="img/albums/album01/01.jpg" class="anita-lightbox-link" data-size="1240x960"
        img src="img/albums/album01/03.jpg" alt="Gallery Title" width="1240" height="960"
    /a
     Gallery Item 
    ...
/div

As you can see, in this case, the gallery content and hover classes are different than in previous cases. For this gallery layout, there is no lazy loading option, so you should specify the image URL in the src attribute.

Next Chapter

Contact Form