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:
<?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 ?>
Displaying the image
Now we know that we have an image, we want to display it:
<?php if (yapb_is_photoblog_post()): ?>
<?php yapb_image('', array('alt' => 'My marvelous image'), '') ?>
<?php else: ?>
...
<?php endif ?>
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:
<?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 ?>
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:
<?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 ?>
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:
<?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.';
}
}
?>
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:
<?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>';
}
}
?>
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.
.
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
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!! ;)
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
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 & 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
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.
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
Comment by frank
Comment by yovko
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('&', $parameters);
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?
Comment by beej
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
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!
Comment by Mac
Wär mir eine Ehre! :)
Comment by Patrick McFarland (Diablo-D3)
Comment by Michiel E
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! :-)
Comment by Michiel E
Comment by Matthias
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
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.
Comment by Strohsilo
Comment by Dee
Comment by Mirko
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?
Comment by Johannes
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
Comment by ct
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?
Comment by Shae
Comment by antilog
Thanks!
Comment by Johannes
Comment by ody
Comment by Perry
Comment by jahmasta
This page is the mother of 10 other pages always using (page like caterogy) theme1, theme2, theme3, ...
I want to display a random picture blok on the mother page with 100 pictures with a mix of all the child pages. And want to have 100 picture by page theme(1,2,3,...) with navigation for all the posts.
Can u explain me how can i do this please ?
Thanks for u're help.
Best regards Jimmy
Comment by zeniph
line 09 should be:
haha I need to stop assuming its my code messing things up all the time (though it does anyway)