Know-How, Open Source, Wordpress, Yet Another Photoblog

Your own photo mosaic page with WordPress and Yet Another Photoblog

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!

This entry was posted 4 years and 10 months ago on Thursday, July 24th, 2008 at 09:43 and is filed under Know-How, Open Source, Wordpress, Yet Another Photoblog.

You can follow any responses to this entry through the RSS 2.0 feed; You may leave a response, or trackback from your own site.

Tags: Know How, Mosaic, PHP, Programmierung, Templates, Wordpress, YAPB, Yet Another Photoblog

Thirty Two Replies

25. July 2008, 17:37
Comment by Pierre Therrien

Tks so much Johannes for this addon, the mosaic works perfectly well.It will now permit the extension of the project I want to put in place on my blog which consist to enable peoples to share one of there photos which represent best their reality no matter which language they use.
- 29. July 2008, 04:29
  Comment by kd
  
  So i've downloaded the zip file above and and created the mosaic page successfully. i've also assigned some images to the photoblog category but some nothing seem to appear at all. What am I doing wrong?
  - 29. July 2008, 07:46
    Comment by Johannes
    
    I do think you have to tell YAPB the category - Please have a look at my according answer in the forum.
26. July 2008, 20:42
Comment by nasser q

i'm sorry, i'm a newbie at WP and this. i'm trying to add the mosaic to the default theme, so i added this file to the folder: wp-content/themes/default/

what exactly do i do next? basically, i'm stuck on this part, where you say: "write a new page and choose your newly created page template"

can you maybe give more detailed steps as to how to do this?

thanks very much!
- 29. July 2008, 07:48
  Comment by Johannes
  
  Hi nasser q -
  
  Just go into your WP Admin Panel and write a new page. Before saving, go to the bottom of the edit page and open the tab "Page Template". You should see a list of all currently available templates including the new YAPB mosaic template.
  
  Choose it, save, done ;-)
26. July 2008, 20:49
Comment by nasser q

sorry, stupid question. feel free not to post it or answer to it, i've figured it out now.
26. July 2008, 21:27
Comment by nasser q

for some reason, this is only posting the first five photos for me. any idea why?
28. July 2008, 01:02
Comment by Graf

Is it possible to use this amazing plug-in in a non YAPB-themed wordpress site? I'd love to use it on my site, but it doesn't seem to work without your YAPB theme. Or maybe I'm wrong??
6. August 2008, 10:13
Comment by verdy

hi, can i know how to make a sidebar widget that displays a mosaic like yours?
- 23. August 2008, 19:30
  Comment by Johannes
  
  If you want a sidebar widget exactly like mine - Just use the YAPB Sidebar Widget: http://wordpress.org/extend/plugins/yapb-sidebar-widget/
8. September 2008, 01:24
Comment by jahmasta

Hi
I've try to use this sample code but i've only 5 images on my page ! Can i set up this ???

Thanks
9. September 2008, 23:40
Comment by jahmasta

get_option('yapb_default_post_category') can i change this in order to have my dynamique number of category?
Thanks
- 10. September 2008, 07:09
  Comment by Johannes
  
  Sure - My code is just a prototype to show how it can be done.
  - 10. September 2008, 08:13
    Comment by jahmasta
    
    can you explain me how does it work ?
    - 10. September 2008, 08:50
      Comment by Johannes
      
      Hi Jamastah -
      
      What means "dynamic"? Do you always post your images in other categories and if yes, how do you want to show them?
      
      Beside of that, there's a forum for that:
      http://johannes.jarolim.com/yapb-forum
22. September 2008, 18:27
Comment by Miss Britt

Is this the only way to use an archive page?
- 4. October 2008, 14:01
  Comment by jahmasta
  
  Hi i use this loop in my wp theme.
  
  ID))): ?>
  
  <a title="post_title ?>" href="ID) ?>"><img src="getThumbnailHref($thumbConfig) ?>" width="getThumbnailWidth($thumbConfig) ?>" height="getThumbnailHeight($thumbConfig) ?>" alt="post_title ?>" />
  
  In this case we can see that we display 30 latest post of the category 18.
  
  But in my case i want to catch the number of category in my loop with a little fonction but i don't know how can i do this.
  
  For exemple i have 10 categorys. Now i'm obliged to make a template by category in order to display 30 thumbnails
  of all pictures posts in each category.
  
  I want to make a unique template witch call the id where i'm and diplay it in my wordpress loop.
  Like this:
  
  ('category=18&numberposts=30');
  i would have this ('category=[id where iam]&numberposts=30');
  
  Thanks
  - 27. December 2008, 12:47
    Comment by sprouty
    
    Thanks! This worked perfectly.
