How to customize your single image template

Lots of users requested a tutorial on how to customize the sidebar to look like the one on Poster Spy. The sidebar uses ImagePress specific code and should be compatible with any theme. If not, add a comment below.

In your single-image.php template replace <?php get_sidebar(); ?> (or add if it does not exist) with <?php get_sidebar('hub'); ?>.

In your theme folder, create a new sidebar template, name it sidebar-hub.php and add the following code:

<aside id="sidebar" role="complementary">
    <?php
    global $post;
    $post_thumbnail_id = get_post_thumbnail_id(get_the_ID());
    $author_id = $post->post_author;
    $filesize = filesize(get_attached_file($post_thumbnail_id)) / 1024;
    $filesize = number_format($filesize, 2, '.', ' ');
    $filesize .= ' KB';
    ?>

    <div class="widget-container widget_text">
        <nav id="nav-below" class="navigation" role="navigation">
            <ul>
                <li><?php previous_post_link('%link', '<i class="fa fa-fw fa-chevron-left"></i>'); ?></li>
                <li><a href="<?php echo home_url(); ?>/"><i class="fa fa-th"></i></a></li>
                <li><?php next_post_link('%link', '<i class="fa fa-fw fa-chevron-right"></i>'); ?></li>
            </ul>
        </nav>

        <?php echo ipGetPostLikeLink(get_the_ID()); ?>
        <br>
        <?php imagepress_get_like_users(get_the_ID()); ?>

        <h3 class="widget-title"><i class="fa fa-file-text-o"></i> Image Details</h3>
        <div class="textwidget">
            <div>&copy;<?php echo date('Y'); ?> <?php the_author_posts_link(); ?></div>
            <br>
            <div><b>Image size:</b> <?php echo $filesize; ?></div>
            <div><b>Date uploaded:</b> <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?> (<?php the_time(get_option('date_format')); ?>)</div>
            <div><b>Category:</b> <?php echo ip_get_the_term_list(get_the_ID(), 'imagepress_image_category', '', ', ', '', array()); ?></div>
            <div><b>Status:</b> <?php echo get_the_term_list(get_the_ID(), 'imagepress_image_tag', '', ', ', ''); ?></div>
            <?php if(get_post_meta($i, 'imagepress_print', true) == 1) { ?>
                    <div><i class="fa fa-print"></i> Print available, contact artist for more info</div>
            <?php } ?>
        </div>
        <h3 class="widget-title"><i class="fa fa-pie-chart"></i> Image Stats</h3>
        <div class="textwidget">
            <div><b>Views:</b> <?php echo ip_getPostViews(get_the_ID()); ?></div>
            <div><b>Comments:</b> <?php echo get_comments_number(get_the_ID()); ?></div>
            <div><b>Liked by:</b> <?php echo imagepress_get_like_count(get_the_ID()); ?></div>
        </div>

        <?php
        $hub_user_info = get_userdata($author_id);

        if(get_post_meta(get_the_ID(), 'imagepress_behance', true) != '' || get_post_meta(get_the_ID(), 'imagepress_purchase', true) != '') {
            echo '<h3 class="widget-title"><i class="fa fa-external-link-square"></i> External Links</h3>';
            echo '<p>';
        }

        if(get_post_meta(get_the_ID(), 'imagepress_behance', true) != '')
            echo '<a href="' . get_post_meta(get_the_ID(), 'imagepress_behance', true) . '" class="button noir-secondary" target="_blank" rel="external"><i class="fa fa-behance-square"></i> View Behance Project</a>';
        if(get_post_meta(get_the_ID(), 'imagepress_purchase', true) != '')
            echo '<a href="' . get_post_meta(get_the_ID(), 'imagepress_purchase', true) . '" class="button noir-success" target="_blank" rel="external"><i class="fa fa-shopping-cart"></i> Purchase Print</a>';
        if(get_post_meta(get_the_ID(), 'imagepress_behance', true) != '' || get_post_meta(get_the_ID(), 'imagepress_purchase', true) != '') {
            echo '</p>';
        }
        ?>

        <?php if(get_imagepress_option('ip_mod_collections') == 1) { ?>
            <h3 class="widget-title"><i class="fa fa-folder"></i> Collections</h3>
            <?php ip_frontend_view_image_collection(get_the_ID()); ?>
            <?php ip_frontend_add_collection(get_the_ID()); ?>
        <?php } ?>
    </div>

    <div class="widget-container widget_text">
        <h3 class="widget-title"><i class="fa fa-tags"></i> Related Images</h3>
        <div class="textwidget">
            <p><i class="fa fa-user"></i> More posters by the same author (<a href="<?php echo get_author_posts_url($post->post_author); ?>">view all</a>)</p>
            <?php echo cinnamon_get_related_author_posts($post->post_author); ?>

            <p><i class="fa fa-picture-o"></i> More images from the gallery (<a href="<?php echo home_url(); ?>/">view all</a>)</p>
            <?php
            $cinnamon_post_type = get_imagepress_option('ip_slug');
            $authors_posts = get_posts(array(
                'posts_per_page' => 9,
                'post_type' => $cinnamon_post_type
            ));

            $output = '';
            if($authors_posts) {
                echo '<div class="cinnamon-grid"><ul>';
                foreach($authors_posts as $authors_post) {
                    echo '<li><a href="' . get_permalink($authors_post->ID) . '">' . get_the_post_thumbnail($authors_post->ID, 'thumbnail') . '</a></li>';
                }
                echo '</ul></div>';
            }
            ?>
        </div>
    </div>
</aside>

That’s all. Styling is up to you, but the HTML structure should work out of the box.