andreaslinde.com

Sometimes interesting, sometimes boring

Integrating flickr Album into K2

Sep 27th 2005
Internet
56 Comments
respond
trackback

I integrated my flickr Albums using version 0.5 of the plugin falbum into the Wordpress Mod K2 and got some questions about how it is done. So I try to explain what I did so you can do the same on your own blog ;-)

After you downloaded, installed and configured the plugin you can continue with the following steps.

1. Get a “Photos” menu item that is highlighted on the main “Photos” page

Copy the file falbum-wp.php from the falbum plugin folder into the k2 themes folder. Then edit that file and put the following lines on top of the existing code:

<?php /*
Template Name: Photo Album Page template
*/ ?>

Now this file is available as a page template for Wordpress. Go into Wordpress Admin and create a new page and assign it to the newly created template with the name “Photo Album Page template”. The page title and page slug can be assigned to “photos” (Same value you used in falbum configuration for the URL root value). All other fields do not have to be entered (they wouldn’t appear on the page anyway).

2. Adjust falbum layout and stylesheet

The default stylesheet uses other css classes than K2, so these have to be adjusted. Download this adjusted falbum stylesheet file with most layout breaking elements commented. Additionally you have to adjust some falbum code. Replace the following code in the copied falbum-wp.php file:

<div id="content" class="narrowcolumn">

into

<div class="primary">

and also replace the following code in the copied file

