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中调用文章第一张图片的更多相关文章

  1. 织梦CMS调用文章第一张图片(非缩略图)终极方法

    之前,网上流传了很多在织梦CMS中调用第一张图片的方法,但大体都一样.即删除缩略图字符串,并添加后缀.然而这种方法仅限于jpg图片或其他单独图片类的调用.如果一个站有png.JPG.gif等多种格式. ...

  2. PHP模版引擎 – Twig

    在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入 ...

  3. 将wordpress中的文章导出为markdown

    一.进入wordpress后台,选择工具-导出数据,选择你需要导出的内容.文章等,会下载一个xml文件到本地电脑 二.使用一个名为wordpress-to-markdown的工具 源码地址:wordp ...

  4. wordpress 首页调用文章 不同样式的方法

    <?php $count = 1; $display_categories = array(1); foreach ($display_categories as $category) { ?& ...

  5. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  6. PHP获取网站中各文章的第一张图片的代码示例

    调取文章中的第一张图作为列表页缩略图是很流行的做法,WordPress中一般主题默认也是如此,那我们接下来就一起来看看PHP获取网站中各文章的第一张图片的代码示例 ? 1 2 3 4 5 6 7 8 ...

  7. PHP获取网站中文章的第一张图片作为缩略图的方法

    调取文章中的第一张图作为列表页缩略图是很流行的做法,WordPress中一般主题默认也是如此,那我们接下来就一起来看看PHP获取网站中各文章的第一张图片的代码示例 $temp=mt_rand(1,4) ...

  8. Underscore模版引擎的使用-template方法

    之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换.当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是 ...

  9. 【dedecms】DEDE列表页调用文章内容第一张图片(非缩略图)方法

    打开 ../ include/ common.func.php 添加代码 //将缩放图转变为文章第一张图片 function firstimg($str_pic) { $str_sub=substr( ...

随机推荐

  1. TCP/IP协议分析含义与功能

    TCP/IP协议模型从更实用的角度出发,形成了高效的四层体系结构,即网络接口层.IP层.传输层和应用层.TCP/IP是一组专业化协议,包括IP.TCP.UDP.ARP.ICMP以及其它的一些被称为子协 ...

  2. O2O创业团队,遇到生死悠关的问题,希望大家支招?

    简单概括下情况:公司名下有两个内部创业团队,A团队成立3年以上,现在模式基本成熟稳定,有固定营收,但是还未收支平衡:B团队O2O项目,成立5个月左右,还处于萌芽阶段,技术+运营+市场共计9名成员,现总 ...

  3. C# 向服务器上传文件(客服端winform、服务端web)

    转载 首先写客服端,winform模拟一个post提交: /// <summary> /// 将本地文件上传到指定的服务器(HttpWebRequest方法) /// </summa ...

  4. Caused by: java.lang.ClassNotFoundException: org.springframework.web.socket.server.standard.ServerEndpointExporter

    Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/web/socket/ ...

  5. win7下一直试用Beyond Compare 4

    找到目录C:\Users\用户名\AppData\Roaming\BeyondCompare,将这个目录删除,重启compare即可.

  6. JavaScript——图片懒加载

    前言 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ github | https://github.com/wangyang0210/bky/tree/picLoadLazy 内容 ...

  7. Bootstrap历练实例:带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  8. 01_3_创建一个Action

    01_3_创建一个Action 1. 定义一个action 具体视图的返回可以由用户自己定义的Action来决定 具体的手段是根据返回的字符串找到相应的配置项,来决定视图的内容 具体Action的实现 ...

  9. ios下通过webservice获取数据

    经历了两天的摸索,终于成功获取了数据,因为公司要做一个停车入库的信息查询,所以需要访问webservice的接口,由于没有接触过webservice,所以第一天就是各种搜索资料,类库,各种尝试,甚至是 ...

  10. IOS版本判断

    -(void)getIOSVersion { //#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 50000    //此方法和编译器相关 //quanju.iOS ...