Willkommen auf der privaten Homepage von Johannes Jarolim, Salzburg, Österreich

Welcome to the private homepage of Johannes Jarolim, Salzburg, Austria, Europe.

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 on Thursday 24. July 2008 at 09:43.

Tags: , , , , , , ,

17 Comments »

2008-07-25 17:37:28
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.

2008-07-29 04:29:03
Comment by kd Subscribed to comments via email

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?

2008-07-29 07:46:11
Comment by Johannes

I do think you have to tell YAPB the category - Please have a look at my according answer in the forum.

 
 
 
2008-07-26 20:42:55
Comment by nasser q Subscribed to comments via email

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!

2008-07-29 07:48:28
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 ;-)

 
 
2008-07-26 20:49:55
Comment by nasser q Subscribed to comments via email

sorry, stupid question. feel free not to post it or answer to it, i’ve figured it out now.

 
2008-07-26 21:27:31
Comment by nasser q Subscribed to comments via email

for some reason, this is only posting the first five photos for me. any idea why?

 
2008-07-28 01:02:43
Comment by Graf Subscribed to comments via email

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??

 
2008-08-06 10:13:08
Comment by verdy

hi, can i know how to make a sidebar widget that displays a mosaic like yours?

2008-08-23 19:30:26
Comment by Johannes

If you want a sidebar widget exactly like mine - Just use the YAPB Sidebar Widget: http://wordpress.org/extend/pl.....ar-widget/

 
 
2008-09-08 01:24:44
Comment by jahmasta Subscribed to comments via email

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

Thanks

 
2008-09-09 23:40:10
Comment by jahmasta Subscribed to comments via email

get_option(’yapb_default_post_category’) can i change this in order to have my dynamique number of category?
Thanks

2008-09-10 07:09:01
Comment by Johannes

Sure - My code is just a prototype to show how it can be done.

2008-09-10 08:13:40
Comment by jahmasta Subscribed to comments via email

can you explain me how does it work ?

2008-09-10 08:50:51
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

Comments wont nest below this level
 
 
 
 
2008-09-22 18:27:34
Comment by Miss Britt Subscribed to comments via email

Is this the only way to use an archive page?

2008-10-04 14:01:06
Comment by jahmasta Subscribed to comments via email

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

 
 

Respond now

Name (required)
E-mail (required - never shown publicly)
Website
Spam protection: Sum of 2 + 12 ?
Your Comment (smaller size | larger size)