Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

Create an Image Grid Gallery From All Images in a Directory With PHP

The following PHP function supports the article on our blog, titled "Create an Image Grid Gallery From All Images in a Directory With PHP or WordPress Shortcode". The article discusses a range of different ways to render images or galleries on your WordPress website. This article will provide a very simple means of rendering all images from a directory with PHP.

Because we're using inline styles (don't judge us) we've created a $transient to ensure that - on the chance you use more than one gallery with differing columns on a page - the CSS rendering is unique for each gallery (it is expected that you would include the CSS in a separate style file). To avoid the overhead with processing you might consider using Simple Cache to cache the returned HTML. If this were the case you should use the transient in the caching functions.

While we scan a directory with PHP's glob() function, any array of images may be used.

The Result

An example page generated with our PHP function is shown below. We have an example page here.

Create an Image Grid Gallery From All Images in a Directory With PHP

Example: http://www.beliefmedia.com/examples/grid-gallery/

The example occupies the entire browser width.

PHP Function

1
<?php 
2
/*
3
 Create a Responsive Grid Image Gallery From All Images in a Directory With PHP
4
 http://www.beliefmedia.com/code/php-snippets/image-grid-gallery-php
5
*/
6
 
7
function beliefmedia_grid_gallery($dir = 'images/', $columns = '5', $url = false, $width = '450,560,960') {
8
 
9
  /* Viewport width */
10
  $width = explode(',', $width);
11
 
12
  /* Transient */
13
  $transient = md5(serialize(func_get_args()));
14
 
15
  $style = '
16
<style>
17
    .bm-grid-' . $transient . ' {
18
      background: #ffffff;
19
      -webkit-column-count: 1;
20
      -webkit-column-gap: 10px;
21
      -webkit-column-fill: auto;
22
      -moz-column-count: 1;
23
      -moz-column-gap: 10px;
24
      -moz-column-fill: auto;
25
      column-count: 1;
26
      column-gap: 15px;
27
      column-fill: auto;
28
    }
29
 
30
    .bm-grid-item-' . $transient . ' {
31
      display: inline-block;
32
      background: #F8F8F8;
33
      margin: 0 0 10px;
34
      padding: 15px;
35
      padding-bottom: 5px;
36
      -webkit-column-break-inside: avoid;
37
      -moz-column-break-inside: avoid;
38
      column-break-inside: avoid;
39
    }
40
 
41
    .bm-hr-grid-' . $transient . ' {
42
      display: block;
43
      height: 1px;
44
      border: 0;
45
      border-top: 1px solid #ccc;
46
      margin: .5em 10px;
47
      padding: 0;
48
    }
49
 
50
    .bm-grid-img-' . $transient . ' {
51
      width: 100%
52
    }
53
 
54
    .bm_p_grid-' . $transient . ' {
55
      margin: 10px;
56
      font-size: .8em;
57
      font-family: arial;
58
      line-height: 1.5em;
59
    }
60
 
61
    @media (min-width: ' . $width['0'] . 'px) {
62
      .bm-grid-' . $transient . ' {
63
        -webkit-column-count: 2;
64
        -moz-column-count: 2;
65
        column-count: 2;
66
      }
67
    }
68
 
69
    @media (min-width: ' . $width['1'] . 'px) {
70
      .bm-grid-' . $transient . ' {
71
        -webkit-column-count: 3;
72
        -moz-column-count: 3;
73
        column-count: 3;
74
      }
75
    }
76
 
77
    @media (min-width: ' . $width['2'] . 'px) {
78
      .bm-grid-' . $transient . ' {
79
        -webkit-column-count: ' . $columns . ';
80
        -moz-column-count: ' . $columns . ';
81
        column-count: ' . $columns . ';
82
      }
83
    }
84
    </style>
85
 
86
';
87
 
88
  /* Scan all images in the image directory */
89
  $image_array = glob(rtrim($dir, '/') . '/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
90
 
91
  foreach ($image_array AS $image) {
92
    $image = ($url !== false) ? rtrim($url, '/') . '/' . basename($image) : $image;
93
    $return .= '<div class="bm-grid-item-' . $transient . '"><img class="bm-grid-img-' . $transient . '" src="' . $image . '"></div>';
94
  }
95
 
96
  $return = '<div class="bm-grid-' . $transient . '">' . $style . $return . '</div>';
97
 
98
 return $return;
99
}
100
 
101
/* Usage */
102

The main disadvantage of scanning a directory for images is that the result won't include descriptions for context. The WordPress article discusses various options to mitigate the shortcomings.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

NOPE