使用Apostrophe CMS的图像

Question

我正在尝试找出在文章中上传和显示图片的最好方法。现在，我在撇号-博客-页面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自动决定图像的实际纵横比应该是什么样子，对于较大的图像，它可以很好地工作，但对于较小的图像(通常小于400px大小)，图像会显示像素化或放大。

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

Answer 1

如你所知，我是P‘’unk大道的Apostrophe的首席开发人员。

在你给出的代码中，Apostrophe实际上没有以任何方式接触到你的纵横比或图像大小。您正在将size设置为original，而您既没有设置minSize，也没有设置aspectRatio，因此Apostrophe对您的图像没有任何意见。

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

但又一次..。这里的代码中没有以任何方式裁剪图像。

如果你认为这里有一个bug，因为Apostrophe正在裁剪它不应该在的地方，请在github中准备一个测试项目，并在撇号项目上打开一个github问题的细节。

谢谢!

Answer 2

这不是最好的解决方案，但因为问题出在CSS样式上。我必须覆盖img宽度样式，更改解决了这个问题。

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