NY Times BTS Part 6

Identify correct image size and display in HTML

Your listing should now only show the image subtype. Use an if statement to check for superJumbo

Print out the url for the superJumbo image.

The answer is below the next graphic.

function getImage(doc) {
  let images = doc.multimedia;
  images.forEach((imageObject) => {
    if (imageObject.subtype === 'superJumbo') {
      console.log(imageObject.url);
    }
  });
}

After verifying that you’re getting all the image urls, return to the URL back to your main getData function.

create a variable imageUrl assign it to the url and return it from the function.

function getImage(doc) {
  let images = doc.multimedia;
  let imageUrl;
  images.forEach((imageObject) => {
    if (imageObject.subtype === 'superJumbo') {
      imageUrl =  imageObject.url;
    }
  });
  return imageUrl;
}

function getData()

In function getData(), assign a variable image to the url

docs.forEach(doc => {
      let headline = getHeadline(doc);
      let image = getImage(doc);

Insert the URL into the HTML.

Check for undefined image

1. Delete current <img src… element in HTML
2. Insert a new javascript variable that hold the entire HTML element for the img. Call the new variable imageElement.
3. check if image is undefined
4. If image URL exists, create the HTML <img ...element

if (image == undefined) {
        console.log('no image');
      } else {
        imageElement = `<img src="https://www.nytimes.com/${image}">`;
      }

Make Image Responsive

Adjust size of image automatically by setting width to 100%.

imageElement = `<img src="https://www.nytimes.com/${image}" width="100%">`;

Next Lesson

Show article in separate Electron window