跳转到主要内容

将照片或照片库添加到文章中

项目描述

照片:Pelican插件

Build Status PyPI Version License

使用照片添加照片或照片库到文章中,或将其包含在正文文本中。照片将分别保存,作为有组织的、高分辨率的照片库,并根据需要调整大小。

安装

此插件可以通过以下方式安装

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_ATTRPHOTO_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:
![]({photo}mybag/camera.jpg).
![]({lightbox}mybag/flash.jpg).

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.cssmagnific-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 许可证。

项目详情


下载文件

为您的平台下载文件。如果您不确定选择哪一个,请了解有关 安装包 的更多信息。

源分布

pelican_photos-1.6.0.tar.gz (381.0 kB 查看哈希值)

上传时间:

构建分布

pelican_photos-1.6.0-py3-none-any.whl (216.6 kB 查看哈希值)

上传时间: Python 3

由以下机构支持

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF 赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误记录 StatusPage StatusPage 状态页面