3

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.

Parik Tiwari
  • 1,525
  • 1
  • 12
  • 19
  • 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 Nov 23 '16 at 19:38
  • @Bonzo the code is calling the inbuilt apostrophecms function to display the images, take a look [here](http://apostrophecms.org/docs/tutorials/getting-started/adding-editable-content-to-pages.html#code-apostrophe-images-code) to see the documentation on the same. – Parik Tiwari Nov 28 '16 at 19:16
  • 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 Dec 13 '17 at 03:17

2 Answers2

2

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!

Tom Boutell
  • 7,281
  • 1
  • 26
  • 23
  • Hello @boutell, first want to make sure that I am not talking about cropping feature. The issue at hand is when the size of the image in an article goes below a certain dimention, apostrophe cms add the css style which makes the image look pixelated. I tried using the apostrophecms demo website to give you an example but it looks like that you have a min width set. Can you please use https://placeholdit.imgix.net/~text?txtsize=33&txt=198%C3%97311&w=198&h=311 this dimension image and try uploading it on your side. – Parik Tiwari Nov 28 '16 at 19:44
  • Steps to follow: 1. Go to any article/blog page 2. Add an image which has a width less than 350px and height more than 500px 3. Save the image and refresh the page. – Parik Tiwari Nov 28 '16 at 19:48
  • here is an example of how a smaller size image looks like, please note that the actual size of the image is 198x311 but after the css is written the size becomes 750x1178. http://imgur.com/a/YGB5N – Parik Tiwari Nov 28 '16 at 19:54
  • 1
    http://apostrophecms.org/docs/tutorials/getting-started/adding-editable-content-to-pages.html#code-apostrophe-images-code, on this page the line says "We'll talk about custom image sizes in a later tutorial." do you know the place/url where I can find that tutorial? – Parik Tiwari Nov 28 '16 at 22:35
0

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;
}
Parik Tiwari
  • 1,525
  • 1
  • 12
  • 19