Welcome to the private homepage of Johannes Jarolim, Salzburg, Austria, Europe. Willkommen auf der privaten Homepage von Johannes Jarolim, Salzburg, Österreich.

First of all: Adapting your theme to be “YAPB-Ready” is definitely no magic (Or as Douglas Adams used to write: Don’t Panic ;-). There are just a few points to know and your way to an attractive and individual photoblog is free.

Does adapting a theme sounds like rocket science to you? Maybe one of the Ready-to-use-templates meets your taste.

The Basics

YAPB gives the possibility to attach photos/images to your posts and to display them in various formats and styles. This section describes the first essential things you can do in your blogs template. If you decide to adapt your theme manually, don’t forget to turn off the automatic-image-insertion feature on the YAPB Options page.

Do it in the loop

First of all: All those code samples described underneath have to be used in the loop.

Checking for image existance

Since you’re free to post normal WordPress articles or photoblog entries, there must be a possibility to check wheter the current displayed post is a photoblog post or not – Nothing easier than that:

[code language=”php”]<?php if (yapb_is_photoblog_post()): ?>
<!– This definitly is a YAPB Photoblog post –>
<?php else: ?>
<!– No image attached: This is a normal WordPress post –>
<?php endif ?>[/code]

Displaying the image

Now we know that we have an image, we want to display it:

[code language=”php”]<?php if (yapb_is_photoblog_post()): ?>
<?php yapb_image(”, array(‘alt’ => ‘My marvelous image’), ”) ?>
<?php else: ?>

<?php endif ?>[/code]

For more information on yapb_image() and yapb_get_image() refer to the template functions documentation

Displaying a thumbnail

To one of the interesting parts: thumbnailing. YAPB uses phpThumb, a very stable and mature PHP library, for it’s thumbnailing. YAPB tries to hide all those nasty details and offers you a simple and refreshing template function which does all that resizing, caching and displaying-stuff for you:

[code language=”php”]<?php if (yapb_is_photoblog_post()): ?>

<?php

echo yapb_get_thumbnail(
‘<div>’, // HTML before image tag
array(
‘alt’ => ‘My marvelous first thumbnail’, // image tag alt attribute
‘rel’ => ‘lightbox’ // image tag rel attribute
),
‘</div>’, // HTML after image tag
array(‘w=200′, ‘q=90′), // phpThumb configuration parameters
‘thumbnail’ // image tag custom css class
);

?>

<?php else: ?>

<?php endif ?>[/code]

Nearly the same as yapb_image() – But with additional phpThumb configuration parameters that define the desired size and css class of your thumbnail image.

Displaying EXIF data

The next cool thing to do is displaying the EXIF data of your image. YAPB does use the easy-to-use library phpExifRW and tries to hide it’s complexity from you as always:

[code language=”php”]<?php if (yapb_is_photoblog_post()): ?>

<h3>EXIF</h3>
<ul>

<?php

yapb_exif(
‘li-exif’, // CSS Class for the LIs
‘: ‘, // Separator between EXIF token name and value
‘<strong>’, // HTML before EXIF token name
‘</strong>’, // HTML after EXIF token name
‘<i>’, // HTML before EXIF token value
‘</i>’ // HTML after EXIF token value
)

?>

</ul>

<?php else: ?>

<?php endif ?>[/code]

Have a look into the according documentation to see what can be done with this template function.

More advanced stuff

This section won’t only highlight the more complex templating possibilites, but also some general WordPress functionality that may spice up your theme:

Attaining the YAPB-Imageobject directly

Templating functions are cool – Until you need to, let’s say… display the thumbnail of a post not included in the current loop. So there should be a way to get grip on the YAPB Image Object directly to attain full control.

Example: You’re fetching one post out of the DB by using get_next_post() and want to know if it’s a photoblog article:

[code language=”php”]<?php

// Use the WP Infrastructure to get the next post

$theNextPost = get_next_post();

// Check if we’ve gotten something

if (!empty($nextPost)) {

// Yes, we have a next post
// Let’s check if it has an image attached:

if (!is_null($image = YapbImage::getInstanceFromDb($theNextPost->ID))) {

// Yes, we have an image
echo ‘Heureka! The next post is a photoblog article.';

} else {

// no image ahead
echo ‘Alas! Just a normal WordPress article ahead.';

}

}

?>[/code]

Thumbnail navigation (previous and next image)

Since we know how to get the image object by hand, we could now use this know-how to create a little “next image, previous image” navigation with thumbnails as links.

I only show the code for the “next post” part – The “previous post” part is basically the same thing with usage of the get_previous_post() function:

[code language=”php”]<?php

// Use the WP Infrastructure to get the next post

$theNextPost = get_next_post();

// Check if we’ve gotten something

if (!empty($nextPost)) {

// Yes, we have a next post
// Let’s check if it has an image attached:

if (!is_null($image = YapbImage::getInstanceFromDb($theNextPost->ID))) {

// Yes, we have an image
// Let’s define the thumbnail configuration

$thumbnailConfiguration = array(
‘w=75′, // 75 pixels width
‘h=75′, // 75 pixels height
‘zc=1′ // crop the image
);

// And output the image tag

echo ‘<a href="’ . get_permalink($theNextPost->ID) . ‘">';
echo ‘<img ‘ .
‘border="0" ‘ .
‘src="’ . $image->getThumbnailHref($thumbnailConfiguration) . ‘" ‘ .
‘alt="To the next post" ‘ .
‘width="’ . $image->getThumbnailWidth($thumbnailConfiguration) . ‘" ‘ .
‘height="’ . $image->getThumbnailHeight($thumbnailConfiguration) . ‘" ‘ .
‘/>';
echo ‘</a>';

} else {

// no image – we display a text link
echo ‘<a href="’ . get_permalink($theNextPost->ID) . ‘">To the next post</a>';

}
}

