我在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

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

Comments

• 2009-04-2, 盒子 writes: 先留言 再接着看
• 2009-04-9, 淘宝网店 writes: 先支持下，慢慢学习~！~
• 2009-04-17, pc412 writes: 可不可以给个5.0的源文件？弄了半天都没效果 =（
• 2009-04-17, 阿德 writes: 放到文章后面了,右键另存为就可以了
• 2009-04-18, pc412 writes: 谢谢。。不过你有MSN吗？有些问题想问你 =）
• 2009-04-18, pc412 writes: pc412_7@hotmail.com 这是我的～
• 2009-05-2, 阿德 writes: 俺比较低端，都没用MSN。。。 我去下一个再加你。。， 不好意思回得有点晚
• 2010-03-22, Eureka writes: 你好 我用了flickrRSS后一行只能显示一张图片 怎么才能想你的边栏一样一行显示3张？谢谢！
• 2010-03-23, 阿德 writes: 是不是本来就只有4张照片呀？
• 2010-03-23, Eureka writes: 请看一下www.eureka321.com 我设置显示六张照片 但只能单列显示 我希望一行能显示三张
• 2010-03-25, 阿德 writes: 我右边栏上面8张照片也是单列显示的，是不是用widget显示这些照片的啊？ 下面6张照片分两行，每行3张是将flickrRSS的代码放到siderbar.php里才达到的效果。
• 2010-03-25, Eureka writes: 哦 原来如此 谢谢谢谢

Related posts:

• flickrRSS高阶使用三部曲之一：显示flickr上的图片
• flickrRSS高阶使用三部曲之三：配合Gravatar2让flickr的图片作为WordPress留言的随机头像
• flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片

我之前写过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>

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

Comments

• 2009-01-18, aibenwu writes: 博主你好，我想问您一下。我在Google Blogger 开的博客。在Chrome,火狐显示图片是正常的。但是在IE，傲游上显示的图片间隔变小，而挤在一起。让我很困扰。请问博主应该怎么解决这个问题呢？谢谢
• 2009-01-20, 阿德 writes: Blogger我没用过，如果能编辑HTML的话，你在图片之间加入代表空格的HTML代码，   貌似也只能这样了， 或者在HTML里面嵌入CSS代码，如我我文中最后一个例子

Related posts:

• flickrRSS高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图片
• flickrRSS高阶使用三部曲之三：配合Gravatar2让flickr的图片作为WordPress留言的随机头像
• Firefox Logo Spied In Deep Space(火狐标志在宇宙深处出现）
• 11月11号，实验室团购了11件纪念浙大建校111周年的光棍衫
• 图片&记录

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

好一副田园风光啊

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

下面是深林公园

我貌似很像伪军

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

这个还是蛮有意思的

卡丁车哈哈

小show一下

Comments

• 2010-04-4, flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录 - 小龙的个人博客 writes: [...] 国庆游记（9月30~10月1） (0) [...]

Related posts:

• 国庆游记(9月28号~9月29号)
• 国庆游记（10月2~3）

方法

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)

Comments

• 2008-07-4, 让flickr的图片作为WordPress留言的随机头像 @ 阿德日志 ( 留言框, 随机头像, flickr, gravatar2, wordpress, ) writes: [...] WordPress博客中显示与文章内容相关的Flickr图片 [...]
• 2008-12-11, tsman writes: 学习了2天了，问一下，你的评论栏下的图片之间的空格怎么控制？为甚麽我的都是紧挨着的！
• 2008-12-11, 阿德Delai writes: # $before_image - html appearing before each photo 插入每张图片之前的html代码 # $after_image - html appearing after each photo 插入每张图片之后的html代码 这两项可以用 html语言的空格 你试试
• 2008-12-11, 阿德Delai writes: 最后没那两个参数，实际上是 "& nbsp;", "& nbsp;" （nbsp前面的空格去掉） 是html语言里的空格，我原原本本把代码拷过来，浏览器还是会把它解析成空格给你看的， 所以你看到的是 < ?php get_flickrRSS(8, "community", "$first_tag", "square", " ", " "); ?> 你试试将最后两个双引号里面的空格改成 & nbsp （nbsp前面的空格去掉）
• 2008-12-11, 阿德Delai writes: 文章内的代码部分已经用图片代替了
• 2008-12-15, tsman writes: 谢谢！再调整调整
• 2010-04-4, flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录 - 小龙的个人博客 writes: [...] flickrRSS 高阶使用三部曲之二：在WordPress博客中显示与文章内容相关的Flickr图... (6) [...]

Related posts:

• 不同浏览器里图片大小不同的解决方法
• flickrRSS高阶使用三部曲之三：配合Gravatar2让flickr的图片作为WordPress留言的随机头像
• flickrRSS高阶应用三部曲之新版本flickrRss 5.0补录
• Firefox Logo Spied In Deep Space(火狐标志在宇宙深处出现）
• 11月11号，实验室团购了11件纪念浙大建校111周年的光棍衫