Impreza主题基础操作

响应式图像

19 views 2019年2月24日 2019年3月4日 imaiko 0

响应式图像

本文将有助于理解在基于Impreza的网站上显示图像的机制。

首先你应该知道的 – 上传到你的媒体库的每一个图像将自动创建几个缩略图(尺寸为像素),这是一个默认的WordPress机制。这些缩略图的数量取决于图像的原始尺寸和设置。检查下表。

预定义的图像尺寸

尺寸(px) 在默认情况下使用
1024 x 1024 – 具有“经典”布局和1列的博客
– 元标记“og:image”
768 x任何 – 带有“砌体”模式的博客
– 带有“砌体”模式和2,3,4,5列的图库
– 投资组合内容元素
300 x 300 – 带有“砌体”模式和6,7,8,9,10列的图库
– 标志展示元素
– 预加载器屏幕自定义图像
150 x 150(裁剪) – 带有“网格”模式和8,9,10列的图像库
– 图像滑块“大拇指”附加导航
– 投资组合页面和帖子上的侧面导航
– 投资组合小部件图块
– 见证作者照片
– 产品页面上的产品库缩略图
– 产品预览WooCommerce小部件
600 x 600(裁剪) – 具有“经典”,“平面”,“卡片”,“瓷砖”布局的博客
– 带有“网格”模式的图像库和2,3,4列
350 x 350(裁剪) – 带有“小圆圈图像”和“小方形图像”布局的博客
– 带有“网格”模式和5,6,7列的图像库
– 人员元素
– 相关文章在帖子页面上的预览
600 x 600(裁剪) – 产品页面上的主要产品图像
300 x 300(裁剪) – 所有产品列表(商店和类别页面,交叉销售和追加销售区块)
  • (裁剪)意味着缩略图将被裁剪为精确的宽度和高度,忽略原始图像的比例
  • 如果两个或多个图像尺寸具有相同的值,则只会生成一个缩略图

关于上面的表格,当您上传大图片(大于1024px)时,默认情况下会生成6个缩略图(如果您使用WooCommerce,则会生成8个缩略图)。所有缩略图都位于WordPress安装的/ wp-content / uploads /文件夹中,缩略图的文件名后缀为后缀,即像素尺寸:

1967.png

如何添加新的图像尺寸

Impreza 4.4中,我们添加了通过主题选项>高级>自定义图像尺寸中的特定选项添加新图像尺寸的功能

2173.png

您可以设置任何数量的其他图像大小。添加新尺寸或更改现有尺寸后,您应该重新生成缩略图。

由于每个图像大小,我们不建议设置许多图像大小:

  • 当您将图像添加到媒体库时,会增加上传时间
  • 在上传目录中创建关于您上传图片数量的附加文件。例如,如果您上传100个图像到您的网站,默认情况下您将有700个文件摘要,每重新生成缩略图后每增加一个图像大小都会添加100个文件。

重新生成缩略图

当您更改现有图像大小的任何值或添加新图像时,应重新生成上传图像的缩略图。

再生仅通过插件提供。我们建议使用强制重新生成缩略图, 因为此插件也会从上传目录中删除所有未使用大小的图像。

你可以在哪里选择图片尺寸

在大多数情况下,主题元素使用最适合的图像尺寸,通过Impreza代码进行预定义,请查看“ 预定义图像尺寸 ”表了解更多信息。但为了更好地管理网站页面加载速度,我们实现了为以下元素选择图片大小的功能:

  1. 单个图像
  2. 图像滑块
  3. 图片库
  4. 投资组合
  5. 博客
  6. 博客帖子预览块在主题选项
  7. 相关帖子块在主题选项
  8. 主题选项中的博客主页
  9. 在主题选项中归档页面
  10. 主题选项中的搜索结果页面
  11. 通过文本编辑器中的“添加媒体”按钮显示图像
  12. 通过文本编辑器中的“添加媒体”按钮创建图库

帮到你了吗?