生活或许总有遗憾,但未来依旧美好。
欢迎访问...
Tag

Tag: 七牛

我的图片站下载流量一直很紧,随时欠下七牛一笔钱跑路的节奏。尤其是我不喜欢给网站图片添加太多分页,点一下看一张那种实在是憋屈。 套图分类是重灾区,因为每篇文章都有几十张图片,一个IP就带走我不少流量了。必须给它加延迟加载,拉下时再加载图片节省流量。  原谅我现在还没搞好代码高亮,凑合看看先。 先上Demo:美女纹身艺术照 @全过程 步骤1、引用jQuery.js,一般主题都有。如果没有,直接用度娘CDN的好了,要加在后面那些JS之前 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 步骤2、下载jquery.lazyload.min,如果下载后文件名有变,请重命名回jquery.lazyload.min.js,放置到主题的js文件夹里 步骤3、在页脚加入以下代码: <!--图片懒加载--> <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(function() { jQuery("img").lazyload({ effect : "fadeIn", failure_limit : 10 }); }); $(function() { $("img:below-the-fold").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},2000); }); </script> <!--图片懒加载end--> 步骤4、修改主题的function.php,在底部的 ?> 之前添加以下代码,并找一个好看的加载gif,命名为loading.gif,丢进主题的images'文件夹里 //图片懒加载 function add_image_placeholders( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-original' ) ) return $content; $placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/images/loading.gif' ); $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="" data-original=""${3}><noscript><img${1}src=""${3}></noscript>', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_image_placeholders', 99 ); 观察下源代码,图片不再是src直接输出了,而是放置在data-original里了。   补充说明: effect : "fadeIn", 加一个淡入的特效 failure_limit : 10 });…

我想说的是这么一回事。作为射鸡师、前端攻城狮,有一个自用的图床很重要(虽然我都不是)。具体怎么用见仁见智,我一般是在审查元素时,贴图上去看看替换后css背景/img标签效果,或者作为临时用图的地址。一开始我是秉着乐于分享的精神,免费给大家用的,但是sae收费我就做不下去了。请求数太高导致每天要花十几块钱云豆,于是把旧的sae图床做了页面跳转(图片还是保留在的,只是不能再继续上传了而已)。 接着,我又搞了一套七牛的上传图床源码,就是下图之前说过的那个树洞外链。 今天无意看到有人在论坛推荐我的图床,真的很惊讶,这样都能被你找到。 不知是该高兴还是忧伤,如果是免费共享给十来个人用无所谓,但是人一多真的会扑街。尤其是我一开始没规划好,把图床和博客的图片放在同一个空间里面。并且这套七牛上传的源码并没有管理控制功能,无论你上传什么黄图,还是大图刷爆流量,我也没办法去做点什么。 终于可以做一个七牛的付费党了,感觉萌萌哒! 下图是七牛的价格表: 下图是阿里云OSS的价格表: 我觉得他们价格差不多,你们觉得呢?

演示地址:http://pic.kouss.com/ 七牛注册地址:https://portal.qiniu.com/ 界面就大概长得这样吧,用过那么多个图床,说说这个的缺点。 我使用图床大多数是临时用图,分享图,替代html里的图看效果等,需要批量拖拽上传、快速获得链接等。 而这一款图床工具是上传完跳转到另一个界面去让你复制地址,下图是我以前用的图床工具——图派。虽然界面很丑,但是操作很高效。 图派演示地址:http://tupi.sinaapp.com/ 因为SAE停止了中级开发者的云豆赠送,以前每月有100元的云豆的,现在云豆完全不够用。于是就跟SAE拜拜了,投奔七牛。 树洞外链是一款免费的外链程序,程序使用七牛作为储存空间,提供匿名便捷的文件外链、网盘服务。 树洞外链1.1版本发布,本次版本只针对七牛哦! 升级细节: 1.使用Javascript方式上传 2.更完整的错误反馈 3.新的界面UI 4.支持拖拽上传、上传进度显示 5.上传完成后可获取二维码 6.优化文件结构 7.全新安装向导(针对1.0版本升级补丁近期放出!) 更多细节优化。。。。 2015-08-13 更新2.0版本下载地址:http://pan.baidu.com/s/1cC2AU

