Preview:
<?php get_header(); ?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/portfolio.css">
    <?php wp_head(); ?>
</head>

<body>
    <div class="overlay"></div>
    <h1 class="page-title">Photography Portfolio</h1>
    <div class="portfolio-grid-container">
        <div class="photo-gallery">
            <?php
            $portfolio_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => -1));

            if ($portfolio_query->have_posts()) :
                $count = 0;

                while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    $location = get_the_content();

                    if ($count % 7 === 0) {
                        echo '<div class="column">';
                    }
                    ?>
                    <div class="photo">
                        <img src="<?php echo esc_url($image_url); ?>" onclick="enlargeImg(this)" alt="">
                        <div class="portfolio-text">
                            <?php echo wp_kses_post($location); ?>
                        </div>
                    </div>
                    <?php
                    $count++;

                    if ($count % 7 === 0) {
                        echo '</div>';
                    }
                endwhile;

                if ($count % 7 !== 0) {
                    echo '</div>';
                }

                wp_reset_postdata();
            else :
                echo 'No portfolio items found.';
            endif;
            ?>
        </div>
    </div>
</body>

<?php
/*
Template Name: Photography Portfolio
*/
$portfolio_query = new WP_Query(array(
    'post_type' => 'portfolio',
    'posts_per_page' => -1,
));

if ($portfolio_query->have_posts()) :
    while ($portfolio_query->have_posts()) :
        $portfolio_query->the_post();
    endwhile;
    wp_reset_postdata();
else :
    echo 'No portfolio items found.';
endif;

get_footer(); ?>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter