Creating Divs Based On Images

[vjpg]

Hi,

I'm not at all savvy with PHP, but I am trying to learn and I would really appreciate some help. Please excuse my limited knowledge and try not to get too annoyed.

Here is what I'm looking to achieve:


So lets I want my PHP to grab these files and place them on my page
2009-1.jpg
2009-2.jpg
2009-3.jpg
2010-1.jpg
2010-2.jpg
2010-3.jpg
2010-4.jpg
2011-1.jpg
2011-2.jpg
2011-3.jpg

Instead of just having all of them appear in one div as they are now (see code below)

<?php
if($dirHandler = opendir($images_dir)){
    while(false !== ($file = readdir($dirHandler))){
        $files[] = $file;
    }
}

natcasesort($files);

foreach($files as $myFile){
    $name = explode(".", $myFile);
    if($myFile != "." && $myFile != ".." && ($name[1] == "jpg" || $name[1] == "JPG" || $name[1] == "jpeg" || $name[1] == "JPEG")){
        echo "<div class='thumb'><a href='" . $images_dir . "/" . $myFile . "'><img src='" . $images_dir."/thumb/" . $myFile . "'></a></div>\n";
    }
}

?>




I need divs to be "generated". (To put it very dumbly: If filename contains "2011" then create div class=2012_div and fill with "2011" ".jpg")

So from the files above. we would end up with:

<div class="2009_div">
<div class='thumb'><a href='_Images/Dates/Jue 25/2009-1.jpg'><img src='_Images/Dates/Jue 25/thumb/2009-1.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2009-2.jpg'><img src='_Images/Dates/Jue 25/thumb/2009-2.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2009-3.jpg'><img src='_Images/Dates/Jue 25/thumb/2009-3.jpg'></a></div>
</div>

<div class="2010_div">
<div class='thumb'><a href='_Images/Dates/Jue 25/2010-1.jpg'><img src='_Images/Dates/Jue 25/thumb/2010-1.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2010-2.jpg'><img src='_Images/Dates/Jue 25/thumb/2010-2.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2010-3.jpg'><img src='_Images/Dates/Jue 25/thumb/2010-3.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2010-4.jpg'><img src='_Images/Dates/Jue 25/thumb/2010-4.jpg'></a></div>
</div>

<div class="2010_div">
<div class='thumb'><a href='_Images/Dates/Jue 25/2011-1.jpg'><img src='_Images/Dates/Jue 25/thumb/2011-1.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2011-2.jpg'><img src='_Images/Dates/Jue 25/thumb/2011-2.jpg'></a></div>
<div class='thumb'><a href='_Images/Dates/Jue 25/2011-3.jpg'><img src='_Images/Dates/Jue 25/thumb/2011-3.jpg'></a></div>
</div>


Is this possible? Again, any help much appreciated.

Thanks!


 

[AbraCadaver]

Not tested but maybe something like this:

$files = glob("$images_dir/*.{jpg,JPG,jpeg,JPEG}", GLOB_BRACE);
natcasesort($files);

$prev_year = '';
$first_run = true;

foreach($files as $file) {
    $file = basename($file);
    list($year) = explode('-', $file);
    
    if($prev_year != $year) {
        if(!$first_run) {
            echo '</div>';
        }
        echo '<div class="' . $year . '_div">';
    }
    echo '<div class="thumb"><a href="' . $images_dir . '/' . $file . '"><img src="' . $images_dir . '/thumb/' . $file . '"></a></div>';
    $prev_year = $year;
    $first_run = false;
}

[Zane]

I would put the image filenames into a multi-dimensional array

<?php
if($dirHandler = opendir($images_dir)){
    while(false !== ($file = readdir($dirHandler))){
        $files[] = $file;
    }
}

natcasesort($files);
$images = array();

foreach($files as $myFile){
    if($myFile == "." || $myFile == "..") continue;
    $name = explode(".", $myFile);
    $name[1] = strtolower($name[1]);
    if($name[1] == "jpg" || $name[1] == "jpeg"){
        echo "<div class='thumb'><a href='" . $images_dir . "/" . $myFile . "'><img src='" . $images_dir."/thumb/" . $myFile . "'></a></div>\n";
        //Grab year and place filename into multi-dim.
        list($y) = explode("-", $name[0]);
        $images[$y][] = $myFile;
    }
}
?>

