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. 30. August 2006, 04:47
    Comment by Matt Hum

    Hi. I'm wondering how you got the thumbnails on your front page be able to be clicked and have them pop up like they did. I would like to incorporate that ability onto my blog, if possible. thanks. -Matt


    Hi Matt - That can be achieved with the The Lightbox JS v2.0 library by Lokesh Dhakar.

  2. 31. August 2006, 10:58
    Comment by Deadpan110

    Hi, What a fantastic plugin... :)


    In responce to Matt Hum's comment, i followed the above examples and using the Theme Editor in wordpress and edited archive.php


    Find the line: <?php the_excerpt() ?> And make sure the following goes ABOVE it:


    <?php if ($post->image): ?>
    <a href="<?php _fcksavedurl=""<?php" the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
    <img src="<?php echo $post->image->getThumbnailHref(array('w=50','fltr[]=usm|30|0.5|3')) ?>" width="50" align="left" style="margin: 0 5px 5px 0;" /></a>
    <?php endif ?>


    I set my image size to be a tiny 50pixels wide, so alter to match your requirements. Also, my page entry does not show the full size image either, but has a link to the full size image by editing single.php and changing:


    <img src="<?php echo $post->image->uri ?>"?>">


    To the following:


    <a href="<?php echo $post->image->uri ?>"> <img src="<?php echo $post->image->getThumbnailHref(array('w=450','fltr[]=usm|30|1.5|3')) ?>" width="450" align="center" style="margin: 10px 0 10px 0;"> </a>


    Hope that helps!! ;)


    Thanks for your contribution! I think others will benefit from this code snippets. Happy photoblogging!

  3. 1. September 2006, 14:21
    Comment by frank

    Also ich hab mal ein wenig getestet…
    Gute Arbeit, aber:
    php?w=200&fltr[]=usm|30|0.5|3&src=/wp-content/uploads
    hier gehören die beiden &zeichen umschrieben


    zu den img-tags gehört zwingend ein alt="xx" bzw. noch besser auch ein title="xxx"


    vielleicht kannst das mit einem abfragefenster per javascript lösen…oder notfalls den bildnamen auslesen


    die templateanpassung funktioniert so leicht nicht bei allen themes, aber wer komplizierte nimmt, wird sich auch halbwegs in den templatefiles zurechtfinden


    gut wäre dass the-content im im artikel gleich als bildunterschrift genutzt werden kann, zu jedem Bild gehört nun mal auch eine Bildunterschrift


    vielleicht hilft das anregungen beim weiterbauen
    grüße, frank


    Hallo Frank - Danke für dein Feedback!


    Zu den einzelnen Punkten:


    php?w=200&fltr[]=usm|30|0.5|3&src=/wp-content/uploads
    hier gehören die beiden &zeichen umschrieben


    Das sind ganz normale GET-Parameter des Thumbnailers und müßten so stehen bleiben. Wenn man sie auf &amp; umschreiben würde, wären sie keine eigenen Parameter mehr, sondern Teil vom w= Parameter (Funktioniert dann auch nicht mehr). Oder habe ich dich da jetzt falsch verstanden?


    zu den img-tags gehört zwingend ein alt="xx" bzw. noch besser auch ein title="xxx"
    vielleicht kannst das mit einem abfragefenster per javascript lösen…oder notfalls den bildnamen auslesen
    gut wäre dass the-content im im artikel gleich als bildunterschrift genutzt werden kann, zu jedem Bild gehört nun mal auch eine Bildunterschrift


    Ich habe alt und title Attribute im Beispielsquelltext absichtlich weggelassen, damit das ganze kürzer und verständlicher wird. Du kannst sie in deinem Template natürlich dazutun. Grundsätzlich sehe ich die Artikelüberschrift in einem Post auch gleichzeitig als den Titel des Bildes an, da es sich in einem Photoblog-Post einzig allein nur um das Bild dreht. Den Text des Posts sehe ich als die Beschreibung des Bildes an. Dh. ich würde das Bild folgendermaßen kompletieren: <img src="..." alt="<?php the_title(); ?>" title="<?php the_title() ?>" />


    Sollte ich IPTC-Support hinzufügen, würde ich in diesem Sinne höchstwahrscheinlich eine Option "Set Post title to IPTC Image Name" einfügen, die das Post automatisch umbenennt.


    Wenn du das so nicht haben möchtest kannst du das sehr leicht umgehen: In der Schreiben/Beitrag schreiben-Maske (Advanced) kannst du dir schon mit WordPress-eigenen Mitteln beliebig viele benutzerdefinierte Felder definieren. Definiere dir zB. ein Feld "bildname", Befülle es beim Post mit dem gewünschten Bildnamen und ergänze deinen Image-Tag im Template folgendermaßen: <img src="..." alt="<?php echo get_post_meta(the_ID(), 'bildname') ?>" title="<?php echo get_post_meta(the_ID(), 'bildname') ?>" />


    die templateanpassung funktioniert so leicht nicht bei allen themes, aber wer komplizierte nimmt, wird sich auch halbwegs in den templatefiles zurechtfinden


    Bei leicht rede ich ja eigentlich auch nur vom PHP-Code-im-Wordpress-Loop-platzieren. Dieser Teil ist ja auch einfach und funktioniert. Dass eigentliche Suchen, Layouten und CSS-Herumwurschteln, damit das ganze an der gewünschten Position im Template erscheint und dann auch noch gut ausschaut, kann dann natürlich viel Zeit beanspruchen - Aber das liegt ja nicht an meinem Plugin, sondern am ursprünglichen Templatedesign, den Ansprüchen und dem Ergeiz dessjenigen, der es dann benutzen will.


    lG aus Salzburg,


    Johannes

  4. 4. September 2006, 13:43
    Comment by frank

    Danke für die ausführliche Antwort, Johannes...
    Grundsätzlich kann ich Deinen Gedanken ja folgen...


    Nur ist es eben einfach so, ein User sieht Dein tolles Plugin, Wow, hab ich schon lang gesucht, photoblogfunktionalität... muss ich haben... und installiert... nur ist es aber eben oft auch so, dass sich nicht jeder Wordpressnutzer Gedanken über Standardkonformität oder gar Zugänglichkeit und Suchmaschinenfreundlichkeit macht, sondern sich einfach darauf verlässt, dass Plugins wie Wordpress alles zu können scheinen...


    insofern macht die Vorgabe von auszufüllendem ALT- oder TITLE-Attribut durchaus Sinn.


    wenn die "Unds" nicht umgeschrieben sind, meckert der Validator, ist nicht schlimm, nur ein Schönheitsfehler, im Pixelpost hab ich sie mal umgeschrieben, da funktionierte trotzdem alles, bei Dir hab ichs nicht gemacht, da ich auf meiner "spielwiese" grad eine Hemingwayadaption laufen hab, in der ich die Single.php komplett umkrempeln müsst, um dort Dein Plugin sinnhaft zu verwenden...


    wenn du das Titelauslesen mit dem IPTC-Support verbindest, werden sich sicher viele freuen. Damit wird das ganze auch für Fotografen nutzbar, die eh auf Verschlagwortung damit setzen, bzw. damit ihre Datenbank- /Suchfunktionalität verbessern.


    Hi Frank - Hast eh recht. Alt und Title sollten im Beispiel mit dabei sein - Ich werd mal schauen, wie ich das in die Doku bekommen, ohne dass das zu lange wird. Freut mich auf jeden Fall, dass jemand am Plugin interessiert ist. IPTC muß ich mir noch anschauen - Und derzeit ist meine freie Zeit nicht wirklich üppig bemessen. Happy Photoblogging wünsch ich auf jeden Fall mal.

  5. 4. September 2006, 15:44
    Comment by frank

    Kein Thema.
    Das Plugin und der Sinn dahinter, ist schon weit mehr als ein netter Versuch. Mit dem was als Potenzial drinsteckt, reisst du noch ganz andre vom andre Hocker. Lass Dir zeit, und rede drüber, die Verbreitung geht dann von ganz allein...

    Nur brauchst dann vielleicht webspace mit mehr traffic...
    *lächelt.leise

    Danke für das Lob - So hab ich's eigentlich geplant... Ich finde die Idee ansich ziemlich berauschend und desswegen habe ich die Sache ausprogrammiert.
  6. 4. September 2006, 15:50
    Comment by frank
    und nur so als dreingabe, zum thema plugins... wenn du eh alle kommentare moderierst, macht die grundeinstellung von wordpress noch weniger sinn, als sie eh je haben könnte. Ich nein die "no follow" einstellung. Es gibt plugins, wie "dofollow", die das aufheben. no follow bestraft jeden stinknormalen blogger, der bei dir kommentiert, die spammer hebeln das eh längst aus...

    Danke für den Hinweis - Nur weil ich ein Plugin schreiben kann, heißt das noch lange nicht, dass ich schon alle Aspekte des Systems kenne ;-) Ist schon installiert.
  7. 20. September 2006, 11:52
    Comment by yovko
    Great plugin!!

    Just a short patch… The function getThumbnailHref generates invalid XHTML code - you can fix this if you change in YapbImage.class.php the row with return YAPB_PLUGIN_PATH…


    just change


    implode('&', $parameters);


    with


    implode('&amp;', $parameters);


    Thanks for your feedback! You'll find the 1.1.4 version of the plugin on the download page, if you haven't changed that by yourself.
  8. 26. September 2006, 05:01
    Comment by beej

    thanks for the plugin. been looking for some photoblog tools to use with wp for the longest time. is there a way to display the last 3 posts/photos as excerpts under the main post?


    Thanks for the feedback! You can achieve that easely by using multiple wordpress loops on one page - This page may interest you: http://codex.wordpress.org/The_Loop#Multiple_Loops. Happy photoblogging!

  9. 27. September 2006, 05:52
    Comment by beej
    I've set up another loop. Is there a way to get the thumbnail automatically inserted in the optional excerpt field when I'm posting?

    YAPB doesn't support this since i don't want to plaster the whole blog with thumbnails. But as seen above it's very easy to insert three or four lines of code to actually see a thumbnail wherever you want. The only thing i didn't investigate: How to show a loop of images of one categegory only so you'll see only photos.
  10. 13. January 2007, 23:55
    Comment by Mac

    Hi Johannes.
    Is there a quick way to get the dimension of the image? I'd like to enhance the image with an imagemap (or whatever else fits) for the navigation.


    I didn't find any obvious code for that, but have to admit that I did not check toooo deep.


    Regards,
    Mac


    Hi Mac - You can find the answer to your question here in the forum. Additionally: Since Beta 1.3 it's possible to get the dimensions of your thumbnails (Even if they weren't created yet).
  11. 19. January 2007, 13:18
    Comment by Mac

    Well … got me. Thanks alot!
    I recently designed a theme specialized to YAPB (http://mac.defx.de/grain-theme) and this will greatly enhance it!


    Well - Congratulations! Great theme! Hope you don't mind if i present it a little bit more popular?

  12. 20. January 2007, 14:40
    Comment by Mac
    You're very welcome!
    Wär mir eine Ehre! :)
  13. 11. February 2007, 08:30
    Comment by Patrick McFarland (Diablo-D3)
    In the section "And where are width and height?" I think you mean $post->image for width and height, not $post->img. It took me ten minutes of wondering why that code didn't work until that hit me.
    • 19. February 2008, 16:46
      Comment by Michiel E
      Same for me. very frustrating... and the syntax is not right here either:

      array(’w=450′,’fltr[]=usm|30|1.5|3′)


      it should be:

      array('w=240','fltr[]=usm|30|0.5|3')

      besides that, great plugin! :-)
    • 19. February 2008, 16:49
      Comment by Michiel E
      I guess its not displayed right with your post.. it should be wit only ' (single quote)
  14. 22. April 2007, 16:41
    Comment by Matthias
    Hallo!
    Danke für dieses spitzen PLugin :top:
    Installation und Anpassung hat alles ohne Probleme geklappt, jedoch bin Ich grad am grübeln, wie man ein Random Beitrag bzw nur das Bild mit Link zu dem Beitrag in die Sidebar kriegt. Hab schon probiert ein Skript anzupassen, bin jedoch leider gescheitert.(Den Link zum Beitrag krieg Ich hin, das er jedoch ein bild mit anzeigt klappt nicht)

    Gibt es evtl eine einfache Lösung?

    MfG
  15. 6. May 2007, 14:36
    Comment by Strohsilo

    Gerade versuche ich das YAPB in ein neues Blog zu integieren, bisher mit Erfolg. Nur kriege ich es nicht hin, dass die quadratischen Thumbs nicht verzogen erscheinen, resp. dass sie nur aus einem Ausschnitt des Bildes generiert werden.


    Ich seh bei ImageMagick nicht so durch, daher habe ich am Script nichts geändert.


    Gibt es da eine einfache Lösung?


    Danke und Gruss.


    Hi - Bitte stelle deine Fragen im Forum - Dafür habe ich es eingerichtet. Zweitens tut der Parameter zc (Zoomcrop) genau das, was du brauchst. Siehe auch diese Seite für eine Referenz aller Möglichkeiten: http://phpthumb.sourceforge.net/demo/docs/phpthumb.readme.txt

  16. 7. May 2007, 15:16
    Comment by Strohsilo
    Exgüsi, daran habe ich nicht gedacht. Danke der Infos trotzdem.
  17. 8. May 2007, 05:56
    Comment by Dee
    Thanks for the great plugin. I am having an issue when it comes to paging. FOr some reasons when i have this plugin activated the paging doesnt seem to work on my blog. As soon as i deacivate it, everything works fine. Is there anything i am missing?
  18. 22. August 2007, 02:21
    Comment by Mirko
    Johannes, great and easy to set up template. One question that you have answered partially is that of the clickable index images.

    Right now I'm trying to understand Wordpress and currently I'm using the default Kubrick theme. I can't seem to make the index images clickable in any way. I've looked in all of that themes template files but can't find a reference to any of the YAPB code. Is any other place that I should be looking?
    • 22. August 2007, 07:51
      Comment by Johannes
      Hi Mirko -

      In it's default configuration, YAPB inserts the images into your theme *magically* ;-) You would have to disable the "automatic image insertion" feature and insert the mentioned YAPB code into your theme manually to have more control over the output.

      Greets from Salzburg,

      Johannes
  19. 6. November 2007, 22:29
    Comment by ct
    Hi Johannes,
    Thanks very much for creating this plugin.
    I would love to have it work on a page template where I can specify the category id to have the related pages' links and thumbnail displayed. Is that possible?
  20. 31. December 2007, 07:22
    Comment by Shae
    For what it's worth, I'm having the same problem as Dee. Thumbnails in the sidebar make my previous and next buttons on the main page not work properly.
  21. 16. March 2008, 03:32
    Comment by antilog
    I still cannot get thumbnails size in the loop post set. What am I missing? Tried setting plugin options, tried using the code snippets on this page (getting parsing errors)...

    Thanks!
    • 15. April 2008, 11:26
      Comment by Johannes
      I did update the whole page - If i have overseen some errors please tell me and i'll correct it.
  22. 20. May 2008, 15:25
    Comment by ody
    hi! how can i display the recent 5 or 6 thumbs in home page with the daily photo? thanks..
  23. 30. June 2008, 00:24
    Comment by Perry
    I am trying to convert from a kludgy page system to something that all I have to do is upload, perhaps comment and done. I would like to show one group of photos in a folder at a time, accessing through a link, slideshow not required but having thumbnails of all of the photos showing required. See the galleries section of out existing website and all the other info available to see what I am trying to simplify. I have converted most everything to WP and I now at the point of including galleries and I am lost on how to proceed. Thanks for any help!!!
  24. 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

CAPTCHA Image
Reload Image