.. _inserting_images:

插入图片和视频
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

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

.. image:: ../../_static/images/screen14_add_main_image.png

选择插入图片
___________________________

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

#. 从已在图库中图片选择一个插入
#. 上传一个新图片到图库并插入

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

**从图片中选择一个图片**

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

.. image:: ../../_static/images/screen16_selecting_image_from_library.png

#. 在搜索框中输入文字，匹配的结果自动显示在下方。
#. 点击一个常用的标签可以过滤匹配到的结果。
#. 点击图片转到选择格式的窗口 (参见下面的格式选择示例)。

**上传新图片到 CMS 中**

.. image:: ../../_static/images/screen17_upload_image.png

#. 上传文件需要加标题说明
#. 点击【选择文件】按钮从计算机上选择图片。
#. 【Tags】允许为图片设定标签，方便搜索和查找到图片。每个标签用空格分隔。对于多单词标签建议使用下划线进行连接。
#. 点击【上传】上传图片至图库中，图库中的图片可以用在其它页面中。

在富文本中插入图片
__________________________________________

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

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

.. image:: ../../_static/images/screen18_image_format.png

#. 通过格式选项，可以设置图片显示方式。
#. 需要为图片设定 `替代标题 <https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Alternative_text>`_ （显示不成功时会提示这些文字）。

格式选项说明:

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

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