You’re using YAPB, you want to create or use your own theme and now you’re stuck on how to create a mosaic page featuring all your photos? Thanks god – Here’s a post describing exactly that topic ;-)

Basically, a mosaic page is a standard WP page using a custom page template. The job of the custom page template is to fetch all your YAPB images and to display them in some form.

So: Let’s just do it:

Create a page template file

So let’s start with our new page template: Create a file named tpl.yapb.mosaic.php in your current theme folder.

Throw in some WP Metadata

As a first step we define a standard PHP comment at top with meta data so WordPress can identify this file as template:

<?php
/*
Template Name: YAPB Photo Mosaic Page (Prototype)
*/
?>

Create some infrastructure

Now some default infrastructure for WP templates like calling the header, starting the WP loop, displaying the page title and content:

<?php get_header(); ?>

<!-- Let's start the WordPress loop -->
<?php if (have_posts()): while (have_posts()): the_post(); ?>

	<?php global $post; ?>

	<div class="post">

	<h1><a href="<?php echo get_permalink() ?>"><?php the_title(); ?></a></h1>
	<?php the_content('read more...'); ?>

Define what you want

To display the thumbnails of all our photos, we need to know what we want to fetch exactly. In my case, i assign each photoblog post to a special category “photoblog”. That category is configured in YAPB – so i can ask for it’s id and get all (or at least the last 1000) posts of that category with a simple WordPress function.

Additionally i use this php part to define the format of the thumbnails i want to display on this page:

<?php 

  // Let's get the last 1000 photoblog entries
  $photoblog_posts = get_posts(
    'category=' . get_option('yapb_default_post_category') .
    '&numberposts=1000'
  );

  // Let's define the needed thumbnail format
  $thumbConfig = array(
    'h=80',
    'q=100',
    'fltr[]=usm|60|0.5|3'
  );

?>

Loop through the fetched posts

Since we should have all needed posts now, we simply cycle through all of them, get the image and display the thumbnails. In this sample i use a unordered list as structure for the images:

  <ul>

    <?php foreach($photoblog_posts as $photoblog_post): ?>

      <?php if (!is_null($image = YapbImage::getInstanceFromDb($photoblog_post->ID))): ?>

        <li><a title="<?php echo $photoblog_post->post_title ?>" href="<?php echo get_permalink($photoblog_post->ID) ?>"><img src="<?php echo $image->getThumbnailHref($thumbConfig) ?>" width="<?php echo $image->getThumbnailWidth($thumbConfig) ?>" height="<?php echo $image->getThumbnailHeight($thumbConfig) ?>" alt="<?php echo $photoblog_post->post_title ?>" /></a></li>

      <?php endif ?>

    <?php endforeach ?>

  </ul>

Close the previously created infrastructure

To cleanly finalize the page template we now close the previously opened WordPress loop and call the footer.

<?php endwhile; endif; ?><!-- end of the WP loop -->

<?php get_footer(); ?>

The complete file may be found in this .zip file (275 KB).

Finally just use the new page template

To use the page template, just go to your admin panel, write a new page and choose your newly created page template – Voila: You have your first YAPB mosaic page!