zblog网站发展最不可缺少的应该就是文章缩略图吧,比如做APP的就需要APP图标作为缩略图,做商品的就需要产品缩略图,这些如果用文章自动提取第一张,这完全达不到理想的效果。不要慌,zblog扩展UEditor插件上传缩略图教程,它来了。
缩略图上传效果图
文章页效果图

标签页效果图

分类页效果图

新建文章单独缩略图上传扩展
1、在主题模板“ include.php”挂载接口:
Add_Filter_Plugin('Filter_Plugin_Edit_Response3','主题ID_article_img');
2、接口代码放置 “ include.php ” 最后:
function 主题ID_article_img(){
global $zbp,$article;
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/theme/主题/style/js/文件名.js\"></script>";
echo '
<p align="left" class="uploadimg">缩略图:
<input name="meta_pic" id="edtTitle" type="text" class="uplod_img" style="width:60%;" value="'.$article->Metas->pic.'" />
<strong style="color: #ffffff; font-size: 1.1em; height: 29px; padding: 6px 18px 6px 18px; margin: 0 0.5em; background: #3a6ea5; border: 1px solid #3399cc; cursor: pointer;">浏览文件</strong>
</p>';
}
3、引用下方上传图片js组件代码:
var container = document.createElement('script');
$(container).attr('type','text/plain').attr('id','img_editor');
$("body").append(container);
_editor = UE.getEditor('img_editor');
_editor.ready(function () {
_editor.hide();
$(".uploadimg strong").click(function(){
object = $(this).parent().find('.uplod_img');
_editor.getDialog("insertimage").open();
_editor.addListener('beforeInsertImage', function (t, arg) {
object.attr("value", arg[0].src);
});
});
});
PS:请先本地创建一个js文件,复制上方代码,上传到主题js目录,然后将上方接口代码第3行路径改为你上传的路径。
4、主题文章模板页调用图片代码:
{$article.Metas.pic}
新建标签,分类,单独缩略图上传扩展
1、在主题模板“ include.php”挂载接口:
Add_Filter_Plugin('Filter_Plugin_Tag_Edit_Response','主题ID_tag_seo');//tag
Add_Filter_Plugin('Filter_Plugin_Category_Edit_Response','主题ID_tag_seo');//分类
2、接口代码放置 “ include.php ” 最后:
function 主题ID_tag_seo(){
global $zbp,$tag;
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_system/script/jquery.tagto.js\"></script>";
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_system/script/jquery-ui-timepicker-addon.js\"></script>";
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/plugin/UEditor/ueditor.config.php\"></script>";
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/plugin/UEditor/ueditor.all.min.js\"></script>";
echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/theme/主题/script/文件.js\"></script>";
echo '<p align="left" class="uploadimg">上传TAG图:<input name="meta_tagpic" id="edtTitle" type="text" class="uplod_img" style="width:40%;" value="'.$tag->Metas->tagpic.'" />
<strong style="color: #ffffff; font-size: 14px;padding: 6px 18px 6px 18px; background: #3a6ea5;border: 1px solid #3399cc; cursor: pointer;">浏览文件</strong>
</p>';
}
3、主题标签模板页调用图片代码:
{$tag.Metas.tagpic}
PS:请先本地创建一个js文件,复制上方图片js组件代码,上传到主题js目录,然后将上方接口代码第7行路径改为你上传的路径。
PS:上方请根据需求来选择挂载接口。如果是分类页扩展缩略图,那就挂载分类接口。如果是tag就挂载tag接口。
广告插入