Images with Apostrophe CMS

Question

I am trying to figure out the best way to upload and show images in articles. Right now I have the following code under the apostrophe-blog-pages show.html template

<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>

The issue that I am facing is that I have images with different size and aspect ratio. And apostrophecms or imagemagick automatically decides what the actual aspect ratio of an image should look like and for bigger images it works fine but for smaller image (usually less that 400 px size) images show up pixelated or zoomed in.

Not sure what is the best to show images with their original height and width.

Your code does not help with the question as it is not showing how the images are either being resized or how the image size is set within the webpage. — Bonzo
@Bonzo the code is calling the inbuilt apostrophecms function to display the images, take a look here to see the documentation on the same. — Parik Tiwari
The question is how is ImageMagick being used? What command line did you use to resize them? Please provide further details, since you complain about ImageMagick. — fmw42

Tom Boutell Tom Boutell · Accepted Answer · 2016-11-23T20:30:19

As you know I am the lead developer of Apostrophe at P'unk Avenue.

In the code you gave, Apostrophe is not actually touching your aspect ratio or image sizes in any way. You are setting size to original and you have not set either minSize or aspectRatio, so Apostrophe really has no opinion about your image.

We actually strongly discourage the use of original unless you have a very, very good reason for making your users think extra-hard about the right size of image to upload. If you let your users upload their best image (well, up to about 2000x2000 or so...) and use Apostrophe's sizes like one-half, full and max, and use CSS for the final adjustment, you'll get good page-loading speed without the need for the admin of the site to pre-size everything in Photoshop.

But again... nothing in your code here is cropping the image in any way.

If you think there's a bug here, in that Apostrophe is cropping where it should not be, please prepare a test project in github and open a github issue on the apostrophe project with the details.

Thanks!

Images with Apostrophe CMS

2 Answers