Displaying images of various unknown dimensions consitently

Question

I am building a small web app that queries top tracks and artists via the Spotify API to return and display these to the user.

I am displaying each track or artist with Bootstrap panel, the name of the track or artist in the heading and the associated image in the body.

For tracks this works great, as the images returned in the API response seem to be all of the same dimensions.

For artists, though, it appears the images returned all vary in their possible dimensions which differs from tracks.

I tried to get around this by just using one of the images returned in the image array and setting the height and width of the image to 100% - however this doesn't work for all images if they aren't a square or the image has a low resolution and is being blown up by the styling.

This is the code I have for the panels:

<div class="col-md-4" v-if="type == 'artists'" v-for="track in tracks">
    <div class="panel panel-default">
      <div class="panel-heading">@{{ track.name }}</div>
      <div class="panel-body"><img :src="track.images[0].url" :alt="track.name" class="img-responsive center-block" style="height: 100%; width: 100%"/></div>
    </div>
</div>

And below are some examples of what can be returned inside the image array:

"images":[  
   {  
      "height":640,
      "url":"https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964",
      "width":640
   },
   {  
      "height":320,
      "url":"https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198",
      "width":320
   },
   {  
      "height":160,
      "url":"https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7",
      "width":160
   }
]

"images":[  
   {  
      "height":640,
      "url":"https://i.scdn.co/image/6a299fe9d66f3036bb0b22a458d38f662655b559",
      "width":640
   },
   {  
      "height":300,
      "url":"https://i.scdn.co/image/c9b1fe49b9139cc42090a8b045678ae9a323c400",
      "width":300
   },
   {  
      "height":64,
      "url":"https://i.scdn.co/image/476d0a6971a8e46a411dc2a5382b20176e0c1a23",
      "width":64
   }
]

"images":[  
   {  
      "height":666,
      "url":"https://i.scdn.co/image/dd1ea0b4e68b25e2a82de61b03ee3933be266475",
      "width":1000
   },
   {  
      "height":426,
      "url":"https://i.scdn.co/image/b013b96bbe25ba13619f3d18f29f8dc999cdea7f",
      "width":640
   },
   {  
      "height":133,
      "url":"https://i.scdn.co/image/67636ab4283dc8783b60dd0ada9ade16300e3417",
      "width":200
   },
   {  
      "height":43,
      "url":"https://i.scdn.co/image/971cc938303fbebd8908ebfc30a9f759679efb14",
      "width":64
   }
]

I'm using Vue.js in my application to query the API.

How would I go about rendering the images appropriately and consistently when I don't know the resolutions that will be returned? Is there some CSS magic or JavaScript that could help do this?

Answer 1

I'd use a combination of Vue and CSS. The CSS will apply the image as a background with background-size: cover the vue will dynamically set the background-image within your template, i.e.

new Vue({
    el: '#app',
    data: {
        "images": [{
        	"name": 'foo',
            "height": 640,
            "url": "https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964",
            "width": 640
        }, {
        	"name": 'bar',
            "height": 320,
            "url": "https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198",
            "width": 320
        }, {
        	"name": 'baz',
            "height": 160,
            "url": "https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7",
            "width": 160
        }]
    },
})

.bg-image {
    background-size: cover;
    display: block;
    width: 100%;
    height: 200px;
    background-position: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div class="container">
        <div :class="{
                'col-xs-4': image.width <= 200,
                'col-xs-6': image.width > 200 && image.width <= 400,
                'col-xs-12': image.width > 400,
            }" v-for="image in images">
            <div class="panel panel-default">
                <div class="panel-heading">{{ image.name }}</div>
                <div class="panel-body">
                   <i :style="{ 'background-image': `url(${image.url})` }" class="bg-image"></i>
                </div>
            </div>
        </div>
    </div>
</div>

you can then change the classes that are applied dynamically based on the width or height returned by the API. I've shown how this would work with Bootstrap's grid, sure you can do something more elegant within your app.

Answer 2

By default have an image on your server, maybe a transparent git (of png), or some image with content like "Loading..." (or even animated gif of loading). As for the dynamic images, when you get them from your ajax call do 2 things:

1. change the static image opacity to zero

2. Use the dynamic image url (lets call it "-image-src-") in css using something like this:

   .panel-body{ background-image:url(-image-src-); background-size:cover; }

Answer 3

If you need to maintain consistency on image size for each card/panel view without knowing dimensions,

the problem is, If you set hard coded height or width that will mess the image by stretching.

One option to solve this is keep a tag for image with your preferred height and width EX: 300 * 250

    .thumbnail{
          width : 300px;
          height: 250px;
          background-image : url('path/image.jpg');
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
     }

Then add class like