RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
1300235433
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

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.

…

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  E. Australia Standard Time [ UTC+10, Default ] [ CHECK TO CHANGE ]

  Want to have a chat?
 

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest
Martin Khoury

Martin Khoury

Martin is the Managing Director of BeliefMedia Pty Limited, and Australia's leading Finance Marketing Specialist. He is supported by a team of Australia's finest. Read more about Marty here.

Leave a comment

Call us on 1300 235 433
Enquire Online
Make an Appointment
General Enquires: 1300 235 433 • Support: (02) 8765 8887
The comparison rate is calculated on a secured loan of $150,000 with a term of 25 years with monthly principal and interest payments. WARNING: This comparison rate is true only for examples given and may not include all fees and charges. Different terms, fees or other loan amounts might result in a different comparison rate. Important Information: Applications are subject to credit approval. Full terms and conditions will be included in our loan offer. Fees and charges are payable. Interest rates are subject to change. Offer does not apply to internal refinances and is not transferable between loans. As this advice has been prepared without considering your objectives, financial situation or needs, you should consider its appropriateness to your circumstances before acting on the advice. [ Example Credit Guide Link ]
Facebook Twitter Youtube Linkedin Facebook-f
    
© BeliefMedia | Privacy • Terms • Disclaimer
BeliefMedia Pty Limited