Grid Portfolio with Sidebar

template-portfolio-grid.php

<?php
/*
Template Name: Grid Portfolio
*/

$columns     = false;
$rows        = false;
$image_sizes = array();

if ( have_posts() ) :

    if ( is_page() ) {

        $grid_portfolio = new GridPortfolio( get_the_ID() );

        // Sets: $orientation, $aspect_ratio, $grid_size, $image_sizes, $image_cropping, $columns, $rows
        extract( $grid_portfolio->get_options() );

    } else {

        $default_grid_portfolio = it_find_page_by_template( 'template-portfolio-grid.php', array( 'post_status' => 'publish' ) );

        if ( $default_grid_portfolio ) {
            $grid_portfolio = new GridPortfolio( $default_grid_portfolio[0]->ID );
            extract( $grid_portfolio->get_options() );
        }

        /**
         * We are on a Project Type page,
         * thus we need to check if there is any overriden options.
         *
         * Sets: $orientation, $aspect_ratio, $grid_size, $image_sizes, $image_cropping $columns, $rows
         */
        extract( fluxus_project_type_grid_options( get_queried_object()->term_id ) );

    }

    if ( ! is_numeric( $columns ) ) {
        $columns = 4;
    }

    if ( ! is_numeric( $rows ) ) {
        $rows = 3;
    }

    $max_size = $orientation == 'horizontal' ? $rows : $columns;

    fluxus_add_html_class( 'layout-portfolio-grid layout-portfolio-grid-' . $orientation );

    if ( $orientation != 'vertical' ) {
        fluxus_add_html_class( 'horizontal-page' );
    }

    get_header();

    fluxus_query_portfolio( array(
        'fluxus-project-type' => get_query_var( 'fluxus-project-type' )
    ) );

    ?>
    <div id="main" class="site site-with-sidebar">

        <div class="site-content">

            <div class="portfolio-grid" data-aspect-ratio="<?php esc_attr_e( $aspect_ratio ); ?>" data-orientation="<?php esc_attr_e( $orientation ); ?>" data-columns="<?php echo $columns; ?>" data-rows="<?php echo $rows; ?>"><?php

                while ( have_posts() ) :

                    the_post();

                    $project_id = get_the_ID();
                    $project = new PortfolioProject( $project_id );
                    $featured = $project->get_featured_media();

                    if ( ! $featured ) continue; // We have no media on this project, nothing to show.

                    $thumbnail_data = $featured->get_thumbnail( array(
                        'fluxus-thumbnail-uncropped-2x',
                        'fluxus-thumbnail-uncropped',
                        'fluxus-thumbnail'
                    ));

                    if ( $thumbnail_data ) {
                        $thumbnail = $thumbnail_data['src'];
                    } else {
                        $thumbnail = FLUXUS_IMAGES_URI . '/no-portfolio-thumbnail.png';
                    }

                    $data_max_thumbnail = "";
                    $max_thumbnail = $featured->get_thumbnail( "fluxus-max" );
                    if ( $max_thumbnail ) {
                        $data_max_thumbnail = ' data-max-size="' . esc_attr( $max_thumbnail[ "src" ] ) . '"';
                    }

                    if ( isset( $image_sizes[$project_id] ) ) {
                        $size = $image_sizes[$project_id];
                        $size = $size > $max_size ? $max_size : $size;
                    } else {
                        $size = 1;
                    }

                    $cropping_style = '';
                    $cropping_data = '';
                    if ( isset( $image_cropping[$project_id] ) ) {
                        $cropping_style = '; background-position: ' . esc_attr( $image_cropping[$project_id] );
                        $cropping_data = ' data-cropping="' . esc_attr( $image_cropping[$project_id] ) . '"';
                    }

                    ?>
                    <article class="grid-project size-<?php echo $size; ?>" data-size="<?php echo $size; ?>" data-id="<?php echo esc_attr( get_the_ID() ); ?>" <?php echo $cropping_data; ?>>
                        <a href="<?php the_permalink(); ?>" class="preview" style="background-image: url(<?php echo esc_url( $thumbnail ); ?>); <?php echo $cropping_style; ?>"<?php echo $data_max_thumbnail; ?>>
                            <span class="hover-box">
                                <span class="inner"><?php
                                    if ( $project->meta_subtitle ) : ?>
                                        <i><?php echo $project->meta_subtitle; ?></i><?php
                                    endif;

                                    ?>
                                    <b><?php the_title(); ?></b>
                                    <?php if ( post_password_required() ) : ?>
                                        <span class="password-required">
                                            <?php _e( 'Password required', 'fluxus' ); ?>
                                        </span>
                                    <?php endif; ?>
                                </span>
                            </span>
                            <?php
                            /**
                             * Add <img /> tag, so that they can be found
                             * by search engines and social sharing widgets.
                             */
                            ?>
                            <img class="hide" src="<?php echo esc_url( $thumbnail ); ?>" alt="<?php esc_attr_e( get_the_title() ); ?>" />
                        </a>
                    </article><?php

                endwhile; ?>

            </div>

        </div>
        <?php get_sidebar(); ?>

    </div>

<?php

else:

    get_header();

endif;

wp_reset_query();

get_footer();