Изображения с Apostrophe CMS

Я пытаюсь придумать, как лучше всего загружать и показывать изображения в статьях. Прямо сейчас у меня есть следующий код в шаблоне 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 пикселей) изображения отображаются в пиксельном или увеличенном виде.

Не уверен, что лучше всего показывать изображения с их исходной высотой и шириной.


imagemagick aspect-ratio apostrophe-cms
person Parik Tiwari    schedule 23.11.2016    source источник
comment
Ваш код не помогает с вопросом, поскольку он не показывает, как изменяются размеры изображений или как размер изображения устанавливается на веб-странице.   -  person Bonzo    schedule 23.11.2016
comment
@Bonzo код вызывает встроенную функцию apostrophecms для отображения изображений, посмотрите здесь, чтобы ознакомиться с соответствующей документацией.   -  person Parik Tiwari    schedule 28.11.2016
comment
Вопрос в том, как используется ImageMagick? Какую командную строку вы использовали для изменения их размера? Пожалуйста, предоставьте дополнительную информацию, поскольку вы жалуетесь на ImageMagick.   -  person fmw42    schedule 13.12.2017

Ответы (2)


arrow_upward
2
arrow_downward

Как вы знаете, я ведущий разработчик Apostrophe на P'unk Avenue.

В коде, который вы указали, Apostrophe на самом деле никоим образом не затрагивает ваше соотношение сторон или размеры изображения. Вы устанавливаете size на original и не устанавливаете ни minSize, ни aspectRatio, поэтому Apostrophe действительно не имеет никакого мнения о вашем изображении.

На самом деле мы настоятельно не рекомендуем использовать original, если у вас нет очень и очень веской причины заставить ваших пользователей сильно задумываться о правильном размере изображения для загрузки. Если вы позволите своим пользователям загружать свои лучшие изображения (ну, примерно до 2000x2000 или около того ...) и использовать размеры Apostrophe, такие как one-half, full и max, и использовать CSS для окончательной настройки, вы получите хорошую скорость загрузки страницы. без необходимости для администратора сайта предварительно настраивать все в Photoshop.

Но опять же ... ничто в вашем коде здесь никоим образом не обрезает изображение.

Если вы считаете, что здесь есть ошибка, поскольку апостроф обрезается там, где его не должно быть, подготовьте тестовый проект в github и откройте проблему github в проекте апострофа с подробностями.

Спасибо!

person Tom Boutell    schedule 23.11.2016
comment
Привет, @boutell, сначала хочу убедиться, что я не говорю о функции обрезки. Проблема заключается в том, что когда размер изображения в статье становится меньше определенного размера, апостроф cms добавляет стиль css, который делает изображение пиксельным. Я попытался использовать демонстрационный веб-сайт apostrophecms, чтобы дать вам пример, но похоже, что у вас установлена ​​минимальная ширина. Не могли бы вы использовать placeholdit.imgix.net/ это размерное изображение и попробуйте загрузить его на своей стороне. - person Parik Tiwari; 28.11.2016
comment
Действия, которые необходимо выполнить: 1. Перейдите на любую страницу статьи / блога. 2. Добавьте изображение с шириной менее 350 пикселей и высотой более 500 пикселей. 3. Сохраните изображение и обновите страницу. - person Parik Tiwari; 28.11.2016
comment
вот пример того, как выглядит изображение меньшего размера, обратите внимание, что фактический размер изображения составляет 198x311, но после записи css размер становится 750x1178. imgur.com/a/YGB5N - person Parik Tiwari; 28.11.2016
comment
apostrophecms. org / docs / tutorials / Getting-started /, на этой странице написано, что мы поговорим о нестандартных размерах изображений в следующем руководстве. вы знаете место / адрес, где я могу найти этот учебник? - person Parik Tiwari; 29.11.2016

arrow_upward
0
arrow_downward

Не лучшее решение, но проблема была в стиле CSS. Мне пришлось перезаписать стиль ширины img, и это изменение устранило проблему.

.apos-slideshow .apos-slideshow-item img {
    width: auto !important;
}
person Parik Tiwari    schedule 01.12.2016