[go: up one dir, main page]

Featured image integration

More notes in #7 (closed)

changes the layout of the Libcal block by introducing an image; using a media object layout (https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects)

Note: the image is only being introduced at larger viewpoints; the event text/layout is extremely similar to what we had before for the libcal-block.

Once merged, we can fulfill ernesto#24 (closed) ; removing code related to libcal that's now only used for music at main.

We are making the supposition that on small very containers (a column in a columns block) the images will be squished, eg. https://cplorg.bigscoots-staging.com/research-learning/genealogy/

TODO:

  • document each of the glyphs/icons from nounproject and add attribution to readme (once their selection has been finalized) done in !1 (12caea35)

We have been using the media/text block for this (a media object layout) in other places on the website

Earlier in the design process, I should have taken a clearer look about adopting the media-text block for this although do I recall some issues with that block

  • Thinking about this more, we may want to abstract this pattern and may want to use it site wide.

Caveats/tradeoffs:

  • no alt-text for libcal's featured_image is available.
  • libcal api only returns one image size (whatever was uploaded) so we have to ensure that OPS (who uploads the image into Libcal) uploads images that are 1:1 ratio (there may be some css image properties that we can use to adopt this for images that aren't 1:1) and are well compressed.

Note: per @MYoungCPL ; all fallbacks are now the CPL logo, left in the conditional code

Edited by Will Skora

Merge request reports

Loading