下班抽空写的,不会很详细。如果没改过WordPress代码的朋友,可能看完了也不知道从哪里下手。插件的标题都是链接到它们开发者那里的,可以从他们那里获得更详尽的帮助,我只是提供个思路给大家。 方案一:使用缩略图插件WP-Thumbnails 插件原理是每打开一篇文章生成相应的缩略图,所以安装插件后再访问网站,插件就会自动生成缩略图。 使用方法很简单,启用插件后,进入设置——WP-Thumbnails,如图选择自动下载外链图片到本地。 然后找到首页缩略图的设置,填好生成缩略图的尺寸,靠左还是靠右显示,更新设置就可以把下面那行代码插入你模版需要放置缩略图的地方了。   另外这个插件不仅仅是文章列表缩略图,还有其他缩略图甚至是摘要截取,你们慢慢发掘和使用,这里不多讲。如果不知道缩略图那段代码在哪里添加的,可以用谷歌或者火狐浏览器的审查元素去找。 这个插件的缺点:1、新浪sae那些没有写入权限的服务器不能用。2、它是先下载外链图片到服务器,然后再生成缩略图的,会占用一些服务器负担和空间,但是这个几乎可以忽略不计。3、可以设置全局缺省图。4、当图片地址大写,或者不是JPG结尾的图片地址,插件会显示缺省图。 方案二:七牛镜像存储插件 其实很多人用七牛插件的,它可以将WordPress 的静态资源镜像到七牛。还可以修改站点默认的上传路径,把多媒体直接上传到七牛而不是小的可怜的服务器。本站使用了七牛+WP Super Cache来CDN加速,效果也还可以。 我们看到七牛插件的设置,首先你要去注册个七牛账号,传送门:登陆七牛开发者平台。 新建一个空间 获得七牛域名 以及AK/SK,上面那些在后台插件需要用到 上面得到的东西,在后台启用插件后就要填写进去了 终于回到正题,就是这里启用缩略图 *启动高级缩略图功能之后,文章获取缩略图的顺序为: 特色图片 > 标签缩略图 > 第一张图片 > 分类缩略图 > 默认缩略图。 调用的代码是:<?php wpjam_post_thumbnail(array(240,132),$crop=0);?> (已包含img标签) 这个插件的缺点:如果没接触过七牛这类东西的朋友设置起来可能有点困难,设置出错导致图片无法显示等。如果你单纯想调用外链图片做缩略图,不考虑外链图片大小的可以不理上面那一些注册步骤,只需启用插件,勾上缩略图,调用缩略图就可以了。 方案三:代码调用第一张图作为缩略图 这类的代码百度一下会有很多,下面那段测试过OK的,拿来介绍给大家。 1、在主题文件夹下的functions.php添加代码 <span class="com">//缩略图</span> <span class="kwd">function</span><span class="pln"> catch_that_image</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">global</span><span class="pln"> $post</span><span class="pun">,</span><span class="pln"> $posts</span><span class="pun">;</span> <span class="pln"> $first_img </span><span class="pun">=</span> <span class="str">''</span><span class="pun">;</span> <span class="pln"> ob_start</span><span class="pun">();</span> <span class="pln"> ob_end_clean</span><span class="pun">();</span> <span class="pln"> $output </span><span class="pun">=</span><span class="pln"> preg_match_all</span><span class="pun">(</span><span class="str">'/<img.+src=[\'"]([^\'"]+)[\'"].*>/i'</span><span class="pun">,</span><span class="pln"> $post</span><span class="pun">-></span><span class="pln">post_content</span><span class="pun">,</span><span class="pln"> $matches</span><span class="pun">);</span> <span class="com">//正则匹配文章中所有图片</span> <span class="pln"> $first_img </span><span class="pun">=</span><span class="pln"> $matches </span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span> <span class="pun">[</span><span class="lit">0</span><span class="pun">];</span>   <span class="kwd">if</span><span class="pun">(</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$first_img</span><span class="pun">)){</span> <span class="com">//定义默认图片</span> <span class="pln"> $first_img </span><span class="pun">=</span> <span…