 |
25. August 2006, 21:15Adapting templates |
96 |
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.
erreichen.
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
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…
Pingback by Yet Another PhotoBlog - aNieto2K
[...] YAPB es un interesante plugin para Wordpress que como su nombre dice, se trata de otro photoblog. Aunque este parece bastante completo y merece la pena probarlo. [Adaptar themes][Descargar] [...]
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?
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(’&’, $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
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?
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
You’re very welcome!
Wär mir eine Ehre! :)
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.
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! :-)
Comment by Michiel E
I guess its not displayed right with your post.. it should be wit only ‘ (single quote)
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
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
Exgüsi, daran habe ich nicht gedacht. Danke der Infos trotzdem.
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?
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?
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
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?
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.
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!
Comment by Johannes
I did update the whole page - If i have overseen some errors please tell me and i’ll correct it.
Comment by ody
hi! how can i display the recent 5 or 6 thumbs in home page with the daily photo? thanks..
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!!!
Pingback by PhotoBlogging - OddJob’s IT WebLog
[...] Johannes’ site has links to themes already incorporating YAPB, otherwise you can make your own. [...]