image responses

by Austin Anderson

HTML

<div class="content1">
  <h2>
    Requesting No Width
  </h2>
  <div id="content1"></div>
</div>

<div class="content2">
  <h2>
    Requesting Width of 500 pixels
  </h2>
  <div id="content2"></div>
</div>

<div class="content3">
  <h2>
    Requesting Width of 1000 pixels (ideal)
  </h2>
  <div id="content3"></div>
</div>

<div class="content4">
  <h2>
    Requesting Width of 1440 pixels (max resolution)
  </h2>
  <div id="content4"></div>
</div>

CSS

.content1 {
  border: solid 3px orange;
  background: #ff6c00;
  margin-bottom: 35px;
  color: white;
}

.content2 {
  border: solid 3px yellow;
  background: #fed672;
  margin-bottom: 35px;
  color: white;
}

.content3 {
  border: solid 3px purple;
  background: #fea5f0;
  padding-bottom: 15px;
  color: white;
}

.content4 {
  border: solid 3px blue;
  background: #7da5f0;
  padding-bottom: 15px;
  color: white;
}

h2 {
  color: black;
  font-family: sans-serif;
}

#content1,
#content2,
#content3,
#content4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.image {
  width: 100px;
  margin: 5px;
  background: black;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.code {
  position: absolute;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sans-serif;
  background: limegreen;
  padding: 5px;
  font-size: 12px;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

JavaScript

var ids = ['HO00007620', 'HO00007624', 'HO00007799', 'HO00007800', 'HO00007801', 'HO00007802', 'HO00007941', 'HO00008004', 'HO00008087', 'HO00008115', 'HO00008116', 'HO00008132', 'HO00008133', 'HO00008146', 'HO00008147', 'HO00008151', 'HO00008155', 'HO00008158', 'HO00008165', 'HO00008171', 'HO00008180', 'HO00008181', 'HO00008189', 'HO00008190', 'HO00008195', 'HO00008196', 'HO00008197', 'HO00008198', 'HO00008199', 'HO00008211', 'HO00008212', 'HO00008213', 'HO00008215', 'HO00008216', 'HO00008218', 'HO00008220', 'HO00008224', 'HO00008225', 'HO00008228', 'HO00008229', 'HO00008250', 'HO00008251', 'HO00008254', 'HO00008255', 'HO00008258', 'HO00008260', 'HO00008261', 'HO00008262', 'HO00008263', 'HO00008264', 'HO00008265', 'HO00008266', 'HO00008267', 'HO00008268', 'HO00008269', 'HO00008271', 'HO00008276', 'HO00008277', 'HO00008280', 'HO00008282', 'HO00008283', 'HO00008284', 'HO00008286', 'HO00008287', 'HO00008292', 'HO00008293'];

$(document).ready(function() {
  for (var i = 0; i < ids.length; i++) {
    var url = "https://api.celebrationcinema.com/CDN/media/entity/get/FilmPosterGraphic/" + ids[i] + "";

    var div = document.createElement('div');
    div.className = 'image';
    div.innerHTML = "<img src='" + url + "'/><span class='code'>" + ids[i] + "</span>";

    document.getElementById('content1').appendChild(div);
  }

  for (var i = 0; i < ids.length; i++) {
    var url = "https://api.celebrationcinema.com/CDN/media/entity/get/FilmPosterGraphic/" + ids[i] + "?&width=500";

    var div = document.createElement('div');
    div.className = 'image';
    div.innerHTML = "<img src='" + url + "'/><span class='code'>" + ids[i] + "</span>";

    document.getElementById('content2').appendChild(div);
  }

  for (var i = 0; i < ids.length; i++) {
    var url = "https://api.celebrationcinema.com/CDN/media/entity/get/FilmPosterGraphic/" + ids[i] + "?&width=1000";

    var div = document.createElement('div');
    div.className = 'image';
    div.innerHTML = "<img src='" + url...