Extracting data from file names

Advanced variable placeholders - Storing multiple variables in file name.

Let's start slow, with things that we already know.

With normal placeholders you can do awesome stuff like converting file names into human readable titles. Let's assume we want an ongoing list of competition winners, each with a photo, name, city and year of competition. We want it to look like this:

Documentation Variable Placeholders Sample 1

Photos courtesy of Wikipedia

And this is how we want our HTML to look like:

<li>
  <img src="winners/dynamic_thumbnails/2011,_steven_segal,_lansing_c80_crop_50_70.jpg">
  2011, Steven Segal, Lansing
</li>
<li>
  <img src="winners/dynamic_thumbnails/2012,_chuck_norris,_ryan_c80_crop_50_70.jpg">
  2012, Chuck Norris, Ryan
</li>
<li>
  <img src="winners/dynamic_thumbnails/2013,_jason_statham,_shirebrook_c80_crop_50_70.jpg">
  2013, Jason Statham, Shirebrook
</li>

In order to achieve this, we need to name our files in winners directory accordingly:

2011,_steven_segal,_lansing.jpg
2012,_chuck_norris,_ryan.jpg
2013,_jason_statham,_shirebrook.jpg

Now, generating the necessary HTML is as simple as preparing some CSS styles and launching Dead Simple Gallery with a couple of parameters:

<?php
  $dsg_gallery_dir = 'winners';
  $dsg_thumb_width = 50;
  $dsg_thumb_height = 70;
  $dsg_line_pattern = '<li><img src="{THUMB_URL}">{ORIGINAL_FILENAME_HUMANIZED}</li>';
  include 'dsg.php';
?>

# Using advanced variable placeholders

Ok. That was easy, but what if we wanted to have the name in bold, maybe year in a bigger font and an overall more professional look? Like this:

Documentation Variable Placeholders Sample 2

Photos courtesy of Wikipedia

It's easy to achieve with CSS, but in order to style each element (year, name, city) we have to extract them to separate variables and wrap in <span> tags with classes or something similar. So our HTML should look similar to this:

<li>
  <img src="winners/dynamic_thumbnails/2011,_steven_segal,_lansing_c80_crop_50_70.jpg">
  <span class="date">2011</span>
  <span class="name">Steven Segal</span>
  <span class="city">Lansing</span>
</li>
<li>
  <img src="winners/dynamic_thumbnails/2012,_chuck_norris,_ryan_c80_crop_50_70.jpg">
  <span class="date">2012</span>
  <span class="name">Chuck Norris</span>
  <span class="city">Ryan</span>
</li>
<li>
  <img src="winners/dynamic_thumbnails/2013,_jason_statham,_shirebrook_c80_crop_50_70.jpg">
  <span class="date">2013</span>
  <span class="name">Jason Statham</span>
  <span class="city">Shirebrook</span>
</li>

No worries, it's easier than you think. Let's start with renaming the files a little to keep things tidy, we will use pipe character '|' as variable delimiter (separator):

2011|steven_segal|lansing.jpg
2012|chuck_norris|ryan.jpg
2013|jason_statham|shirebrook.jpg

Now we just need to tell Dead Simple Gallery what are we using as a delimiter (it actually assumes pipe character by default, but let's do this anyway). To set the delimiter character write:

$dsg_filename_delimiter = '|';

After that Dead Simple Gallery knows that it should treat each part of the filename separated by pipe character as a separate variable. We can access variables using {VAR_X}, where X stands for variables place in the file name. If we have two parts separated by delimiter, we will have access to two placeholder variables: {VAR_1} and {VAR_2} accordingly. Each file name can consist of up to 10 delimiter separated parts, which will be converted to variables {VAR_1}{VAR_2}, … up to {VAR_10}.

In our case file name consists of three parts - date, name and city, which will be translated to {VAR_1} (date), {VAR_2} (name) and {VAR_3} (city). Our whole PHP code should look like this (dsg_line_pattern is converted to multiple lines for easier readability):

<?php
  $dsg_gallery_dir = 'winners';
  $dsg_thumb_width = 50;
  $dsg_thumb_height = 70;
  $dsg_line_pattern = '<li>'
                    . '<img src="{THUMB_URL}">'
                    . '<span class="date">{VAR_1}</span>'
                    . '<span class="name">{VAR_2}</span>'
                    . '<span class="city">{VAR_3}</span>'
                    . '</li>';
  include 'dsg.php';
?>

We can make the HTML output a bit prettier by adding linebreaks (\n) using {NEWLINE}:

<?php
  $dsg_gallery_dir = 'winners';
  $dsg_thumb_width = 50;
  $dsg_thumb_height = 70;
  $dsg_line_pattern = '<li>{NEWLINE}'
                    . '<img src="{THUMB_URL}">{NEWLINE}'
                    . '<span class="date">{VAR_1}</span>{NEWLINE}'
                    . '<span class="name">{VAR_2}</span>{NEWLINE}'
                    . '<span class="city">{VAR_3}</span>{NEWLINE}'
                    . '</li>';
  include 'dsg.php';
?>

It will make the code more readable when using view source in the browser.