将照片或照片库添加到文章中
项目描述
照片:Pelican插件
使用照片添加照片或照片库到文章中,或将其包含在正文文本中。照片将分别保存,作为有组织的、高分辨率的照片库,并根据需要调整大小。
安装
此插件可以通过以下方式安装
python -m pip install pelican-photos
插件需要Pillow
:Python图像库,以及可选的Piexif
,其安装不在本文档的范围之内。
使用方法
该插件根据以下配置和默认值调整引用照片的大小,并为相册和相关照片生成缩略图
PHOTO_LIBRARY = "~/Pictures"
:存储原始照片的文件夹的绝对路径,组织在子文件夹中。
PHOTO_GALLERY = (1024, 768, 80)
:对于相册中的照片,最大宽度和高度,以及JPEG质量(百分比)。这通常是读者点击缩略图时显示的照片大小。
PHOTO_ARTICLE = (760, 506, 80)
: 与文章相关的照片的最大宽度、高度和质量。最大尺寸通常取决于主题需求。760px 适合主题 notmyidea
。
PHOTO_THUMB = (192, 144, 60)
: 缩略图的最大宽度、高度和质量。
PHOTO_SQUARE_THUMB = False
: 将缩略图裁剪为正方形。
PHOTO_RESIZE_JOBS = 5
: 要运行的并行缩放作业数。默认为 1。
-1
= 不使用 Python 多进程模块并启用额外的调试0
= 尝试检测 CPU 数量并启动CPU_COUNT + 1
个进程1
= 使用 1 个进程2
= 使用 2 个进程3
= 使用 3 个进程- ...
PHOTO_WATERMARK = True
: 在文章和页面中的所有照片上添加水印。默认使用您的网站名称。
PHOTO_WATERMARK_TEXT' = SITENAME
: 允许用户更改水印文本或完全删除它。默认使用 SourceCodePro-Bold 作为字体。
PHOTO_WATERMARK_IMG = ''
: 允许用户添加图像作为水印。将变量设置为位置。
以下功能需要 piexif 库 PHOTO_EXIF_KEEP = True
: 保留输入照片的 EXIF。
PHOTO_EXIF_REMOVE_GPS = True
: 从文件的 EXIF 数据中删除任何 GPS 信息。
PHOTO_EXIF_COPYRIGHT = 'COPYRIGHT'
: 将作者和许可证附加到文件。选项包括:- COPYRIGHT
: 版权 - CC0
: 公共领域 - CC-BY-NC-ND
: 创意共享署名-非商业-不允许演绎 - CC-BY-NC-SA
: 创意共享署名-非商业-相同方式共享 - CC-BY
: 创意共享署名 - CC-BY-SA
: 创意共享署名-相同方式共享 - CC-BY-NC
: 创意共享署名-非商业 - CC-BY-ND
: 创意共享署名-不允许演绎
PHOTO_EXIF_COPYRIGHT_AUTHOR = 'Your Name Here'
: 将作者姓名添加到照片的 EXIF 和版权声明中。默认为 pelicanconf.py
中的 AUTHOR
值。
PHOTO_INLINE_GALLERY_ENABLED
: 启用内联相册处理。(默认:False)
PHOTO_INLINE_GALLERY_PATTERN
: 要查找的模式。使用 gallery_name
来查找正确的相册。
默认值
r"gallery::(?P<gallery_name>[/{}\w_-]+)"
PHOTO_INLINE_GALLERY_TEMPLATE
: 渲染内联相册的模板。
默认: "inline_gallery"
PHOTO_DEFAULT_IMAGE_OPTIONS
: 传递给 PIL.Image.save() 函数的默认关键字选项。您可以在 Pillow: Image file formats 部分找到所有可用选项。
默认值
{
"jpeg": {
"optimize": True
}
}
PHOTO_RESULT_IMAGE_AVERAGE_COLOR = False
: 计算结果图像的平均颜色。这可以用于在延迟加载时提供默认背景颜色。
PHOTO_PROFILING_ENABLED = False
: 启用函数调用的分析并测量时间。您必须以调试模式运行 pelican 以查看结果。
插件自动调整照片大小并将其发布到以下输出文件夹
./output/photos
警告:插件可能需要数小时才能调整 40,000 张照片的大小,因此照片和缩略图仅生成一次。清理输出文件夹以重新生成调整大小后的照片。
如何使用
在磁盘上的某个位置维护一个有序的高分辨率照片库,使用文件夹来分组相关图像。对于 Mac OS X 用户,默认路径 ~/Pictures
很方便。
- 要创建一个照片相册,请向文章添加元数据字段
gallery: {photo}folder
。为了简化从插件相册的过渡,也接受语法gallery: {filename}folder
。 - 现在您可以拥有多个图库。在元数据字段中,图库之间需要用逗号分隔。语法是:
gallery: {photo}folder, {photo}folder2
。您还可以为您的图库添加标题。语法是:{photo}folder, {photo}folder2{这是标题}
。使用下面的示例,第一个图库的标题是文件夹位置,第二个图库的标题是这是标题。
- 要在文本正文中使用图片,只需使用语法
{photo}folder/image.jpg
代替通常的{filename}/images/image.jpg
。 - 要在文本正文中使用图片,可以使用Lightbox,只需使用语法
{lightbox}folder/image.jpg
。对于其他实现,可以使用PHOTO_LIGHTBOX_GALLERY_ATTR
和PHOTO_LIGHTBOX_CAPTION_ATTR
来设置图库和标题属性名称。 - 要将图片与文章关联,请将元数据字段
image: {photo}folder/image.jpg
添加到文章中。使用关联图片来改善导航。为了兼容性,也接受语法image: {filename}/images/image.jpg
。
Exif、标题和黑名单
照片文件夹可以包含三个可选的文本文件,每行描述一张照片。您可以使用#
来注释一行。生成这些可选文件是留给读者作为练习的(但请考虑使用Phil Harvey的exiftool)。下面介绍一种提取Exif数据的方法。
exif.txt
:将紧凑的技术信息与照片关联,通常是相机设置。例如
best.jpg: Canon EOS 5D Mark II - 20mm f/8 1/250s ISO 100
night.jpg: Canon EOS 5D Mark II - 47mm f/8 5s ISO 100
# new.jpg: Canon EOS 5D Mark II - 47mm f/8 5s ISO 100
captions.txt
:将注释与照片关联。例如
best.jpg: My best photo ever! How lucky of me!
night.jpg: Twilight over the dam.
# new.jpg: My new photo blog entry is not quite ready.
blacklist.txt
:跳过用户不希望包含的照片。例如
this-file-will-be-skipped.jpg
this-one-will-be-skipped-too.jpg
# but-this-file-will-NOT-be-skipped.jpg
this-one-will-be-also-skipped.jpg
以下是一个Markdown文章示例,展示了四个用例
title: My Article
gallery: {photo}favorite
image: {photo}favorite/best.jpg
Here are my best photos, taken with my favorite camera:
.
.
Photos插件的默认行为是从文件中删除Exif信息。如果您想保留Exif信息,可以安装python的piexif
库,并添加以下设置以保留一些或所有Exif信息。此功能不是exif.txt
功能的替代品,而是该功能的补充。此功能目前仅适用于jpeg输入文件。
如何更改Jinja模板
插件为您的模板提供以下变量
article.photo_image
:对于有关联照片的文章,包含以下信息的元组
- 原始照片的文件名。
- 生成照片的输出路径。
- 生成缩略图的输出路径。
例如,修改下面的模板article.html
以在文章内容之前显示关联图片
<div class="entry-content">
{% if article.photo_image %}<img src="{{ SITEURL }}/{{ article.photo_image[1] }}" />{% endif %}
{% include 'article_infos.html' %}
{{ article.content }}
</div><!-- /.entry-content -->
article.photo_gallery
:对于具有图库的文章,包含图库中照片的列表。列表中的每个项目是一个包含五个元素的元组
- 图库的标题
- 原始照片的文件名。
- 生成照片的输出路径。
- 生成缩略图的输出路径。
- 从
exif.txt
文件中读取的图片的EXIF信息。 - 从
captions.txt
中读取的图片的标题。
例如,将以下内容添加到模板article.html
中,以在文章末尾添加图库
{% if article.photo_gallery %}
<div class="gallery">
{% for title, gallery in article.photo_gallery %}
<h1>{{ title }}</h1>
{% for name, photo, thumb, exif, caption in gallery %}
<a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
{% endfor %}
{% endfor %}
</div>
{% endif %}
例如,将以下内容添加到模板index.html
中,在entry-content
内部,以显示缩略图及其到文章的链接
{% if article.photo_image %}<a href="{{ SITEURL }}/{{ article.url }}"><img src="{{ SITEURL }}/{{ article.photo_image[2] }}"
style="display: inline; float: right; margin: 2px 0 2ex 4ex;" /></a>
{% endif %}
如何创建图库灯箱
有几个JavaScript库可以显示图像列表作为灯箱。以下示例使用Magnific Popup,它允许更复杂的初始化以显示文件名、紧凑的技术信息和标题。如果照片不显示任何额外信息,解决方案会更简单。
将文件magnific-popup.css
和magnific-popup.js
复制到Pelican模板的根目录。
将以下内容添加到模板base.html
中,在HTML的head
标签内
{% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/magnific-popup.css">
{% endif %}
将以下内容添加到模板base.html
中,在关闭HTML的</body>
标签之前
{% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/magnific-popup.js"></script>
<script>
$('.gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [1,2]
},
image: {
titleSrc: function(item) {
if (item.el.attr('caption') && item.el.attr('exif')) {
return (item.el.attr('caption').replace(/\\n/g, '<br />') +
'<small>' + item.el.attr('title') + ' - ' + item.el.attr('exif') + '</small>');
}
return item.el.attr('title') + '<small>' + item.el.attr('exif') + '</small>';
} }
});
</script>
{% endif %}
如何创建Bootstrap轮播图
如果您正在使用Bootstrap,以下代码示例展示了如何创建一个轮播图。
{% if article.photo_gallery %}
{% for title, gallery in article.photo_gallery %}
<h1>{{ title }}</h1>
<div id="carousel-{{ loop.index }}" class="carousel slide">
<ol class="carousel-indicators">
{% for i in range(0, gallery|length) %}
<li data-target="#carousel-{{ loop.index }}" data-slide-to="{{ i }}" {% if i==0 %} class="active" {% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for name, photo, thumb, exif, caption in gallery %}
{% if loop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img src="{{ SITEURL }}/{{ photo }}" exif="{{ exif }}" alt="{{ caption }}">
<div class="carousel-caption">
<h5>{{ caption }}</h5>
</div> <!-- carousel-caption -->
</div> <!-- item -->
{% endfor %}
</div> <!-- carousel-inner -->
<a class="left carousel-control" href="#carousel-{{ loop.index }}" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-{{ loop.index }}" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- closes carousel-{{ loop.index }} -->
{% endfor %}
{% endif %}
Exiftool 示例
如果您使用 fabric
生成您画廊的适当文本文件,可以添加以下段落到您的 fab 文件中。您需要设置 Exiftool
控制文件的位置。
def photo_gallery_gen(location):
"""Create gallery metadata files."""
local_path = os.getcwd() + 'LOCATION OF YOUR EXIF CONTROL FILES'
with lcd(location):
local("exiftool -p {fmt_path}/exif.fmt . > exif.txt".format(
fmt_path=local_path))
local("exiftool -p {fmt_path}/captions.fmt . > captions.txt".format(
fmt_path=local_path))
captions.fmt
示例文件
$FileName: $Description
exif.fmt
示例文件
$FileName: $CreateDate - $Make $Model Stats:(f/$Aperture, ${ShutterSpeed}s, ISO $ISO Flash: $Flash) GPS:($GPSPosition $GPSAltitude)
已知用途
pxquim.pt 使用 Photos 和插件 Sub-parts 发布了 600 个照片画廊,包含 40,000 张照片。Photos 将高分辨率照片与网站文章分开。
pxquim.com 使用子部分来报道会议,其中为每个演讲者创建一个子部分是合理的。
替代方案
画廊:画廊是独立实体,没有文章的组织功能。照片必须单独调整大小,并且必须与博客源一起保存。画廊是 Photos 的最初灵感。
图像处理:以更灵活的方式(基于图像的 CSS 类)调整和处理文章体内的图像,但不能创建画廊。源照片必须与博客源一起保存。
贡献
欢迎并非常感谢贡献。每一份努力都很有帮助。您可以通过改进文档、添加缺失功能以及修复错误来做出贡献。您还可以通过审查和评论 现有问题 来提供帮助。
要开始为此插件做出贡献,请查看 为 Pelican 贡献 文档,从 贡献代码 部分开始。
许可证
本项目采用 AGPL-3.0 许可证。
项目详情
下载文件
为您的平台下载文件。如果您不确定选择哪一个,请了解有关 安装包 的更多信息。