Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Chris Ward
Chris Ward
12,129 Points

You've just finished How to Make a Website. Now, try this twist.

Ok, so I'm wondering, how would you handle the layout if Nick's portfolio was stored in a database? This would mean that you would not know in advance how many images will populate the portfolio page or what the caption size will be. There could for instance be just one image and caption or maybe dozens of images and captions. It would seem that some new issues arise when the portfolio is displaying an unknown number of images and captions that do not have a known size. Suddenly, this n child selector isn't all we hoped it would be. So, what do we do?

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

I would use responsive design techniques, CSS media queries, and backend PHP functions to assess how much content is being pulled from the database and alter the html that is served to the user based on this information.

For example I would import the data from the database to an array in PHP and count the amount of rows in the array.

<?php

// Define database connection variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Select Portfolio data from database
$sql = "SELECT id, image, caption FROM portfolio";
$result = $conn->query($sql);

// If database selection as more than 0 rows
if ($result->num_rows > 0) {
    //Push data of each row to array
    while($row = $result->fetch_assoc()) {

        $portfolioData[] = $row["id"], $row["image"], $row["caption"];      
    }
// Else Echo 0 Results  
} else {
    echo "0 results";
}

// Count how many rows in array and save to variable
$arrayCount = count($portfolioData);

// If amount of rows greater than 5
if ($arrayCount) > 5){
    // Code to do if more than 5 rows here

// Else if less than 5 rows do this
} else {
    // Code to do if less than 5 rows
}

?>

You could also use PHP to calculate the amount of characters in the captions and output a sample that fits your layout size and generate a "read more" button if you had to crop the content of the caption.

I would use CSS media queries and responsive techniques to define the layout of the portfolio on the front end based on the device size and how much content is being served from the PHP function to the front end design.

Hope this helps :)

Chris Ward
Chris Ward
12,129 Points

I came up with a solution, but it requires many versions of the custom CSS file...surely there must be something simpler than that!

FYI I broke it down into showing 1,2,3,4 or 5 images per row depending upon the divisibility of the number of images. It's okay if the last row is one image less than the other rows.