Then loop through images

foreach($images as $newDiv) {
    echo '<div>';
    foreach($newDiv as $imgDiv) echo "<div><img src='{$imgDiv}' /></div>";
    echo '</div>';
}

Edited August 1, 2013 by Zane

[vjpg]

 

Not tested but maybe something like this:

$files = glob("$images_dir/*.{jpg,JPG,jpeg,JPEG}", GLOB_BRACE);
natcasesort($files);

$prev_year = '';
$first_run = true;

foreach($files as $file) {
    $file = basename($file);
    list($year) = explode('-', $file);
    
    if($prev_year != $year) {
        if(!$first_run) {
            echo '</div>';
        }
        echo '<div class="' . $year . '_div">';
    }
    echo '<div class="thumb"><a href="' . $images_dir . '/' . $file . '"><img src="' . $images_dir . '/thumb/' . $file . '"></a></div>';
    $prev_year = $year;
    $first_run = false;
}

AbraCadaver, this worked like a charm! Ravenclaw material. I may still have a couple questions moving forward, but for now this is great! Thanks!

[vjpg]

 

Not tested but maybe something like this:

$files = glob("$images_dir/*.{jpg,JPG,jpeg,JPEG}", GLOB_BRACE);
natcasesort($files);

$prev_year = '';
$first_run = true;

foreach($files as $file) {
    $file = basename($file);
    list($year) = explode('-', $file);
    
    if($prev_year != $year) {
        if(!$first_run) {
            echo '</div>';
        }
        echo '<div class="' . $year . '_div">';
    }
    echo '<div class="thumb"><a href="' . $images_dir . '/' . $file . '"><img src="' . $images_dir . '/thumb/' . $file . '"></a></div>';
    $prev_year = $year;
    $first_run = false;
}

 

 

Sorry to trouble you again, but how would I go about modifying this code to make it so the divs generate in descending order based on the file name. (as in: 2012, 2011, 2010...)

 

Thanks!

[vjpg]

 

Not tested but maybe something like this:

$files = glob("$images_dir/*.{jpg,JPG,jpeg,JPEG}", GLOB_BRACE);
natcasesort($files);

$prev_year = '';
$first_run = true;

foreach($files as $file) {
    $file = basename($file);
    list($year) = explode('-', $file);
    
    if($prev_year != $year) {
        if(!$first_run) {
            echo '</div>';
        }
        echo '<div class="' . $year . '_div">';
    }
    echo '<div class="thumb"><a href="' . $images_dir . '/' . $file . '"><img src="' . $images_dir . '/thumb/' . $file . '"></a></div>';
    $prev_year = $year;
    $first_run = false;
}

 

 

Also, I can't get the divs generated to be effected by my stylesheets, and I've tried everything. Is there a fix for this?

[jcbones]

It is hard to get css to work on dynamically created classes when you don't know what those classes will be named.  If all of the different divisions are going to be styled the same, use a single class name that will work for that purpose.

[vjpg]

I figured out the styling problem. It was because we were making divs with class names starting with numbers. Found out you can't have styles starting with numbers. That was a headache.

[kicken]

Untested, but something like this would keep it simple.

<?php
if($dirHandler = opendir($images_dir)){
    $regex = '#^(\d{4})-\d+\.(jpeg|jpg)$#i';
    while(false !== ($file = readdir($dirHandler))){
        if (!preg_match($regex, $file, $m)) continue;

        $files[$m[1]][] = $file;
    }
}

krsort($files, SORT_NUMERIC);

foreach($files as $year=>$list){
	echo '<div class="'.$year.'_div">';
	natsort($list);
	foreach ($list as $file){
	        echo '<div class="thumb"><a href="' . $images_dir . '/' . $file . '"><img src="' . $images_dir.'/thumb/' . $myFile . '"></a></div>';
	}
	echo '</div>';
    }
}

?>

The files get grouped by year as they are read, then the years are sorted in descending order using krsort.