前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Genesis框架从入门到精通(11): 图像函数

Genesis框架从入门到精通(11): 图像函数

作者头像
丘壑
发布2019-03-13 10:20:56
5910
发布2019-03-13 10:20:56
举报
文章被收录于专栏:一丘一壑一丘一壑

Genesis Explained Image Functions

In the previous part of the Genesis Explained series I talked about the formatting functions. Fortunately this subseries doesn’t require you to read each of the previous parts, but I would encourage you to read the entire series in order. I …

Designs By Nick the Geek


Genesis Explained系列的前一部分中,我谈到了样式函数。函数这个子系列不需要你阅读前面的每个部分,但我建议你按顺序阅读整个系列。我在上一篇文章中提到过,我将略过几个文件并直接跳到 genesis/lib/functions/image.php 文件。我建议阅读的同时打开这个文件,这样你就可以看到我正在谈论的函数。

这里是Genesis 中image.php包含的函数列表。

  • genesis_get_image_id():返回一篇文章中所插入的图片文件的ID(如果有图片的话)。默认值是第一张图片。
  • genesis_get_image():根据参数返回图片附件或特征图像。
  • genesis_image(): 把 genesis_get_image()获取到的图片显示出来
  • genesis_filter_attachment_image_attributes():已经废除
  • genesis_get_additional_image_sizes():同上
  • genesis_get_image_sizes():返回图片尺寸大小的数组。

温馨提示

最近发现一个很好的可以在线阅读Genesis代码的网站:

https://genesis.wp-a2z.org/oik_file/lib/functions/image-php/

这些其中一些只是辅助函数,可能不会经常能用到,但是如果你不想仅仅只是用Genesis打扮打扮换换皮肤,那么其中有一些重要的函数是值得你学习一下的。

genesis_get_image($args = array())

如你所见,$args 是一个数组,但这是啥意思呢?简而言之,你需要将传递一个数组作为参数。用一分钟演示一下。现在,让我们看看默认值。(注:更具Genesis 2.8 更新)

代码语言:javascript
复制
	$defaults = array(
		'post_id'  => null,
		'format'   => 'html',
		'size'     => 'full',
		'num'      => 0,
		'attr'     => '',
		'fallback' => 'first-attached',
		'context'  => '',
	);

这显示了可以在数组中传递的4个不同参数,分别看一下每个参数不同的意义(注:斜体为译者丘壑添加):

  • Format: 控制返回的格式
    • html(默认):默认返回为可以直接用作html的图片,无需设置img标签或任何东西。
    • url:返回图片的url(绝对路径)。可以将其用在链接里或构建自己的html代码。
    • src:返回图片的“src”,相对路径。如果你的图片位于“http://example.com/wp-content/uploads/2011/05/img.jpg”,那么它将返回“wp-content/uploads/2011/05/img.jpg”
  • size:控制基于WordPress定义的图片尺寸
    • full (默认): 原始大小
    • large:返回WP的大图片尺寸
    • medium:返回WP中等尺寸
    • thumbnail:返回WP缩略图大小
    • X:使用 add_image_size()设置的其他图片尺寸。要传的是该尺寸的名称(比如verysmall),而不是使用长乘以宽做参数。
  • num:要返回哪一个的图片。 默认值是0,如果文章未设置特色图像,将返回第一个图片附件。使用1将返回第二张图片,以此类推,但将覆盖特色图像。(注:这里的图片附件 — attached image是指在文章编辑的时候直接上传的图片,插入已经上传过的图片不算attached image)
  • attr:用于设置img标签里的属性和值,返回的是一个数组,其中属性为键,属性值为字符串(示例可以更好的说明这一点)
  • fallback: 可以接受多种不同的(但不一定是所有的)类型, 可以用于没有设置特色图的情况下用第一张或其他图片作为替代,或者用false控制什么都不输出。参考
  • context:手动设置一些的定义量,用于适配其他方法或者函数

还有一些过滤器可用。你可以使用 genesis_get_image_default_args来修改默认参数。 genesis_pre_get_image允许你在参数处理完之后再修改参数(注:这个解释起来有点绕,有一个场景下可以理解这个过滤器:如果一篇文章没有设置特色图,就拿一张默认图片作为特色图)。最后,你可以使用过滤器 genesis_get_image修改最终返回的值。

示例

代码语言:javascript
复制
$img = genesis_get_image( array(
    'format' => 'html',
    'size' => 'thumbnail',
    'num' => 1,
    'attr' => array (
        'class' => 'alignleft'
        ) ) );

因为htmlformat的默认值,所以可以不写,但我想给你展示一下所有的参数值。这将返回第二个附加图像的缩略图,并设置居左class ="alignleft"。很酷。

注:涉及图片的函数都不如文字那么直观,一图胜千言,请看我在开发环境下做的截图。特色图像算作是第一张。如果这篇文章正文里面有图片,都是在编辑的时候上传的,是attached image ,所以可以用genesis_get_image()显示出来,看下面。

genesis_image($args = array())

通常我会说“用echos genesis_get_image() 可以节省你的代码量”,的确如此,但除此之外还有一个非常好的作用。如果没有特色图像也没有附加图片,此函数将返回“false”,因此可以用非常简单的 if / else返回一个默认图像。

代码语言:javascript
复制
if( FALSE === genesis_image( array( 'size' => 'thumbnail' ) ) )
    echo '<img src="http://example.com/default-image.jpg" />';

上面的代码,如果图像存在,它将自动显示图像,否则返回false并加载默认图像。

genesis_get_image_sizes()

这将返回具有图片所有尺寸大小的数组。这在构建窗口小部件或设置主题选项时非常有用,你可以获取到可用的图像大小并将其与你需要的尺寸进行匹配。使用它时你必须做一个foreach,如下所示:

代码语言:javascript
复制
$image_sizes = genesis_get_image_sizes();

echo '<ul>';
    foreach ( $image_sizes as $name => $size ) {
        printf ('<li>%s: ( w:%s h:%s )</li>', $name, $size['width'], $size['height'] );
    }
echo '</ul>';

这会返回带有宽度和高度的图像大小的无序列表。

处理图像的函数用法有点复杂,因为你必须使用数组值,但是一旦你习惯了它们,你会发现它们非常灵活和强大。

写在后面

这一篇虽然讲的内容不复杂,但是信息量还是挺大的,花费了好多时间,主要是在研读代码和验证图像函数的实际展示效果,还有截图做图,甚至连Photoshop都用上了,也是够了。。。图像函数比处理文本的好玩一点,花头比较多,用的好了也能比较抓眼球

下面是多图预警

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-03-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • genesis_get_image($args = array())
  • genesis_image($args = array())
  • genesis_get_image_sizes()
  • 写在后面
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档