Malformed sizes attribute on meetup thumbnails; project images lack dimensions

Open Beginner friendly
  • Is something wrong?
#186 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
html, jekyll, yaml
Domain
frontend

Research direction

The malformed sizes value comes from the events preset in _data/picture.yml, so start there and move the fallback width into a size: key. Then check how .meetup-thumbnail renders on desktop to choose the right size. For the project images, find where the img.ogimage markup is generated on the /projects/ page and add width and height attributes. Done when the rendered sizes attribute is valid and all 10 project images have dimensions.

Written by the indexing model from the issue text.

Description

bug

Summary

Two image-markup problems:

  1. Malformed sizes on meetup thumbnails. The events picture preset outputs
    sizes="((max-width: 600px)) 100vw, () 690px".
    () isn't a valid media condition, so browsers throw that entry away and fall back to 100vw. The cause is in _data/picture.yml: the default: size is written under sizes: as if it were a media query named "default". In jekyll_picture_tag the fallback size goes in a separate size: key. There's also only one candidate (690w), so srcset gives the browser nothing to choose between.
  2. Images on the Projects page have no dimensions. The 10 project images (img.ogimage, loaded from each project's own site) have no width or height. aspect-ratio: 1.91/1 in .ogimage stops most of the layout shift, but it's worth confirming with Lighthouse CLS on /projects/.

Evidence (2026-10-14)

Rendered HTML from https://civictech.ca/ and /projects/. Playwright counted noDims=10 on /projects/.

Suggested fix

events:
  formats: [webp]
  widths: [345, 690]
  sizes:
    mobile: 100vw
  size: 345px

Check the size against how wide .meetup-thumbnail actually renders on desktop. For project images, add width="1200" height="628" (the standard OG image ratio).

Related: #156

Generated by Claude Code

Dominant language
HTML
Stars
1
Forks
6
Avg merge
1d 52m
Merged PRs (30d)
7

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CivicTechTO/civictech.ca

All issues in CivicTechTO/civictech.ca

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.