CODEWITHSUNDEEP
imagemagickaspect-ratioapostrophe-cms
Parik Tiwari
Parik Tiwari

Reputation: 1525

Images with Apostrophe CMS

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.

Upvotes: 3

Views: 1384

Answers (2)

Parik Tiwari
Parik Tiwari

Reputation: 1525

Not the best solution but since the issue was with the CSS style. I had to overwrite the img width style and the change fixed the issue.

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

Upvotes: 0

Tom Boutell
Tom Boutell

Reputation: 7572

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!

Upvotes: 2

Related Questions