morecallan / movie-history-api

Zoe is awesome.
0 stars 0 forks source link

Each movie should display a movie poster #7

Open zoeames opened 6 years ago

zoeames commented 6 years ago

Story

As a user, when I look at movie cards, I should see the movie poster.

Acceptance Criteria

When movies are displayed on the page Then the movies show up in cards And the movie poster should show

zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:20 GMT


The /search/movies call returns an array of movies. Each movie has a key/value pair like poster_path:"/weUSwMdQIa3NaXVzwUoIIcAi85d.jpg",. I would like to use the poster_path but need to make an absolute path to that image. The API documents how to do that HERE

The absolute paths need to look like this: https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg

zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:22 GMT


I am going to use w342 as my size - that coes where it says w500.

This means I just need a way to get the url before - https://image.tmdb.org/t/p

To do this I will use /configuration but only save the image part of the result.

zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:26 GMT


Modify javascripts/tmdb.js

Add 2 functions:

  1. tmdbConfiguration - sets up promise for /configuration route
  2. getConfig - executes tmdbConfiguration. On successful result it saves result.images to private variable imgConfig

modify 2 functions:

  1. setKey function to call getConfig() after it sets the key
  2. showResults: pass imgConfig to dom.domString
zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:27 GMT


Modify javascripts/dom.js

In domString function:

  1. add second input - config
  2. find img tag and add source
    src="${config.base_url}/w342/${movieArray[i].poster_path}"