Skip to content

Backoffice: Add Working with Media documentation (17.6 & 18.1) - #8187

Merged
eshanrnh merged 4 commits into
mainfrom
cms/working-with-media-docs
Jul 23, 2026
Merged

Backoffice: Add Working with Media documentation (17.6 & 18.1)#8187
eshanrnh merged 4 commits into
mainfrom
cms/working-with-media-docs

Conversation

@iOvergaard

@iOvergaard iOvergaard commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

AI disclosure: This PR is AI-assisted — the content was generated with Claude Code under my direction. I have verified all code samples, APIs, namespaces, and version references against the Umbraco 17.6 and 18.1 source. Submitted in line with the AI contribution guidelines.

📋 Description

Adds a new Working with Media foundation article for backoffice extension developers, in both the 17/ and 18/ documentation, and extends the Block List custom view tutorial with a section on displaying a block's media.

The article covers:

  • Displaying a media item with umb-media-thumbnail (and umb-media-image for the original)
  • Removing the checkerboard background via --umb-media-thumbnail-background
  • Showing media in a custom block view
  • Fetching media data with UmbMediaItemRepository / UmbMediaDetailRepository
  • Resolving URLs with UmbImagingRepository / UmbMediaUrlRepository
  • A "Choosing the right approach" reference table

The tutorial's render examples are also corrected to use the featureName property alias (previously headline, which did not match the Feature element type), and HMAC is added to the Vale acronym exceptions.

📎 Related Issues (if applicable)

Follows up on umbraco/Umbraco-CMS#23177 (discussion) and umbraco/Umbraco-CMS#23178 (the umb-media-thumbnail rename + configurable checkerboard background, shipping in 17.6 and 18.1). These live in the CMS repo and are not closed by this docs PR.

✅ Contributor Checklist

I've followed the Umbraco Documentation Style Guide and can confirm that:

  • Code blocks are correctly formatted.
  • Sentences are short and clear (preferably under 25 words).
  • Passive voice and first-person language (“we”, “I”) are avoided.
  • Relevant pages are linked.
  • All links work and point to the correct resources.
  • Screenshots or diagrams are included if useful.
  • Any code examples or instructions have been tested.
  • Typos, broken links, and broken images are fixed.

Product & Version (if relevant)

Umbraco CMS — 17.6 and 18.1.

Deadline (if relevant)

Ideally published alongside the 17.6 and 18.1 releases.

📚 Helpful Resources

🤖 Generated with Claude Code

Add a "Working with Media" foundation article covering the umb-media-thumbnail
and umb-media-image components, the imaging/media/url repositories, and showing
media in a custom block view. Extend the Block List custom view tutorial with a
section on displaying the block's media.

Also fix the tutorial's render examples to use the featureName property alias
(was headline, which did not match the Feature element type) and add HMAC to the
Vale acronym exceptions list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 24, 2026 12:18
@github-actions

Copy link
Copy Markdown

Thanks for opening this PR! 🎉

Quick question: Does this PR include any AI-generated content?

AI tools are absolutely welcome here! We only ask that you follow our AI contribution guidelines to help keep the documentation consistent and trustworthy.

Drop a quick comment to let us know!

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds new “Working with Media” foundation documentation for backoffice extension developers (for both v17 and v18 docs), and extends the Block List custom view tutorial to include rendering media via umb-media-thumbnail. It also updates the tutorial examples to use the correct featureName alias and adds HMAC to Vale acronym exceptions.

Changes:

  • Add “Working with Media” foundation article to both 17/ and 18/, and link it from the docs navigation.
  • Extend the Block List custom view tutorial with a section showing how to display a block’s Media Picker value using umb-media-thumbnail.
  • Update tutorial render examples to use featureName and add HMAC to Vale acronym exceptions.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
18/umbraco-cms/SUMMARY.md Adds the new media foundation page to the v18 navigation.
18/umbraco-cms/extend-your-project/tutorials/creating-custom-views-for-blocklist.md Updates alias usage and adds media rendering guidance/snippet.
18/umbraco-cms/extend-your-project/backoffice-extensions/foundation/working-with-media.md New v18 media guidance page covering components + repositories.
17/umbraco-cms/SUMMARY.md Adds the new media foundation page to the v17 navigation.
17/umbraco-cms/extend-your-project/tutorials/creating-custom-views-for-blocklist.md Updates alias usage and adds media rendering guidance/snippet (+17.6 alias note).
17/umbraco-cms/extend-your-project/backoffice-extensions/foundation/working-with-media.md New v17 media guidance page (includes 17.6 availability notes).
.github/styles/UmbracoDocs/Acronyms.yml Adds HMAC to Vale acronym exceptions.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Clarify the tutorial's import snippet so it reads as updating the existing Lit
import with `nothing` rather than replacing it (keeping UmbElementMixin and the
other imports). Use optional chaining when reading the first resized URL result,
consistent with the other examples on the page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@iOvergaard iOvergaard added the ai-generated This PR was written by or with the assistance of AI. label Jun 24, 2026
@iOvergaard

Copy link
Copy Markdown
Contributor Author

Yes — this is AI-assisted. The content was generated with Claude Code under my direction, and I've verified the code samples, APIs, namespaces, and version references against the 17.6 and 18.1 source. Following the AI contribution guidelines and have added the ai-generated label. 🙂

@eshanrnh eshanrnh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 🙌

@eshanrnh
eshanrnh merged commit 553514e into main Jul 23, 2026
57 of 61 checks passed
@eshanrnh
eshanrnh deleted the cms/working-with-media-docs branch July 23, 2026 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ai-generated This PR was written by or with the assistance of AI. category/pending-release category/umbraco-cms

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants