带有撇号 CMS 的图像答案

【问题标题】：Images with Apostrophe CMS带有撇号 CMS 的图像
【发布时间】：2016-11-23 18:41:03
【问题描述】：

我正在尝试找出在文章中上传和显示图片的最佳方式。现在我在 apostrophe-blog-pages show.html 模板下有以下代码

<div>
          {{ apos.area(data.piece, 'main', {
                widgets: {
                  'apostrophe-rich-text': {
                     toolbar: [ 'Styles', 'Bold', 'Italic', 'Blockquote', 'Link', 'Anchor', 'Unlink', 'Table', 'BulletedList', 'NumberedList' ],
                     styles: [
                       { name: 'Title', element: 'h3' },
                       { value: 'h5', label: 'Subtitle' },
                       { name: 'Paragraph', element: 'p' }
                     ]
                   },
                  'apostrophe-images': {
                    size: 'original'
                  },
                  'apostrophe-video': {}
                }
              }) }}
        </div>

我面临的问题是我有不同大小和纵横比的图像。撇号或 imagemagick 会自动决定图像的实际纵横比应该是什么样子，对于较大的图像它可以正常工作，但对于较小的图像（通常小于 400 像素大小），图像会显示像素化或放大。

不确定以原始高度和宽度显示图像的最佳方法是什么。

【问题讨论】：

您的代码没有帮助解决这个问题，因为它没有显示如何调整图像大小或如何在网页中设置图像大小。
@Bonzo 代码正在调用内置的 apostrophecms 函数来显示图像，请查看 here 以查看相同的文档。
问题是如何使用 ImageMagick？你用什么命令行来调整它们的大小？请提供更多详细信息，因为您抱怨 ImageMagick。

标签： imagemagick aspect-ratio apostrophe-cms

【解决方案1】：

如你所知，我是 P'unk Avenue 的 Apostrophe 的首席开发人员。

在您提供的代码中，撇号实际上并没有以任何方式影响您的纵横比或图像尺寸。您将size 设置为original，而您还没有设置minSize 或aspectRatio，所以Apostrophe 对您的图像确实没有意见。

我们实际上强烈反对使用original，除非您有非常非常好的理由让您的用户对要上传的图片的正确大小进行额外思考。如果你让你的用户上传他们最好的图片（嗯，最多大约 2000x2000 左右......）并使用 Apostrophe 的尺寸，如 one-half、full 和 max，并使用 CSS 进行最终调整，你会无需网站管理员在 Photoshop 中预先调整所有内容，即可获得良好的页面加载速度。

但同样...您的代码中没有以任何方式裁剪图像。

如果您认为这里存在错误，即 Apostrophe 被裁剪到不应该出现的位置，请在 github 中准备一个测试项目，并在 apostrophe 项目上打开一个 github issue 并提供详细信息。

谢谢！

【讨论】：

你好@booutell，首先要确保我不是在谈论裁剪功能。手头的问题是，当文章中的图像尺寸低于某个尺寸时，撇号 cms 添加 css 样式，使图像看起来像素化。我尝试使用 apostrophecms 演示网站给您一个示例，但看起来您设置了最小宽度。能否请您使用placeholdit.imgix.net/…此尺寸图片并尝试将其上传到您身边。
步骤如下： 1. 转到任何文章/博客页面 2. 添加宽度小于 350 像素且高度大于 500 像素的图像 3. 保存图像并刷新页面。跨度>
这里是一个小尺寸图片的例子，请注意图片的实际尺寸是198x311，但是写完css后尺寸变成了750x1178。 imgur.com/a/YGB5N
apostrophecms.org/docs/tutorials/getting-started/…，在此页面上的一行显示“我们将在稍后的教程中讨论自定义图像尺寸。”你知道我可以找到那个教程的地方/网址吗？

【解决方案2】：

不是最好的解决方案，但问题在于 CSS 样式。我不得不覆盖 img 宽度样式并且更改解决了问题。

.apos-slideshow .apos-slideshow-item img {
    width: auto !important;
}

【讨论】：