Fixing Flickr FAlbum rewrite rules, thumbnails, javascripts and more …

FAlbum is a WordPress Plug-in that adds your Flickr photo albums to your blog without redirecting the viewer to Flickr or leaving your blog. It is very useful and unique, I have always needed that plugin on my blog, however, some features needed a lot of digging into the code to fix or to get it working. So, I am going to describe a step by step installation of this plugin then will show how to fix.

installtion

  • Download 0.7.1 FAlbum release from SourceForge
  • Extract the files to the wp-content/plugins/falbum directory. so that falbum.php would be accessible from /wp-content/plugins/falbum/falbum.php
  • Navigate to Options -> FAlbum on your WordPress Control Panel and activate FAlbum Authentication with Flickr. Make sure to clear cache if you have previously installed FAlbum
  • Enable Friendly URLs on both FAlbum and WordPress but do not add the rewrite rules suggested by FAlbum on the wiki

    • Fixing rewrite rules
    Please do not test before completing all steps, or you will have a lot of trouble with cache.

  • Go to /wp-content/plugins/falbum directory and edit file wordpress-falbum-plugin.php
  • Comment lines number 797 to 805
    1. /*
    2. function falbum_action_parse_query($wp_query) {
    3.         if (defined('FALBUM') && constant('FALBUM')) {
    4.                 $wp_query->is_404 = false;
    5.         }
    6. }
    7.  
    8.  
    9. add_action('parse_query', 'falbum_action_parse_query');
    10. */
  • Then add these lines under the comments
    1. function falbum_rewrite() {
    2.         #These are commented for wordpress 2.5.1
    3.         #it used to work with older version but notime to check changes for wp_rewrite class
    4.         #global $wp_rewrite;   
    5.         #$wp_rewrite->add_rule('(photos)/.+','index.php?pagename=$matches[1]');
    6.         preg_match_all("#photos/(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?#is",$_SERVER['REQUEST_URI'],$matches);
    7.  
    8.         for($i=1;$i<count($matches);$i++){
    9.                 if(!empty($matches[$i][0])){
    10.                         $_GET[$matches[$i][0]] = $matches[++$i][0];
    11.                         #new for 2.5.1 , check the previous comment
    12.                         #change the number to match your page id
    13.                         $GLOBALS['page_id'] = 7;
    14.                 }
    15.         }
    16.        
    17. }
  • Go to Line number 679 - inside falbum_action_init() function - and add
    1. falbum_rewrite();

    Fixing inline FAlbum tags ([ fa:p:id=.... ])

  • Edit file FAlbum.class.php, go to line 1324 and replace
    1.                         if ($size == ’sq') {
    2.                                 $size = '_s';
    3.                         }
    4.                         elseif ($size == 't') {
    5.                         $size = '_t';
    6.                         }
    7.                         elseif ($size == ’s') {
    8.                                 $size = '_m';
    9.                         }
    10.                         elseif ($size == 'm') {
    11.                                 $size = ”;
    12.                         }
    13.                         elseif ($size == 'l') {
    14.                                 $size = 'b';
    15.                         }
    16.                         elseif ($size == 'o') {
    17.                                 $size = '_o';
    18.                         }
    19.  

    with

    1.                         if ($size == ’sq') {
    2.                                 $size = ’s';
    3.                         }
    4.  

    Fixing Javascripts

  • Go to line 117 on file /wp-content/plugins/falbum/styles/default/photo.tpl.php and replace
    1.                 <a href="javascript:showExif('<?php echo $exif_data; ?>')"><?php echo $exif_label; ?></a>
    2.  

    with

    1.                 <a href="javascript:falbum.showExif('<?php echo $exif_data; ?>')"><?php echo $exif_label; ?></a>
    2.  
  • Then Go to line 117 and replace
    1.         falbum_photo_id = '<?php echo $photo_id; ?>';
    2.         falbum_title = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($title, ENT_QUOTES)); ?>';
    3.         falbum_desc = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($description_orig, ENT_QUOTES)); ?>';
    4.         falbum_nodesc = '<?php echo $no_description_text; ?>';
    5.        
    6.         falbum_next_page = '<?php echo $next_page; ?>';
    7.         falbum_next_id = '<?php echo $next_id; ?>';
    8.         falbum_prev_page = '<?php echo $prev_page; ?>';
    9.         falbum_prev_id = '<?php echo $prev_id; ?>';
    10.        
    11.         falbum_album = '<?php echo $album; ?>';
    12.         falbum_tags = '<?php echo $in_tags; ?>';       
    13.        
    14.         falbum_post_value = '<?php echo $post_value; ?>';
    15.        
    16.         falbum_makeEditable('falbum-photo-desc');
    17.         falbum_makeEditable('falbum-photo-title');             
    18.         falbum_enable_post_helper();
    19. <?php endif; ?>
    20.  
    21.         //jQuery('#pageprev-').click(function(){falbum_show_photo('prev');return false;}).set('href','#');
    22.         //jQuery('#pagenext-').click(function(){falbum_show_photo('next');return false;}).set('href','#');
    23.         //jQuery('#falbum_photo_link').click(function(){falbum_show_photo('next');return false;}).set('href','#');     
    24.  
    25.         falbum_prefetch('<?php echo $next_image; ?>');
    26.  

    with

    1.         falbum.photo_id = '<?php echo $photo_id; ?>';
    2.         falbum.title = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($title, ENT_QUOTES)); ?>';
    3.         falbum.desc = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($description_orig, ENT_QUOTES)); ?>';
    4.         falbum.nodesc = '<?php echo $no_description_text; ?>';
    5.        
    6.         falbum.next_page = '<?php echo $next_page; ?>';
    7.         falbum.next_id = '<?php echo $next_id; ?>';
    8.         falbum.prev_page = '<?php echo $prev_page; ?>';
    9.         falbum.prev_id = '<?php echo $prev_id; ?>';
    10.        
    11.         falbum.album = '<?php echo $album; ?>';
    12.         falbum.tags = '<?php echo $in_tags; ?>';       
    13.        
    14.         falbum.post_value = '<?php echo $post_value; ?>';
    15.        
    16.         falbum.makeEditable('falbum-photo-desc');
    17.         falbum.makeEditable('falbum-photo-title');             
    18.         falbum.enable_post_helper();
    19. <?php endif; ?>
    20.  
    21.         falbum.prefetch('<?php echo $next_image; ?>');
    22.  

    Edit WordPress Theme to work with FALlbum:

  • Create file falbum.php within your theme directory and add these lines
    1. <?php
    2. /*
    3. Template Name: FAlbum
    4. */
    5. ?>
    6. <?php
    7.  
    8. //Hack to set WP page id
    9. $page_id = 7; //Change this to match your sites WP page id of new Photos page
    10.  
    11. global $wp_query;
    12. global $post;
    13. if ($page_id != null) {
    14.   $post->ID = $page_id;
    15.   $wp_query->is_home = false;
    16.   $wp_query->is_page = true;
    17.   $wp_query->queried_object->ID = $page_id;
    18.   $wp_query->queried_object_id = $page_id;
    19.   define('FALBUM', true);
    20. }
    21.  
    22. get_header();
    23.  
    24.  
    25. ?>
    26.  
    27. <script type="text/javascript" src="<?php echo get_settings(’siteurl'); ?>/wp-content/plugins/falbum/res/falbum.js"></script>
    28. <script type="text/javascript" src="<?php echo get_settings(’siteurl'); ?>/wp-content/plugins/falbum/res/jquery.js"></script>
    29. <?php if ($falbum->can_edit) { ?><script type="text/javascript" src="<?php echo get_settings(’siteurl'); ?>/wp-content/plugins/falbum/res/prototype.js"></script><?php } ?>
    30.  
    31.  
    32. <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
    33.    <div id="content" class="narrowcolumn">
    34.  
    35.    <?php $falbum->show_photos(); ?>
    36.  
    37.    </div>
    38.  
    39. <?php get_sidebar(); ?>
    40.  
    41. <?php get_footer(); ?>
  • Open your Theme’s header.php and add this lines at the top
    1. <?php
    2. require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php');
    3. global $falbum;
    4. ?>
  • This is optional if you like to change Page Tiltle find tag and replace with
    1. <?php if ($falbum->is_album_page()) { ?>
    2.   <title><?php echo $falbum->get_page_title(); ?></title>
    3. <?php } else { ?>
    4. <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
    5. <?php } ?>
  • On your WordPress Control Panel choose Presentation -> Theme Editor
  • Go to Manage -> Pages then choose 'Create new Page'
  • Add Page Title 'Photos' then add Page Slug 'photos' then add Page Template 'FAlbum'

    • That should do it, you can view a demo on my albums page

    and now I'm trying to get xml-sitemaps and FAlbum to play nice together…not sure I have the time to do it!
    Adding FAlbum URLs to XML-Sitemap WordPress Plugin


    Tags :

    This entry was posted on Tuesday, November 20th, 2007 at 3:15 pm and is filed under Blog, Solutions. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    3 Responses to “Fixing Flickr FAlbum rewrite rules, thumbnails, javascripts and more …”

    1. Adding FAlbum URLs to XML-Sitemap WordPress Plugin :: GadElKareem Says:
      November 22nd, 2007 at 2:19 pm

      [...] I mentioned on my previous post yesterday about Fixing FAlbum Plugin that I’m trying to add support for Google XML Sitemaps Plugin to FAlbum so that all URLs [...]

    2. Premasagar » Links for 2007-12-17 [del.icio.us] Says:
      December 19th, 2007 at 2:45 am

      [...] Fixing Flickr FAlbum rewrite rules, thumbnails, javascripts and more … :: GadElKareem FAlbum is a WordPress Plugin that adds your Flickr photo albums to your blog. However, some features needed a lot of digging into the code to fix or to get it working. So, here is a step by step installation of this plugin, with fixes. This entry was written by premasagar, posted on December 18, 2007 at 6:00 am, filed under Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Links for 2007-12-16 [del.icio.us] [...]

    3. Damir Says:
      July 12th, 2008 at 4:55 pm

      Thanks a lot! I am preparing my own blog and this really helped me out! At first, the Show Exif was not working. After I followed your steps the problem was solved!

      Greetings,

      Damir

     

    Leave a Reply


     Top