Fix image sizing and accessibility in Python Pixels workshop#624
Merged
ozhang22 merged 4 commits intoApr 29, 2026
Merged
Conversation
3 tasks
Member
|
@copilot resolve the merge conflicts in this pull request |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Python Pixels workshop content to improve readability and accessibility by constraining oversized images and adding descriptive alt text across both English and Brazilian Portuguese versions.
Changes:
- Convert Markdown image syntax to HTML
<img>tags with explicit width constraints. - Add/standardize
alttext for images and quotewidthattributes. - Reduce overly wide screenshot table containers (e.g.,
width:100%→width:70%).
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| content/english/python-pixel/colors_and_pixels/pixel-on-image.md | Adds alt text + constrains pixel example images. |
| content/english/python-pixel/colors_and_pixels/open-image.md | Constrains upload/cat images; updates front matter date. |
| content/english/python-pixel/colors_and_pixels/load_image_module.md | Constrains module install screenshot; updates front matter date. |
| content/english/python-pixel/colors_and_pixels/basic-of-colors.md | Constrains color theory + sample/output images; replaces invalid Markdown image syntax. |
| content/english/python-pixel/Activities/activity-9.md | Adds alt text + constrains rotation activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-8.md | Adds alt text + constrains flip activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-7.md | Adds alt text + constrains background-change activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-6.md | Adds alt text + constrains cropping activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-5.md | Adds alt text + constrains advanced filter activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-4.md | Adds alt text + constrains basic filter activity images; updates front matter date. |
| content/english/python-pixel/Activities/activity-3.md | Constrains activity output screenshot and adds descriptive alt text; updates front matter date. |
| content/english/python-pixel/Activities/activity-10.md | Quotes width attribute and keeps descriptive meme alt text; updates front matter date. |
| content/english/python-pixel/Activities/Activity-2.md | Constrains before/after loop screenshots and adds descriptive alt text; updates front matter date. |
| content/english/python-pixel/Activities/Activity-1.md | Constrains images and reduces screenshot table container width; updates front matter date. |
| content/brazilian-portuguese/python-pixel/colors_and_pixels/pixel-on-image.md | Adds Portuguese alt text + constrains pixel example images. |
| content/brazilian-portuguese/python-pixel/colors_and_pixels/open-image.md | Constrains upload/cat images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/colors_and_pixels/load_image_module.md | Constrains module install screenshot; updates front matter date. |
| content/brazilian-portuguese/python-pixel/colors_and_pixels/basic-of-colors.md | Constrains color theory + sample/output images with Portuguese alt text. |
| content/brazilian-portuguese/python-pixel/Activities/activity-9.md | Adds Portuguese alt text + constrains rotation activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-8.md | Adds Portuguese alt text + constrains flip activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-7.md | Adds Portuguese alt text + constrains background-change activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-6.md | Adds Portuguese alt text + constrains cropping activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-5.md | Adds Portuguese alt text + constrains advanced filter activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-4.md | Adds Portuguese alt text + constrains basic filter activity images; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-3.md | Constrains activity output screenshot and adds Portuguese alt text; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/activity-10.md | Quotes width attribute and keeps descriptive meme alt text; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/Activity-2.md | Constrains before/after loop screenshots and adds Portuguese alt text; updates front matter date. |
| content/brazilian-portuguese/python-pixel/Activities/Activity-1.md | Constrains images and reduces screenshot table container width; updates front matter date. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
1
to
4
| --- | ||
| title: "Open an image" | ||
| date: 2020-02-10T13:24:17-07:00 | ||
| date: 2026-04-25T00:00:00-07:00 | ||
| draft: false |
There was a problem hiding this comment.
The front matter date was changed from the original 2020 timestamp to 2026-04-25T00:00:00-07:00, but the PR description only discusses image sizing/accessibility. This also makes the Python Pixels section inconsistent with pages that still use the original 2020-...Z dates (e.g., content/english/python-pixel/Activities/activity-11.md) and may affect Hugo ordering/“recently updated” lists. Consider reverting these date changes (or, if you intended to track edits, introduce/use a lastmod field instead while keeping the original date).
Images were rendering too large, making the workshop hard to read on screen. Many markdown images had no width constraints and rendered at full original size. Some HTML img tags used width=100% in full-width containers, making screenshots unnecessarily huge. Changes (English + Brazilian Portuguese, 28 files): Concept pages (colors_and_pixels/): - basic-of-colors: Convert 5 oversized markdown images to img tags with proper widths (50% for color diagram, 40% for samples) - pixel-on-image: Convert 3 unsized markdown images (40%) - open-image: Convert upload screenshot to img with 60% width - load_image_module: Convert module screenshot to img with 60% width Activity pages: - Activity-1: Constrain Replit screenshot table from 100% to 70% width, convert code output image to 60% - Activity-2: Convert 4 code output images to img tags with 60% width - Activity-3: Convert example output to img with 60% width - Activities 4-10: Quote all unquoted width attributes for valid HTML All changes: - Convert unsized markdown images to HTML img tags with width constraints - Add descriptive alt text (English and Portuguese) for accessibility - Quote all width attributes for valid HTML - Constrain full-width screenshot containers to 70% Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
QA review caught that Activities 4-9 had img tags with no alt text after the width-quoting pass. Also fixed EN/PT-BR parity gap on nuvi images in pixel-on-image.md and Activity-1.md. All img tags in both languages now have descriptive alt text in the correct language for screen reader accessibility. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
beagandica
force-pushed
the
fix/python-pixel-image-sizing
branch
from
e731f88 to
ea63fc2
Compare
beagandica
pushed a commit
to beagandica/workshops
that referenced
this pull request
Apr 29, 2026
Tier 1 quality guardrails for NuevoFoundation workshops: - PR template: checklist for Hugo build, images, alt text, YAML, translations - Content quality CI: checks for uppercase extensions, unquoted HTML attrs, duplicate YAML keys, missing alt text on all content PRs - Translation parity CI: flags when English changes have untouched translations - CONTRIBUTING.md: complete contributor guide covering folder structure, frontmatter templates, image guidelines, translation rules, testing steps - .editorconfig: standardize UTF-8, LF endings, final newline, 2-space indent Prevents recurrence of issues fixed in PRs NuevoFoundation#609, NuevoFoundation#622, NuevoFoundation#623, NuevoFoundation#624, NuevoFoundation#625. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
ozhang22
approved these changes
Apr 29, 2026
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes oversized images throughout the Python Pixels workshop that made content hard to read on screen. Applies to both English and Brazilian Portuguese.
Problem
) rendered at full original size with no width constraints — color theory diagrams and code output screenshots filled the entire content area<img>tags usedwidth=100%in full-width containers, making Replit screenshots unnecessarily hugewidth=50%instead ofwidth="50%") — invalid HTMLChanges (28 files across 2 languages)
Image sizing
Standards applied
<img>tags with explicit widthLanguages affected
Testing