?>[/code]

For more information on the YAPB Image Object, just have a look into the lib/YapbImage.class.php – It should be documented sufficiently.

More to follow

So much for now – If you have ideas and code samples for this page – Leave a comment or post something in the forum – I’ll take a look.

Fourty Seven Replies

  1. 5. May 2009, 23:23
    Comment by Bal
    Hello - do you have have a tutorial on how to create the archives page that shows only the images in each month? Or may be there is a link on this site some where that explains it?

    Thanks
  2. 5. May 2009, 23:24
    Comment by Bal
    To the question that I just posted a second ago - i want to create this page and style. Please guide on how to do this?

    http://johannes.jarolim.com/blog/fotografie/bildmosaik/
  3. 7. August 2009, 11:08
    Comment by Seven Jeans
    I tried this however there is some problem in the'thumbnail' .Anyway, let me try it once more.
  4. 19. August 2009, 15:19
    Comment by Michael
    Hi,

    Just a simple question: how do I manage to link the thumbnails to the original image ?

    Do I have to change something in the templates ?

    Thanks

    M
  5. 23. October 2009, 03:06
    Comment by Jeff M
    Is it possible to limit the number of "featured-photos" to show. I would really like it to show only 3 but i do not see a variable for it anywhere. I have set the max posts in the general wordpress settings to 3 but this did work.
    • 27. October 2009, 19:35
      Comment by Jeff M
      found it. i wasn't looking outsode of the loop. at the top of my index page was:

      $current_post = new WP_Query("showposts=7");

      which shows 1 main photo and 6 featured photos.

      changed it from 7 to 4 and now i get what i want.
  6. 13. July 2011, 14:32
    Comment by Robin
    Hi, I'm interested to know if there is a way to make YAPB aware of which theme is being used. I'm using the WordPress Mobile Pack to display a mobile version of the site. The problem is that the single pages are being forced to display the images at the size specified in the YAPB thumbnail settings, which don't fit mobile screen, set at 550 px to fit my theme on a normal monitor. If there was a way to call the thumbnail size that I have set for the homepage (200 px) into the mobile theme, or any other way to control the image size on the mobile theme, that would be outstanding! Any ideas? Too bad about your forum- would have posted this there / looked for answers there instead. Hope you get a solution there soon!
    • 17. July 2011, 07:39
      Comment by Robin
      Your plug-in description on Wordpress.org says this:

      On the fly thumbnail generation - Use multiple thumbnail sizes where and when you need them: Thumbnail generation gets controlled by the theme.

      This sounds to be exactly what I am after - may not have explained it right in the first post. How exactly do I do this? Where can I find some instuctions?
  7. 7. September 2011, 18:50
    Comment by Ibon Garcia
    First of all thanks for the nice pluging. However I am not able to show the images in a normal Worpress page. I have defined the following template yapb page.php:





    'My marvelous image'), '') ?>





    But the YAB images are not shown. What is wrong here? Thanks a lot
  8. 16. January 2012, 18:26
    Comment by Claire Mishhol
    Any kind of alternatives to paying out by credit card for a pay in?
    • 19. January 2012, 09:02
      Comment by Johannes
      I'm sorry i'm only able to offer Paypal for donations. In a bunch of countries, you may send money from your bank account to paypal in the first place.
  9. 5. December 2012, 17:51
    Comment by John Nixon
    Hi Johannes!
    I started using YaPB in September this year and thought it was fantastic for about a month. Since the beginning of November 2012, however, something seems to be broken. YaPB images for each post are showing twice, once on the post where they are supposed to be, but also above the header. I thought at first this was down to a fault in the theme I was using, but I've tested it out with four or five different themes with the same result. I wrote you on the WP Forum associated with YaPB (See: Post image duplicated and displayed above header!) but haven't heard anything back. Version 1.10.9 has not solved the problem which started (I think) with 1.10.7. Is there some place I can get earlier versions of YaPB?
    Thanks,
    John
    • 5. December 2012, 18:00
      Comment by Johannes
      Hi John -

      You can always get older versions of YAPB via SVN directly out of the wordpress plugin repository.

      I'd try to deactivate all of your plugins first - This is most propably a side effect with another plugin. If the effect dissapears after deactiviting all plugins, reactivate one plugin after another and always have a look in between.

      So you should be able to identify the plugin causing the troubles.

      br from Salzburg

      - Johannes
  10. 1. March 2013, 22:29
    Comment by Chris G
    Hi Johannes,

    I noticed that yapb generated cache images lack the EXIF information from the originally uploaded image. Is there any possible way to preserve EXIF data (or at least some of the EXIF data) in the yapb generated cache images other than hacking into the code?

    Cheers,
    Chris
  11. 15. November 2007, 06:06
    Comment by Omar
    Hola

    Te pregunto a vos porque hablas español.

    Estos son los cambios que debo hacer para que me muestre las ultimas fotos en el widgets?

You're welcome to leave a message here

Reload Image