我在flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片中提到的在文章后面显示与文章内容相关的flickr图片的功能如果不加以修改是不能使用的。拖了好几个星期，今天因为改了域名（www.shidelai.cn），所以想有个好的开始，把新的代码搞出来了，和原来的效果一样，接近完美。你可以根据我的代码加以修改成自己的代码，比如如果你的页面比较窄，那么可以把’num_items’ => 8修改为’num_items’ => 5等等。

具体方法如下：

将flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片

<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>

修改为：

<?php get_flickrRSS(array(‘num_items’ => 8, ‘type’ => ‘public’, ‘tags’ => “$first_tag”, ‘html’ => ‘&nbsp;<a href=”%flickr_page%” title=”%title%”><img src=”%image_square%” alt=”%title%”/></a>&nbsp;’)); ?>

就OK了。

参数解释：

The Parameters

‘type’ => ‘user’ – The type of Flickr images that you want to show. Possible values: ‘user’, ‘favorite’, ‘set’, ‘group’, ‘public’

‘tags’ => ” – Optional: Can be used with type = ‘user’ or ‘public’, comma separated

‘set’ => ” – Optional: To be used with type = ‘set’

‘id’ => ” – Optional: Your Group or User ID. To be used with type = ‘user’ or ‘group’

‘do_cache’ => false – Enable the image cache

‘cache_sizes’ => array(‘square’) – What are the image sizes we want to cache locally? Possible values: ‘square’, ‘thumbnail’, ‘small’, ‘medium’ or ‘large’

‘cache_path’ => ” – Where the images are saved (server path)

‘cache_uri’ => ” – The URI associated to the cache path (web address)

Presentational params

‘num_items’ => 4 – The number of images that you want to display

‘before_list’ => ‘‘ – The HTML to print before the list of images

‘html’ => ‘<a href=”%flickr_page%” title=”%title%”><img src=”%image_square%” alt=”%title%”/></a>’ – the code to print out for each image.

Meta tags available: %flickr_page%, %title%, %image_small%, %image_square%, %image_thumbnail%, %image_medium%, %image_large%

‘default_title’ => “Untitled Flickr photo” – the default title

‘after_list’ => ‘‘ – the HTML to print after the list of images

Examples

<?php get_flickrRSS(array(‘num_items’ => 4, ’type’ => ‘public’, ’tags’ => ‘sunflowers’)); ?> – This will display four photos from the public stream that are tagged with sunflowers

<?php get_flickrRSS(array(‘set’ => ’1234567890′, ’num_items’ => 6, ’type’ => ‘set’)); ?> – This will display six photos from a specified set

另外可以参考下本站的源码

• 国庆游记（9月30~10月1） (1)
• 关于本站 (41)
• 不同浏览器里图片大小不同的解决方法 (2)
• flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片 (7)
• flickrRSS高阶使用三部曲之一：显示flickr上的图片 (5)

我之前写过flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片，后来发现一个问题：原本图片大小这个参数选择square的话，显示的应该是几张75×75的图片，这在firefox里面一直是正常的，但IE里面就不是这样了，很多图片会被放大，影响总体效果。

前些天偶尔翻CSS手册，看到max-height属性，心想这正好可以解决这个问题。解决方法如下：

修改css文件添加如下代码：

#related-pic img {
max-height:75px;
max-width:75px;
width: expression( this.width> 75 ? “75px” : (this.width+”px”) );
height: expression( this.height> 75 ? “75px” : (this.height+”px”) );
}

意思就是说，在id为related-pic的容器里面，图片(img)的最大宽度和长度是75px，如果发现宽度或长度大于75的，就改成75，如果小于75的就大小不变。

然后在single.php中出现75×75的图片的地方用id为related-pic的容器括进去就可以了：

<b>[相关图片]</b><br />
<div id=”related-pic”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

这样，IE的显示就正常了。你当然也可以把上面这段CSS代码这届嵌入到HTML代码里面，如:

<div style=”css code”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

类似的， 你也可以设定文章内容中图片的最大宽度，以免不小心用了太大的图，把页面撑得面目全非。

• 国庆游记（9月30~10月1） (1)
• flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录 (12)
• flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片 (7)

国庆去崇明岛的人N多啊，队伍前面还打起架来了

三位MM

好一副田园风光啊

入住的宝根足球宾馆，位于宝根足球基地里面，环境不错~~~~~

这样的景观到处都是~~~~~~

下面是深林公园

我貌似很像伪军

有跑马场，但我们去的时候在中午～～～马儿要休息～～～～，。。还没骑过马嗯

这个还是蛮有意思的

这辆车～～～～～·

卡丁车哈哈

小show一下

• 国庆游记（10月2~3） (0)
• 国庆游记(9月28号~9月29号) (0)
• 愚人节日记 (1)
• 不同浏览器里图片大小不同的解决方法 (2)
• 上海火车南站小贴士 (0)

方法

1. 在打开主题文件夹下的single.php，在

<div class=”post” id=”post-<?php the_ID(); ?>”>

……….

</div><!–/post –>

之间添加如下代码：

<?php
$tags = explode(“, “, get_the_tag_list(”,’, ‘,”));
$first_tag=preg_replace(‘|<a\s.*?>(.*?)</a>|i’,   ‘\1′,   $tags[0]);
?>

2. 将flickrRSS使用详解里面提到的

<div id=”related-pic”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

修改为：

<div id=”related-pic”>
<?php get_flickrRSS(8, “community”, “$first_tag”, “square”, “&nbsp;”, “&nbsp;”); ?>
</div>

这段代码在新的flickr5.0版本中不适用了，具体解决方法看这里flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录

另外你可以参考不同浏览器里图片大小不同的解决方法

原理就是显示flickr上标签与文章第一个标签相同的图片，但是注意：文章的第一个标签并不是你在编辑时候输入的第一个标签，而是按照字母排序的第一个标签。

当然你也可以再这设置个$second_tag让它显示包含头2个标签的图片。不过我发现这样会很少有符合条件的图片，很多情况下一张都没有（主要是因为flickr上的标签英文居多，我们博客的标签中文居多）。

Advanced

发挥你的想象力，get_flickrRSS()真的是很好很强大阿，它一共可以设置7个参数，下面的参数介绍你或许用得着。

1. $num_items – how many photos you want to appear   显示多少图片
2. $type – specify user, set, favorite, group or community photosream    设置是在用户的所有图片，还是用户的收藏，还是。。。。中搜索
3. $tags – a comma separated list of tags (with no spaces)  标签
4. $imagesize – square, thumbnail, medium or large  图片大小
   
5. $before_image – html appearing before each photo  插入每张图片之前的html代码
6. $after_image – html appearing after each photo   插入每张图片之后的html代码
7. $id_number – specify a user id (or group name)   在特定的用户或者组中搜索
8. $set_id – specify the set id (found in set url)

• flickrRSS高阶使用三部曲之一：显示flickr上的图片 (5)
• 这个插件能为你的WordPress提供iphone, itouch主题 (1)
• WordPress运行原理学习笔记之二：插件机制初探 (7)
• flickrRSS高阶使用三部曲之三：配合Gravatar2让flickr的图片作为WordPress留言的随机头像 (2)
• 抛弃All in One SEO Pack，WordPerss的SEO优化小结 (3)