Wrapping While Loops in Divs

[laurenetherington]

Hello guys!

 

I'm currently writing a bit of an image gallery code which is working pretty well however there seems to be a few issues with the sytling and layout of the gallery. (It's nothing flash just displays the images and caption in category order)

 

Now I am not sure how to go about doing this but is there any way to wrap each category in a div? I have the whole while loop wrapped in a div at present but I would like each category wrapped so I can style it a bit easier.

 

Can someone please point me in the right direction. Currently my code looks like this:

function Gallery(){

    ini_set('display_errors',1);
    error_reporting(E_ALL);

    $conn = mysqli_connect("Why","Hello","There","Friends")
        or die('Cannot Connect to the database');

    $q ="SELECT * FROM gallery_category AS c JOIN gallery_photos AS p ON p.categoryname = c.categoryname ORDER BY c.categoryid";
    $result = mysqli_query($conn, $q)
        or trigger_error("Query Failed! SQL: $conn - Error: ".mysqli_error(), E_USER_ERROR);


    echo"<div class='gallery'>";
    $categoryname='';
    while($rows = mysqli_fetch_assoc($result)){

            if ($categoryname != $rows['categoryname']) {
                    $categoryname = $rows['categoryname'];

                    echo"<div class='h'><h2>".$rows['categoryname']."</h2></div>";

                }

                echo"
                    <div class='gall'>
                        <div class='gl-img'><img src='pathway/to/gallery/".$rows['photoname']."' alt='".$rows['categoryname']."'/></div>
                        <div class='gl-cap'>".$rows['photocaption']."</div>
                    </div>";
        
            }


    echo"</div>";

    $conn-> close();
}

I don't know how to go about updating it so that it is this section that is wrapped whilst the "gall" class repeats (if that makes sense)

echo"<div class='h'><h2>".$rows['categoryname']."</h2></div>";
                }
                echo"
                    <div class='gall'>
                        <div class='gl-img'><img src='pathway/to/gallery/".$rows['photoname']."' alt='".$rows['categoryname']."'/></div>
                        <div class='gl-cap'>".$rows['photocaption']."</div>
                    </div>";

So that it looks like this:

<div class="category">
			<div class="h"><h2>Category Title</h2></div>
			<div class="gall">
				<div class="gl-img"><img src="pathway/to/gallery/polarbear2.jpg"></div>
				<div class="gl-cap">Polar Bear</div>
			</div>
			<div class="gall">
				<div class="gl-img"><img src="pathway/to/gallery/polarbear2.jpg"></div>
				<div class="gl-cap">Polar Bear</div>
			</div>
			<div class="gall">
				<div class="gl-img"><img src="pathway/to/polarbear2.jpg"></div>
				<div class="gl-cap">Polar Bear</div>
			</div>
			<div class="gall">
				<div class="gl-img"><img src="pathway/to/gallery/polarbear2.jpg"></div>
				<div class="gl-cap">Polar Bear</div>
			</div>
		</div>

Any and all help on how to achieve this would be appreciated!! thank you

Edited November 26, 2014 by laurenetherington

[mac_gyver]

your code that detects the change in the categoryname - if ($categoryname != $rows['categoryname']) { ... } is where you would do this.

 

when the categoryname changes (your existing logic), if it is not the first category (if $categoryname is not equal to the initial '' value), you would output a closing </div> tag, then unconditionally output the <div class="category"> tag right before the <div class="h"><h2>Category Title</h2></div> bit. you would also output a final closing </div> after the end of the while(){} loop, if $categoryname is not equal to the initial '' value, meaning that some data has been output.

 

your existing  - if ($categoryname != $rows['categoryname']) { ... } would become - 

if ($categoryname != $rows['categoryname']) {
  if($categoryname != ''){
    // a previous section exists, close it here...
    echo "</div>";
  }
  $categoryname = $rows['categoryname'];
  echo"<div class='gallery'>";
  echo"<div class='h'><h2>".$rows['categoryname']."</h2></div>";
}

and after the end of the while(){} loop, add - 

if($categoryname != ''){
  // a previous section exists, close it here...
  echo "</div>";
}

[Psycho]

Don't use '*' for your SELECT. Define the fields you actually need.

 

Also, to add to mac_gyver's response, you should define $categoryanme = '' before the loop. But, I would actually use the id and not the name.

 

Give this a try

$categoryid = false;
while($row = mysqli_fetch_assoc($result))
{
    //Detect if category has changed
    if ($categoryid != $row['categoryid'])
    {
        //If a previous category existed - close the div
        if($categoryid)
        {
            echo "</div>\n";
        }
        //Create div for new category
        echo "<div class='category'>\n";
        echo "<div class='h'><h2>{$row['categoryname']}</h2></div>\n";
    }
    //create image div for current record
    echo "<div class='gall'>\n";
    echo "  <div class='gl-img'><img src='pathway/to/gallery/{$row['photoname']}'></div>";
    echo "  <div class='gl-cap'>{$row['photocaption']}</div>";
    echo "</div>";
}
 
//Close last div, if there were records
if($categoryid)
{
    echo "</div>\n";
}

Edited November 26, 2014 by Psycho