imagemagick - 带撇号 CMS 的图像

Question

我正在尝试找出在文章中上传和显示图片的最佳方式。现在我在 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 像素大小)图像显示像素化或放大。

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

Answer 1

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

在您提供的代码中，撇号实际上并没有以任何方式影响您的宽高比或图像大小。您正在将 size 设置为 original 而您还没有设置 minSize 或 aspectRatio，所以 Apostrophe 真的没有意见关于你的形象。

我们实际上强烈反对使用 original，除非您有非常非常好的理由让您的用户特别认真地考虑要上传的图片的正确大小。如果您让您的用户上传他们最好的图片(好吧，大约 2000x2000 左右...)并使用 Apostrophe 的尺寸，例如 one-half、full 和 max，并使用 CSS 进行最终调整，您将获得良好的页面加载速度，而无需网站管理员在 Photoshop 中预先调整所有内容的大小。

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

如果您认为这里有一个错误，即撇号在不应该出现的地方裁剪，请在 github 中准备一个测试项目，并在撇号项目上打开一个 github 问题并提供详细信息。

谢谢!