zblog教程 内容:43

zblog新建 / 文章 / 分类 / 标签 / 单独缩略图上传教程

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

    缩略图上传效果图

    文章页效果图

    zblog新建 / 文章 分类 标签 单独缩略图上传教程 zblog 第1张图片

    标签页效果图

    zblog新建 / 文章 分类 标签 单独缩略图上传教程 zblog 第2张图片

    分类页效果图

    zblog新建 / 文章 分类 标签 单独缩略图上传教程 zblog 第3张图片

    新建文章单独缩略图上传扩展

    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接口。

    请登录之后再进行评论

    登录
    最新评论