0

What permission am I missing or is this something else ?

We are using S3 for storage and to serve images to a site with moderate traffic. We built out a custom thumbnail slider that links a small thumbnail image to a larger slider image at different resolution.

Before S3 came into play the images would link to each other. Now once the thumbnail is clicked that image is downloaded automatically rather than just linking to the larger image. Any thoughts?

Here is the code, but this is just an S3 question really. Thanks!

<div class="thumbnails" itemscope itemtype="http://schema.org/ImageGallery">
    <ul id="easy-slide">
      <i id="prev" class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>
      {thumbnails}
      <li itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="{thumbnails:large}" itemprop="contentUrl" data-size="500x500">
          <img src="{thumbnails:thumb}" height="100px" width="100px" itemprop="thumbnail" alt="Image description" />
        </a>
      </li>
      {/thumbnails}
     <i id="next" class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
  </ul>
</div>
Payton Burdette
  • 126
  • 1
  • 1
  • 9

2 Answers2

2

Likely a Content-Type problem. The correct MIME type is not being set when you uploaded the images to S3.

Just to confirm, check the MIME type being returned:

curl -I -v http://www.example.com/image.jpg

Then you will need to set the correct content type in the S3 metadata. To update the the metadata on the S3 object, you can copy the object to itself, and specify the content type on the command line.

From StackOverflow: How can I change the content-type of an object using aws cli?:

$ aws s3api copy-object --bucket archive --content-type "image/jpg" \
    --copy-source archive/test/image.jpg--key test/image.jpg \
    --metadata-directive "REPLACE"

To answer your question:

Is there a way to set that for an entire folder or a bucket policy?

S3 does not actually have folder/directories. You need to touch each object via CLI to change its content type. See What is the difference between Buckets and Folders in Amazon S3?. But the command I referenced below will do that operation on an entire bucket.

So you will need to use the S3 CLI to update the content type metadata. Here is another answer showing the a variety of command line methods, that will change all the content type for all files of a given type (E.g. png), recursively:

aws s3 cp \
      --exclude "*" \
      --include "*.png" \
      --content-type="image/png"  \
      --metadata-directive="REPLACE" \
      --recursive \
      --dryrun \
       s3://mybucket/static/ \
       s3://mybucket/static/

See https://serverfault.com/questions/725562/recursively-changing-the-content-type-for-files-of-a-given-extension-on-amazon-s

Rodrigo Murillo
  • 13,080
  • 2
  • 29
  • 50
  • Thanks for the input. But the content type is already set to image/png. Any other ideas ? – Payton Burdette Jul 31 '17 at 17:49
  • Interesting. How are you confirming the Content-Type? Just wondering., Also, can you include a link to an image? – Rodrigo Murillo Jul 31 '17 at 21:58
  • curl -I -v http://s3.amazonaws.com/dpec/assets/images/homepageads/36-6020_5_hero_large.png – Payton Burdette Aug 01 '17 at 15:38
  • Hm that image renders perfectly in the browser. Content-Type: image/png. Does this image have the download problem? – Rodrigo Murillo Aug 01 '17 at 15:46
  • Sorry that one doesn't have the download prob. but this one does http://s3.amazonaws.com/dpec/assets/images/products/tablesaws/36-6020/small/36-6020_vw13_small.png I see the content type is wrong. can I set the content type for a certain folder path. Meaning all images in this folder have this content ? – Payton Burdette Aug 01 '17 at 15:57
  • Cool thanks. Well you have two problems. #1 When uploading the file, the content type is not being set correctly. Fix that asap. #2 Fix objects that have the incorrect content type. I suggested a solution above. I suggest you try it - that is the solution. There is no way to do it at the 'folder' level. Let me know if you have any questions. – Rodrigo Murillo Aug 01 '17 at 17:29
1

When uploading using the API, the default content type is attachment.

Sending a request using the content type parameter solves the problem. Include the "ContentType" parameter in the header request as below:

{
    Bucket: <BUCKET NAME>, 
    Key: "", // pass key
    Body: null, // pass file body,
    ContentType: "image/jpg, image/png, image/jpeg"
}

The URL generated after uploading this way would allow browser access instead of an automatic download.

user3715882
  • 11
  • 2