PHP模版引擎twig wordpress中调用文章第一张图片
wordpress当文章没有添加Featured media的时候,
就调用文章第一张图片,
调用的wordpress代码函数为:
<?php echo catch_that_image(); ?>
网站使用的themes是Notio,配套插件为Gantry 5 Fraamework,
然而Notio使用的是twig模版引擎,前台文件都是以.twig结尾,
Notio的分类首页使用的文件为主题根目录下的index.php,
而分类下的各个页面使用的是archive.php文件,两者都调用了模版views/partials/content.html.twig

index.php先将所有的数据存放在$context中,之后传递给模版文件使用,
而我发现$context中并没有文章第一张图片这个属性,但是有post_id, content等等的属性,
所以可以自己加上去,通过正则匹配读取post content ,提取出第一个img 的url,作为网站的第一张图片。
同理把如下代码加到archive.php中,
// add from Ryan 2018/05/09 catch posts the first image
function catch_the_image( $post_content ) {
// global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post_content, $matches);
$first_img = $matches [] []; return $first_img;
} for ($i = ; $i < count($context['posts']); $i++) {
$context['posts'][$i]->the_posts_first_image = catch_the_image($context['posts'][$i]->post_content);
} Timber::render($templates, $context);
接着就是在显示到前台页面了,由于在index.html.twig有对posts的数据进行循环,
而我们的数据就存放在posts中,因此可以直接绑定。
{# Begin Featured Image #}
{% if gantry.config.get('content.' ~ scope ~ '.featured-image.enabled', '') and post.thumbnail.src %}
{% set position = (gantry.config.get('content.' ~ scope ~ '.featured-image.position', 'none') == 'none') ? '' : 'float-' ~ gantry.config.get('content.' ~ scope ~ '.featured-image.position', 'none') %}
<a href="{{ post.link }}" class="post-thumbnail" aria-hidden="true">
<img src="{{ post.thumbnail.src|resize(gantry.config.get('content.' ~ scope ~ '.featured-image.width', '1150'), gantry.config.get('content.' ~ scope ~ '.featured-image.height', '285')) }}" class="featured-image tease-featured-image {{ position }}" alt="{{ post.title }}" />
</a>
{% else %}
<a href="{{ post.link }}" class="post-thumbnail" aria-hidden="true">
<img src="{{post.the_posts_first_image}}" class="featured-image tease-featured-image {{ position }}" alt="test" />
</a>
{% endif %}
{# End Featured Image #}
twig判断变量是否为空:
{% if var is null %}
{# do something #}
{% endif %}
}如果这个变量为:array(0) { }一个空数组,那么下面的判断很有效
{% if var|length > 0 %}
{# do something #}
{% endif %}
PHP模版引擎twig wordpress中调用文章第一张图片的更多相关文章
- 织梦CMS调用文章第一张图片(非缩略图)终极方法
之前,网上流传了很多在织梦CMS中调用第一张图片的方法,但大体都一样.即删除缩略图字符串,并添加后缀.然而这种方法仅限于jpg图片或其他单独图片类的调用.如果一个站有png.JPG.gif等多种格式. ...
- PHP模版引擎 – Twig
在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入 ...
- 将wordpress中的文章导出为markdown
一.进入wordpress后台,选择工具-导出数据,选择你需要导出的内容.文章等,会下载一个xml文件到本地电脑 二.使用一个名为wordpress-to-markdown的工具 源码地址:wordp ...
- wordpress 首页调用文章 不同样式的方法
<?php $count = 1; $display_categories = array(1); foreach ($display_categories as $category) { ?& ...
- dede调取文章内容的第一张图片
dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...
- PHP获取网站中各文章的第一张图片的代码示例
调取文章中的第一张图作为列表页缩略图是很流行的做法,WordPress中一般主题默认也是如此,那我们接下来就一起来看看PHP获取网站中各文章的第一张图片的代码示例 ? 1 2 3 4 5 6 7 8 ...
- PHP获取网站中文章的第一张图片作为缩略图的方法
调取文章中的第一张图作为列表页缩略图是很流行的做法,WordPress中一般主题默认也是如此,那我们接下来就一起来看看PHP获取网站中各文章的第一张图片的代码示例 $temp=mt_rand(1,4) ...
- Underscore模版引擎的使用-template方法
之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换.当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是 ...
- 【dedecms】DEDE列表页调用文章内容第一张图片(非缩略图)方法
打开 ../ include/ common.func.php 添加代码 //将缩放图转变为文章第一张图片 function firstimg($str_pic) { $str_sub=substr( ...
随机推荐
- IE盒子模型和W3C盒子模型
IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...
- JavaScprit30-6 学习笔记
今天学习的是 仿即时搜索诗句效果 第一个问题: fetch() Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fe ...
- Ubuntu 16.04 server版本开机启动脚本不支持
Ubuntu16.04开机启动的脚本一直不支持,错误用在将开机启动脚本放到了home/usr/的目录下,应该放到/root才能正常启动.#!/bin/sh -e ## rc.local## This ...
- 一个SQL server的事务存储
-- ============================================= -- Author: Evan -- Create date: 2018年6月14日 16点27分 - ...
- javase基础-Helloword
public class HelloWorld {//创建一个类 :1.类名首字母需要大写:2.类名必须和文件名一致 public static void main(String[] ...
- docker单主机网络
当你安装Docker时,它会自动创建三个网络.你可以使用以下docker network ls命令列出这些网络: [root@localhost ~]# docker network ls NETWO ...
- linux文本处理工具及正则表达式
cat命令:查看文本内容 cat [选项]... [文件]... -E 显示行结束符 -n 显示文本内容时显示行号 -A 显示所以控制符 -b 非空行编号 -s 压缩连 ...
- js菜鸟备忘
1.图片切换 function changeImage() { var img = document.getElementById("myImg"); ")) img.s ...
- Object-C知识点 (五) NSObject的继承关系
这篇文章主要介绍常用的继承自NSObject的类,方便朋友们查看和面试前查看使用!!! 结构图: 更多内容--> 博客导航 每周一篇哟!!! 有任何关于iOS开发的问题!欢迎下方留言!!!或者邮 ...
- iOS中的数据存储方式_SQLite3
优点: 1) SQLite是一款轻型的嵌入式数据库; 2) 它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了 3) 它的处理速度比Mysql.PostgreSQL这两款著名的数据库都还 ...