插入图片和视频

很多情况下需要往页面中加入图片。在后台管理平台中可以通过以下两种方法增加图片，一是通过图片字段的图片浏览器添加图片，另一是通过富文本图片按钮添加。 使用哪种方式，取决于网站设计人员是如果设计和配置页面的。

图片字段使用图片选择器插入图片

通常页面的标识图片或需要分享的图片定义成一个图片字段。对于图片字段，需要插入图片时点击【选择图片】按钮。

../../_images/screen14_add_main_image.png

选择插入图片

插入图片可通过如下两种方式之一:

  1. 从已在图库中图片选择一个插入

  2. 上传一个新图片到图库并插入

点击【选择图片】按钮会弹出一个有两个选项卡的选择框。第一个搜索并从图库中选择一个图片，第二个【上传】，允许上传新的图片。

从图片中选择一个图片

下图展示了从图库中查找并插入图片的过程。

../../_images/screen16_selecting_image_from_library.png

  1. 在搜索框中输入文字，匹配的结果自动显示在下方。

  2. 点击一个常用的标签可以过滤匹配到的结果。

  3. 点击图片转到选择格式的窗口 (参见下面的格式选择示例)。

上传新图片到 CMS 中

../../_images/screen17_upload_image.png

  1. 上传文件需要加标题说明

  2. 点击【选择文件】按钮从计算机上选择图片。

  3. 【Tags】允许为图片设定标签，方便搜索和查找到图片。每个标签用空格分隔。对于多单词标签建议使用下划线进行连接。

  4. 点击【上传】上传图片至图库中，图库中的图片可以用在其它页面中。

在富文本中插入图片

通过富文本编辑器，也可以将图片插入到富文本之中。方法是点击富文本编辑器的【图片】控件，将弹出类似于上面的图片选择框。

另外，Wagtail 允许设置图片的格式。

../../_images/screen18_image_format.png

  1. 通过格式选项，可以设置图片显示方式。

  2. 需要为图片设定 替代标题 （显示不成功时会提示这些文字）。

格式选项说明:

  • 全宽: 图片插入文本区域后宽度会和页面宽度相同。

  • 半宽左/右对齐: 图片插入文本区域后宽度会有页面一半宽度。如果是插入文字块中，文字将显示在图片周围。如果是两个半宽图片，它们会并列显示。

注解

图片显示会和网站的程序实现相关，如果程序员改变了规则，显示方式会和上面表述的有所不同。