27. November 2008, 18:48
Comment by jack

Hiii
Why in the mosaic page I get a vertical list of my photo and not mosaic style ?

helpppppp :(
- 28. November 2008, 14:09
  Comment by Johannes
  
  Maybe you could try to style the generated HTML elements in your themes CSS file? Usually, YAPB just generates an unordered list - The appearance gets controlled by the theme.
  - 14. January 2009, 13:38
    Comment by Owen
    
    Hi There,
    
    Thanks so much for YAPB. I also have the same problem, and was wondering what do you mean by the generated HTML elements? For more details see: http://twitter.com/findingnewo/status/1118111593
    
    Thanks so much
    - 21. June 2009, 18:43
      Comment by Jamie Hansen
      
      Hello, I have the same problem with the long, vertical list, rather than a "grid" of my photos. I have a theme based on kubric's default. How did you solve it? Thanks in advance!
2. December 2008, 14:10
Comment by McAWilliams

Firstly thanks for making this code available its been a great help, I have one question though, I have no issues showing 430+ images in MY mosaic but is there a way to gather the 430+ images and split it up into pages of say 50!

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

will obviously show up the last 50 images but I would love to paginate it if possible!
- 9. December 2008, 10:27
  Comment by Johannes
  
  Hi McAWilliams - There exists a good article explaining how to use WordPress paging in your templates:
  
  http://weblogtoolscollection.com/archives/2008/04/19/paging-and-custom-wordpress-loops/
  
  I'll try to make a little sample code page as soon as i've time.
  
  Greets from Salzburg!
10. March 2009, 07:32
Comment by Kool

Hi! I am using your latest version of the plugin and added the above template file. However, I cannot locate in the New Page section the said template. I cannot see it in the template attribute.

I am only getting 10 latest images with next/previous link below the thumbs. Thanks!
28. July 2009, 14:56
Comment by Bas

Still nobody has an idea how to solve the "vertical list of photo's" problem? Please help.
- 25. October 2009, 17:21
  Comment by cody
  
  I noticed this on another site... might be worth a shot:
  
  "If you apply a “float:left” to each of the li tags in your unordered list, they should line up horizontally for you. Then, with some margin or padding, you can space them out as you need."
22. September 2010, 12:06
Comment by Phil

You can solve the vertical list problem by simply removing the and tags in the foreach loop above.
16. October 2010, 23:18
Comment by Temetus

Hi!

How can I make pagination in to the mosaic page?

I think the php memory limit prevents me to show more than 294 posts ('&numberposts=294') at the time.. If I put 295 or more the page is just BLANK..

This USED to work, but now with WP 3.0.1 and the latest YAPB the mosaic page was just blank, so I had to limit the number of posts to 294 to show anything.

This is really annoying!
18. January 2011, 08:29
Comment by Peter

Another way of achieving this is given at globinch. Read How to Create WordPress Thumbnail Based Post Archives
http://www.globinch.com/2010/11/01/how-to-create-wordpress-thumbnail-based-post-archives/
1. May 2012, 15:43
Comment by Eutur

So can I create my mosaic page from template.

You're welcome to leave a message here

Imprint

This is the private homepage of Johannes Jarolim, Maria Cebotari Straße 6, 5020 Salzburg. You may reach me over this email address .

Das ist die private Homepage von Johannes Jarolim, Maria Cebotari Straße 6, 5020 Salzburg. Sie können mich unter dieser Emailadresse erreichen.

Photos copyrighted: Please notice that all photographs are copyrighted and must not be used without my proper permission.

Fotos unterliegen dem Urheberschutz: Alle Fotos auf dieser Seite unterliegen dem Urheberschutz und dürfen ohne meine explizite Erlaubnis nicht verwendet werden.