3

記事に画像をアップロードして表示する最良の方法を見つけようとしています。現在、 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>

私が直面している問題は、サイズとアスペクト比が異なる画像があることです。また、apostrophecms または imagemagick は、画像の実際の縦横比がどのように見えるかを自動的に決定し、大きな画像の場合は正常に機能しますが、小さな画像 (通常は 400 px サイズ未満) の場合、画像はピクセル化またはズームインされて表示されます。

元の高さと幅で画像を表示するのに最適なものがわからない.

4

2 に答える 2

2

ご存じのように、私は P'unk Avenue で Apostrophe の主任開発者を務めています。

あなたが与えたコードでは、アポストロフィは実際にはアスペクト比や画像サイズにまったく触れていません。あなたは に設定sizeしていて、またはも設定しoriginalていないので、アポストロフィはあなたのイメージについて何の意見も持っていません。minSizeaspectRatio

originalアップロードする画像の適切なサイズについてユーザーに非常に真剣に考えさせる非常に正当な理由がない限り、実際には の使用を強くお勧めしません。ユーザーに最高の画像 (2000x2000 程度まで) をアップロードしてもらい、one-half、 、 などのアポストロフィのサイズを使用し、最終的な調整に CSS を使用するfullとmax、必要なくページの読み込み速度が向上します。サイトの管理者が Photoshop ですべてのサイズを事前に調整できるようにします。

しかし、繰り返しになりますが、ここのコードには、画像をトリミングするものは何もありません。

ここにバグがあると思われる場合は、アポストロフィが本来あるべき場所でトリミングされていないため、github でテスト プロジェクトを準備し、アポストロフィ プロジェクトで github issue を開いて詳細を記載してください。

ありがとう！

于 2016-11-23T20:30:19.263 に答える
0

最善の解決策ではありませんが、問題は CSS スタイルにあったためです。img width スタイルを上書きする必要があり、変更により問題が修正されました。

.apos-slideshow .apos-slideshow-item img {
    width: auto !important;
}
于 2016-12-01T18:30:35.757 に答える