基于Violet主题添加相册

笔记 笔记 相册 阅读次数:2334 本页字数: 2625 发布日期:2020-01-19 最后更新:2020-01-22 13:13:16

基于Violet主题添加了相册功能,还是新手,记录一下。测试效果:
测试效果

一、自定义相册分类页面

1.新建相册分类
在后台分类管理下新建相册分类,分类缩略名为gallery

2.自定义分类页样式
在主题根目录下新建文件夹category,然后在category目录下新建相册分类的页面样式gallery.php(在原来分类页面的基础上略作修改),代码在这儿,点击下载
下面是相册分类页面效果:

其中相册封面图右上角的中括号里的内容代表该相册的照片数量,需要在上面说的tool.php文件中添加下面的函数,用来统计每个相册的照片数量,然后在/category/gallery.php中适当位置调用该函数即可。

function CountImg($obj) {
    $txt = $obj->fields->gallery; 
    $string_imgs = explode("\r\n", $txt);
    $imgs = count($string_imgs);
    return $imgs;
}

二、添加自定义字段

在后台编辑文章的页面添加一个文本域,以供提交相册图片url:

在主题根目录下/lib/tool.php中自定义关键字的函数体内加入以下代码,即可实现该功能

$gallery = new Typecho_Widget_Helper_Form_Element_Textarea('gallery', NULL, NULL, _t('添加相册'), _t('输入图片链接,以回车分隔'));
$layout->addItem($gallery);

三、自定义相册文章页面

在主题根目录下新建文件夹article_style,并在该目录下新建gallery.php,这里的gallery.phpcategory目录下的不一样,一个是分类页面,一个是文章页面。代码不是很长,这里就粘在下面:

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title"><?php $this->title(); ?></h4><!--<?php get_post_view($this) ?>-->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card d-block">
                <div class="card-body">
                    <div class="content">
                        <div class="row">
                        <!--添加照片-->
                        <?php
                        $txt = $this->fields->gallery; 
                        $string_imgs = explode("\r\n", $txt);
                        foreach($string_imgs as $img_url) {
                        echo '<div class="imgbox"><a data-fancybox="gallery" href="'.$img_url.'"><img class="b-lazy" src="'.$img_url.'"></a></div>';
                        }
                        ?>
                        </div>
                    </div>
                </div> 
            </div> 
            <?php $this->need('comments.php'); ?>
        </div> 
    </div>
</div>

<?php if(!$this->request->isAjax()): ?>
<?php $this->need('footer.php'); ?>
<?php endif;?>

其中用到的一些CSS样式如下,需要在style.css中添加:

@media only screen and (max-width:767px){
.imgbox{
    position: relative;
    width: 50%;
    height: 0px;
    padding-top: 40%; 
}
}
@media only screen and (min-width:767px){
.imgbox{
    position: relative;
    width: 20%;
    height: 0px;
    padding-top: 15%; 
}
}
.imgbox img{
    position: absolute;
    top: 3px;
    left: 3px;
    width: 98%;
    height: 98%;
}
.item-num {
    position: absolute;
    top: 12px;
    right: 12px;
    color: white;
    line-height: 1;
}

好像这样就差不多了吧,来看看最终效果:

0条评论

小编
关于本站
站点字数: 10.81 W
在线人数:1人
运行时间: 0年217天19小时14分
站长格言: 生命不息,折腾不止,就是喜欢花里胡哨
听听音乐
相关推荐
2020 © Typecho Theme Violet 黔ICP备19012043号
您是第 9885 位访客