require_once('../../../wp-blog-header.php');
$tdir = get_template_directory();
//echo '<pre>'.$tdir.'</pre>';
if (file_exists($tdir."/falbum-wp.php")) {
include_once($tdir."/falbum-wp.php");
} else {
$_SERVER['PATH_INFO'] = '';

into

{

Update: Alternative download this edited falbum-wp.php file and copy this into your k2 themes directory.

3. Done

Now you should have a working and integrated falbum plugin in a K2 based blog. Any further questions or did I miss out something? Just ask.

Enjoy ;-)



Explore Recent



Leave a Reply

56 Comments

  1. I’m pretty sure I’ve followed everything verbatim but I’m getting errors on the page trying to make a call to the header.
    http://www.frozencore.net/photos/

  2. Hi Mike, thanks for the hint. Updated the description. The falbum-wp.php files have different content in the two directories!

  3. that did the trick! thanks

  4. I am getting this error……

    Parse error: parse error, unexpected ‘

    {

    /wp-content/plugins/falbum/falbum.js”>
    /wp-content/plugins/falbum/overlib.js”>

  5. Forgot….. can’t post code. I have followed everything, though do we replace ALL of the code in the second step with just a { ? The code within the third blockquote.

  6. Sean: yes, in the second step replace alle the code with just { or alternatively remove it instead of replacing it and also remove } at the very end of the file.
    Also make sure you did not remove the following line (as it seems for me you did):
    get_header(); ?>

  7. That did the trick Andreas…. (the download)

    Thank you so much for your time and generosity.

  8. This all worked out great for me, but what about the drop shadows? Do they just break K2 so much that I can’t have them? Or is there still a way for me to have the drop shadows?

  9. Jason, if you want drop shadows, all you have to do is adjust the stylesheet commands to get them. Can’t tell you which, since I didn’t look at it and don’t have a personal need for it.

  10. peter

    My question is not related to falbum, but I’ll ask for a bit of your time because you seem to have the same software and hardware setup, yet have avoided a minor problem that I can’t figure out.

    I’ve just started using WP 1.5.2 and K2 Beta One 96, and I cannot post an apostrophe without it resulting in a whole string of single quotes. I’m using a PowerBook G4 (OS 10.4.2) if that makes any difference. For an example of what I’m talking about, please see the directory /words on the domain name listed on my email address.

    I have no experience with php or css, but I do know some basic html. I’m a novice at this, so I have not yet taken a look at the code.

    Any advice you can offer would be appreciated. Vielen Danke!

  11. thanks man, thanks a lot, u rule.

  12. Thanks for the howto and sample files! FAlbum looks MUCH better in K2 now.

  13. peter: Sorry for the late response but it seems you already solved the problem. I am curious, what was it?

    Mavto, D’Arcy Norman: Thanks guys ;-)

  14. good tutorial. thx andreas its working gr8 on my blog.

  15. Hello there! Need some help. ;) Go to krisandapril.us/about and then go to the subpage called “photos” and you’ll see exactly what my problem is. In addition to this, it looks horrible on IE. ((SIGH))

  16. This is what it says on line 378:

    foreach($page_tree[$parent]['children'] as $page_id) {
    $cur_page = $page_tree[$page_id];
    $title = $cur_page['title'];

  17. NEVERMIND… lol, I followed what you said earlier to Mike. There ARE two different falbum-wp.php files. Silly ME! I downloaded the adjustment you made on that file and inserted it into both the k2 theme file AND the plugin file… sheesh!! Hope everyone reads this and won’t make my mistake, heh.

  18. Okay, this time it is messed up. On my sidebar it says:
    Warning: Invalid argument supplied for foreach() in /home/krisanda/public_html/wp-includes/template-functions-post.php on line 378

    Other than that, it works fine. :)

  19. April: is the Page slug value of the photos page the same as the Page Title set to “photos” and the page parent set to “Main Page (no parent)” ?

  20. Thanks for this guide, just got things working. I’m getting the same error as April, and my page title/stub/etc are all set to the same value.

  21. Sam

    Hi,
    I have the same problem as April & Jon

  22. Yep, it was set to “no parent”

  23. Warning: Invalid argument supplied for foreach() in /home/hisyam2/public_html/wp-includes/template-functions-post.php on line 378
    remove the get sidebar (z_Z)

  24. Thank you for the nice tutorial! The thing works fine in IE6, but not in firefox, it doesn’t display the pictures/thumbs… Other sites/falbums (including yours) work just fine…

  25. Hisyam: that does get rid of the error. I’m just wondering now how to get the tag cloud, like Andreas has.

  26. I removed the get_sidebar and it seems to work
    but it doesn’t work in firefox
    see there http://canada.bultez.info/flickr

    Any clue ?

    Thanks, Sam

  27. Jeff

    How did you get the tags to show up on the sidebar? I’ve tried but that doesn’t work. Thanks!

  28. Andreas,

    Thanks for the walkthrough. It all seems to work fine except for two remaining problems:

    1. Page 2,3etc. of the main albums page does not work. Clicking next at the bottom of the album view page gives a 404 error. I am currently displaying all albums on one page which is too many really but it serves as a workaround for now. Photos split across pages work fine though. Is this a problem with FAlbum, or something else? Has anyone else come across this problem?

    2. The formatting of the Exif data also has a problem. I am getting black text on a black background. I have copied yor CSS file as is…

    Any ideas? Take a look at my site and you will see what I mean. My CSS and PHP skills are far from good so any assistance would be greatly appreciated.

    Thanks, Olly

  29. Andreas,

    Was there a solution for the ” Warning: Invalid argument supplied for foreach() in /home/hisyam2/public_html/wp-includes/template-functions-post.php on line 378 ”
    prblem other than deleting the php get_sidebar() code. I’d like to keep the sidebar if I can.

    Thanks,

    Bob

  30. Flo

    I just installed k2 falbum and used the menu integration, thanx for that Andreas. Anyway I ran into the same 2 problems some of you guys had and want you to know my solutions:

    1. The Warning in template-functions-post.php on line 378 appears since WP tries to display the subpages of the photos page, which has none. I inserted the following line infront of the foreach in line 378:

    if (isset($page_tree[$parent]['children']))

    This prevents the warning but still displays the subpages header.

    2. Firefox did not display any falbum images any more – images are collapsing to 0px. This can be fixed by removing the following max-width line in k2/style.css:

    .primary img {
    margin-left: -5px;
    padding: 4px;
    border: 1px solid #ccc;
    // max-width: 100%; removed due to falbum firefox probs
    }

    At least it worked for me and I couldn’t see any other images behave strangely.

    Bye, Flo.

  31. Ulf Sandberg

    Hi,

    Thanks for a great guide worked like a charm!!

    /Uffe

  32. Liam Keane

    Just another note of thanks. Your downloads were very helpful!

  33. Andreas-

    I’m having a problem …
    If you go to http://www.elifoner.com, and chose , you’ll see that the FAlbum plugin works fine, but the images are minimized to just a few pixels across – any ideas why?

    Thanks for all your help!

    Eli

  34. hi,

    i’m sorry to trouble you for some help but i really tried to do things the way you describe but i have a couple of questions.

    i managed to get the gallery working (at http://maique.com/photos/), but the link on the header points to the page number, and i get the ‘…template-functions-post.php on line 378′ error.

    i have the slug set to photos and ‘main page, no parent’ thing selected.
    i even tried hisyam’s solution but i the sidebar gets a subpages index, although there’s none to display.

    questions: is there a way to change the link from page-nr-bla-bla to maique.com/photos ? this, i believe would solve everything, this url is working just fine.

    if not, how do i get the sidebar to work properly ?

    second question: the first gallery index photo, is a bit off. how do i correct this ?

    i thank you for any help provided. i have zero knowledge of php and am just following instructions

    regards,
    miguel

  35. Great instructional. I was looking for exactly this for correct rendering inside of k2. I’ve follow your directions and everything comes out perfect with one exception… my photo’s thumb’s are extremely squished – tall and skinny. I’m not a CSS PHP guru and I have no idea how to solve this. Perhap interferance with other plugin’s i have running or perhaps a problem with my stylesheet modifications… Any ideas? The photo pages can be seen here http://www.continentaldrift.net/wordpress/?page_id=27

    Thanks
    Barak

  36. Folk, I changed my Page Parent to Archives and the error in the sidebar went away.

  37. Scratch that, it’s not in the menu after that.

  38. Thanks for all your feedback. It has been pretty silent from my side the last weeks, but I am back with a new update and enhancements. Check out my new falbum integration version at http://www.andreaslinde.de/archives/2005/11/18/integrating-flickr-album-into-k2-version-2/

  39. Hi, man nice info but i have maybe not a big but seens to be big , lol,

    please check it out http://kakei.us/photos, when u click some album it doesnt show the photos it shows

    Error 404 – Not Found

    Search bar and other tools go here! If you’re reading this, it needs to be implemented, remind me!

    help me please.

  40. http://kakei.us/photos/show/recent/ look that =( redirect me to the home

  41. @kakei: what is your problem? when I browse your page everything looks very fine.

  42. nvm andreas line in works :D

  43. sorry for the doble post, but do you have a tuto of how to integrate like http://www.randombyte.net/blog/ (photos on the sidebar)

  44. @kakei: Easiest way is to install another wordpress plugin if you do not want to hack PHP yourself. http://eightface.com/log/2006/01/02/flickrrss-30/. Otherwise you have to take a look at the function falbum provides, I didn’t try those out.

  45. Andreas Linde i was using that plugin i will try thx

  46. i activated already the plugin but im figuring out how to use the same styles of /photos/

  47. Hi I put the sidebar code but it seems that I have a css problem (look at my website)

    I put the falbum into my sidebar code but it interfer with the blogroll links!

    Thanks for your help

    henri

  48. Hello there. I’m not using K2. I’m currently using the blix theme but I doubt that plays a roll in the problem I’m having. Anyway, on my photos page, if you click one of the categories, say Misc., you’ll be taken to my 404 page. Why is that and how can I fix it?