Image Gallery

Image Gallery Shortcodes

You can show your images in different layout styles.

 


Full Width

HTML Shortcode

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<h4>Masonry</h4>
<div class="masonry" data-plugin-options="{'itemSelector': '.masonry-item'}" data-plugin-masonry="masonry">
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-1.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-2.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-4.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-3.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-6.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-5.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-8.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="masonry-item">
        <a href="../../Portfolio/Single-Project">
            <div class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                <div class="thumb-info-wrapper">
                    <img alt="" src="/portals/2/img/gallery/gallery-7.jpg" class="img-responsive" />
                    <div class="thumb-info-title">
                        <span class="thumb-info-inner">Project Title</span>
                        <span class="thumb-info-type">Project Type</span>
                    </div>
                    <div class="thumb-info-action">
                        <span class="thumb-info-action-icon"><em class="fa fa-link"></em></span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

Newsletter

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

About Our Company

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu nam sapien stibulum ridiculus pellentesque eros!

Get in touch

  • Address: 1234 Street, United States

  • Phone: (123) 456-7890

  • Email: mail@example.com