Image Gallery

Image Gallery Shortcodes

You can show your images in different layout styles.

 

Default

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
 
<div class="row">
    <ul class="image-gallery sort-destination lightbox" data-sort-id="portfolio" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item websites">
            <div class="image-gallery-item">
                <a href="/portals/2/img/projects/project.jpg">
                    <div class=" thumb-info">
                        <span class="thumb-info-wrapper">
                            <img alt="" src="/portals/2/img/projects/project.jpg" class="img-responsive" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Project Title</span>
                                <span class="thumb-info-type">Project Type</span>
                            </span>
                            <span class="thumb-info-action-icon">
                                <em class="fa fa-link"></em>
                            </span>
                        </span>
                    </div>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item logos">
            <div class="image-gallery-item">
                <a href="/portals/2/img/projects/project-2.jpg">
                    <div class="thumb-info">
                        <span class="thumb-info-wrapper">
                            <img alt="" src="/portals/2/img/projects/project-2.jpg" class="img-responsive" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Project Title</span>
                                <span class="thumb-info-type">Project Type</span>
                            </span>
                            <span class="thumb-info-action-icon">
                                <em class="fa fa-link"></em>
                            </span>
                        </span>
                    </div>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item brands">
            <div class="image-gallery-item">
                <a href="/portals/2/img/projects/project-4.jpg">
                    <div class="thumb-info">
                        <span class="thumb-info-wrapper">
                            <img alt="" src="/portals/2/img/projects/project-4.jpg" class="img-responsive" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Project Title</span>
                                <span class="thumb-info-type">Project Type</span>
                            </span>
                            <span class="thumb-info-action-icon">
                                <em class="fa fa-link"></em>
                            </span>
                        </span>
                    </div>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item websites">
            <div class="image-gallery-item">
                <a href="/portals/2/img/projects/project-5.jpg">
                    <div class="thumb-info">
                        <span class="thumb-info-wrapper">
                            <img alt="" src="/portals/2/img/projects/project-5.jpg" class="img-responsive" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Project Title</span>
                                <span class="thumb-info-type">Project Type</span>
                            </span>
                            <span class="thumb-info-action-icon">
                                <em class="fa fa-link"></em>
                            </span>
                        </span>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>

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
 
<ul class="image-gallery sort-destination full-width">
    <li class="isotope-item">
        <div class="image-gallery-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/projects/project.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>
                        <span class="thumb-info-action-icon">
                            <em class="fa fa-link"></em>
                        </span>
                    </div>
                </div>
            </a>
        </div>
    </li>
    <li class="isotope-item">
        <div class="image-gallery-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/projects/project-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>
                        <span class="thumb-info-action-icon">
                            <em class="fa fa-link"></em>
                        </span>
                    </div>
                </div>
            </a>
        </div>
    </li>
    <li class="isotope-item">
        <div class="image-gallery-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/projects/project-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>
                        <span class="thumb-info-action-icon">
                            <em class="fa fa-link"></em>
                        </span>
                    </div>
                </div>
            </a>
        </div>
    </li>
    <li class="isotope-item">
        <div class="image-gallery-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/projects/project-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>
                        <span class="thumb-info-action-icon">
                            <em class="fa fa-link"></em>
                        </span>
                    </div>
                </div>
            </a>
        </div>
    </li>
    <li class="isotope-item">
        <div class="image-gallery-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/projects/project-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>
                        <span class="thumb-info-action-icon">
                            <em class="fa fa-link"></em>
                        </span>
                    </div>
                </div>
            </a>
        </div>
    </li>
</ul>

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>