GadElKareem

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

This is not working anymore

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
  • /*
    function falbum_action_parse_query($wp_query) {
    	if (defined('FALBUM') && constant('FALBUM')) {
    		$wp_query->is_404 = false;
    	}
    }
    
    
    add_action('parse_query', 'falbum_action_parse_query');
    */
  • Then add these lines under the comments
  • function falbum_rewrite() {
     	#These are commented for wordpress 2.5.1
     	#it used to work with older version but notime to check changes for wp_rewrite class
    	#global $wp_rewrite;	
    	#$wp_rewrite->add_rule('(photos)/.+','index.php?pagename=$matches[1]');
    	preg_match_all("#photos/(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?(?:([^/]+)/([^/]+)/?)?#is",$_SERVER['REQUEST_URI'],$matches);
    
    	for($i=1;$i<count($matches);$i++){
    		if(!empty($matches[$i][0])){
    			$_GET[$matches[$i][0]] = $matches[++$i][0];
    			#new for 2.5.1 , check the previous comment
    			#change the number to match your page id
    			$GLOBALS['page_id'] = 7; 
    		}
    	}
    	
    }
  • Go to Line number 679 - inside falbum_action_init() function - and add
  • falbum_rewrite();

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

  • Edit file FAlbum.class.php, go to line 1324 and replace
  • 			if ($size == 'sq') {
    				$size = '_s';
    			}
    			elseif ($size == 't') {
    			$size = '_t';
    			}
    			elseif ($size == 's') {
    				$size = '_m';
    			}
    			elseif ($size == 'm') {
    				$size = '';
    			}
    			elseif ($size == 'l') {
    				$size = 'b';
    			}
    			elseif ($size == 'o') {
    				$size = '_o';
    			}
    

    with

    			if ($size == 'sq') {
    				$size = 's';
    			}
    

    Fixing Javascripts

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

    with

    		<a href="javascript:falbum.showExif('<?php echo $exif_data; ?>')"><?php echo $exif_label; ?></a>
    
  • Then Go to line 117 and replace
  • 	falbum_photo_id = '<?php echo $photo_id; ?>';
    	falbum_title = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($title, ENT_QUOTES)); ?>';
    	falbum_desc = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($description_orig, ENT_QUOTES)); ?>';
    	falbum_nodesc = '<?php echo $no_description_text; ?>';
    	
    	falbum_next_page = '<?php echo $next_page; ?>';
    	falbum_next_id = '<?php echo $next_id; ?>';
    	falbum_prev_page = '<?php echo $prev_page; ?>';
    	falbum_prev_id = '<?php echo $prev_id; ?>';
    	
    	falbum_album = '<?php echo $album; ?>';
    	falbum_tags = '<?php echo $in_tags; ?>';	
    	
    	falbum_post_value = '<?php echo $post_value; ?>';
    	
    	falbum_makeEditable('falbum-photo-desc');
    	falbum_makeEditable('falbum-photo-title');   		
    	falbum_enable_post_helper();
    <?php endif; ?>
    
    	//jQuery('#pageprev-').click(function(){falbum_show_photo('prev');return false;}).set('href','#');
    	//jQuery('#pagenext-').click(function(){falbum_show_photo('next');return false;}).set('href','#');
    	//jQuery('#falbum_photo_link').click(function(){falbum_show_photo('next');return false;}).set('href','#');	
    
    	falbum_prefetch('<?php echo $next_image; ?>');
    

    with

    	falbum.photo_id = '<?php echo $photo_id; ?>';
    	falbum.title = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($title, ENT_QUOTES)); ?>';
    	falbum.desc = '<?php echo preg_replace('/[\n|\r]/','',htmlspecialchars($description_orig, ENT_QUOTES)); ?>';
    	falbum.nodesc = '<?php echo $no_description_text; ?>';
    	
    	falbum.next_page = '<?php echo $next_page; ?>';
    	falbum.next_id = '<?php echo $next_id; ?>';
    	falbum.prev_page = '<?php echo $prev_page; ?>';
    	falbum.prev_id = '<?php echo $prev_id; ?>';
    	
    	falbum.album = '<?php echo $album; ?>';
    	falbum.tags = '<?php echo $in_tags; ?>';	
    	
    	falbum.post_value = '<?php echo $post_value; ?>';
    	
    	falbum.makeEditable('falbum-photo-desc');
    	falbum.makeEditable('falbum-photo-title');   		
    	falbum.enable_post_helper();
    <?php endif; ?>
    
    	falbum.prefetch('<?php echo $next_image; ?>');
    

    Edit WordPress Theme to work with FALlbum:

  • Create file falbum.php within your theme directory and add these lines
  • <?php
    /*
    Template Name: FAlbum
    */
    ?>
    <?php 
    
    //Hack to set WP page id
    $page_id = 7; //Change this to match your sites WP page id of new Photos page
     
    global $wp_query;
    global $post;
    if ($page_id != null) {
      $post->ID = $page_id;
      $wp_query->is_home = false;
      $wp_query->is_page = true;
      $wp_query->queried_object->ID = $page_id;
      $wp_query->queried_object_id = $page_id;
      define('FALBUM', true);
    }
    
    get_header(); 
    
    
    ?>
    
    <script type="text/javascript" src="<?php echo get_settings('siteurl'); ?>/wp-content/plugins/falbum/res/falbum.js"></script> 
    <script type="text/javascript" src="<?php echo get_settings('siteurl'); ?>/wp-content/plugins/falbum/res/jquery.js"></script>
    <?php if ($falbum->can_edit) { ?><script type="text/javascript" src="<?php echo get_settings('siteurl'); ?>/wp-content/plugins/falbum/res/prototype.js"></script><?php } ?>
    
    
    <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
       <div id="content" class="narrowcolumn">
    
       <?php $falbum->show_photos(); ?>
    
       </div>
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>
  • Open your Theme’s header.php and add this lines at the top
  • <?php
    require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php');
    global $falbum;
    ?>
  • This is optional if you like to change Page Tiltle find tag and replace with
  • <?php if ($falbum->is_album_page()) { ?>
      <title><?php echo $falbum->get_page_title(); ?></title>
    <?php } else { ?> 
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
    <?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