CityOfBoston/onebostonday

Billboard: Messages with photos aren't fitting within bounds

chrsmrtn0 opened this issue · 7 comments

After viewing the billboard link under 768x480 for a while, a few posts appeared that had images associated with them. In just about every case where an image was present, either the image or the copy was overlapping the base of the site and running past the bottom bounds of the display. We need to ensure that everything stays within that white space and appears completely on screen.

Also in at least one occasion, a post with no image was long enough that it ran to 4 lines, which also ran past the base of the white background.

Since we want everything to be legible from a good distance, I suggest that we decrease the header space and give the posts a little more room.

Should be good to go

When viewed at 768x480 the images and copy no longer bleed over the edge of the display field.

However, when viewed at full desktop resolution, images will still bleed over.
Given that we aren't developing to support this on other platforms I suggest we consider this closed.

@jkvill1 & @RobErskine what do you think?

The correct resolution is 1920 x 1080. The requirements we got from before were incorrect.

Reviewed at 1920 x 1080 and noticed that some images are bumping up against the border of the display field. Here's an example of one of those images.

If a list of all images is needed please let me know, but given the timeline the hope is that we can resolve this issue using the information provided below and apply it globally across all potential instances.

capture

    "contentid": "182eb7af21f5f3d7daa343bae13885d4",
      "sourceid": "77764733",
      "title": "Stop by the #OneBostonDay Blood Drive today at City Hall Plaza from 10:00 a.m. - 4:00 p.m. to donate blood to those in need!",
      "sourcename": "Mayor Marty Walsh",
      "sourceprofile": "marty_walsh",
      "locale": "en",
      "publishdate": "2018-04-13T13:49:58Z",
      "createdate": "2018-04-13T13:01:39Z",
      "lastupdatedate": "2018-04-13T13:49:58Z",
      "content": "Stop by the #OneBostonDay Blood Drive today at City Hall Plaza from 10:00 a.m. - 4:00 p.m. to donate blood to those in need!",
      "whitelist": false,
      "blacklist": false,
      "headline": null,
      "byline": null,
      "caption": null,
      "mainasset": "twitter:image:1200x670:https://pbs.twimg.com/media/Daqi9O1XkAAMyxC.jpg:large",
      "thumbnailasset": "twitter:image:150x150:https://pbs.twimg.com/media/Daqi9O1XkAAMyxC.jpg:thumb",
      "externalservice": {
        "id": "external.service.twitter",
        "label": "Twitter"

It's intended for the image to go edge to edge, either vertically or horizontally, with the blue border.

Closing based on developer comments.