Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions Upendo-Video-Resource-List/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Upendo Video Resource List

Independent DNN/OpenContent template for a video resources page. It renders a simple responsive video resources section using privacy-friendly YouTube embeds when a valid YouTube ID can be parsed.

## Quick Path

1. Add an OpenContent module to `/resources/videos`.
2. Select `Upendo-Video-Resource-List` and load the default data if needed.
3. Replace the draft sample videos with approved titles, descriptions, YouTube URLs, thumbnails, categories, and tags.

## Layout Settings

- `BackgroundColorClass`: controls the outer section background. Includes theme-friendly labels such as `Soft Gray` for `bg-soft-gray`.
- `ContainerClass`: controls the inner content width. Default is `container-xxl`; runtime accepts `container`, `container-sm`, `container-md`, `container-lg`, `container-xl`, `container-xxl`, and `container-fluid`.
- `DisplayMode`: `grouped` keeps category sections and anchor navigation; `grid` renders all videos in one unified card grid.
- `CardsPerRow`: choose `2` or `3` desktop columns. Mobile always renders one column.
- `CompactSpacing`: reduces intro, category, and card gaps for denser pages.
- `ShowBackToTop`: controls the small category heading link in grouped mode.

## Card Layout Behavior

- Cards in the same desktop row are designed to keep their internal content visually aligned.
- Category and title areas reserve consistent vertical space on desktop so descriptions start at a predictable rhythm.
- Tags are anchored near the lower action area, directly above the CTA button.
- CTA buttons stay at the bottom of each card when cards have different title or description lengths.
- Mobile cards relax the desktop alignment rules to avoid unnecessary empty space on narrow screens.

## Content Editing Notes

- `ModuleAnchor` accepts letters, numbers, and hyphens only.
- `YouTubeUrl` supports common watch, `youtu.be`, `/embed/`, and `/shorts/` URL formats.
- Valid YouTube URLs render through `https://www.youtube-nocookie.com/embed/{id}`.
- `ThumbnailImage` is a fallback for missing or unparseable YouTube URLs.
- `Tags` is a comma-separated text field, intentionally not a lookup, so the template remains independent.
- `_blank` CTA links automatically render with `rel="noopener noreferrer"`.
- Add multiple videos with the same `Category` to render multiple cards inside one grouped section.

## Accessibility

- The section renders a visible heading when `SectionHeading` is configured.
- If no visible heading exists, a visually hidden heading falls back to `ModuleTitle`.
- Every YouTube iframe receives a title based on the video title.
- Video embeds use a responsive aspect-ratio wrapper.
- Fallback thumbnail links receive accessible labels.

## Out Of Scope

- No custom DNN module.
- No dynamic routing.
- No heavy JavaScript filtering.
- No shared lookup data dependencies.
57 changes: 57 additions & 0 deletions Upendo-Video-Resource-List/data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{
"ModuleTitle": "Upendo-Video-Resource-List",
"ModuleAnchor": "resources-videos",
"Eyebrow": "Video Resources",
"SectionHeading": "Upendo Ventures Video Library",
"SectionDescription": "<p>At Upendo Ventures, we help business owners like you turn frustrating, outdated websites into powerful business tools. Whether you're migrating from Wix, Squarespace, or WordPress—or just tired of your site not doing its job—we’re here to help you fix it, modernize it, and grow with it.</p>",
"Videos": [
{
"Title": "Quick Technical Wins for ANY Small Business",
"Description": "<p>Is your small business making the impact it should be online? In this short and practical video, Upendo Ventures shares five simple but powerful tips that any business owner can start using today to look more professional, boost online visibility, and build customer trust.</p>",
"YouTubeUrl": "https://www.youtube.com/watch?v=UiuAZU8YG8U",
"ThumbnailImage": "https://img.youtube.com/vi/UiuAZU8YG8U/maxresdefault.jpg",
"ThumbnailAlt": "Quick Technical Wins for ANY Small Business video thumbnail",
"Category": "Upendo Ventures",
"Tags": "Small Business Tips, Digital Marketing, Upendo Ventures, Entrepreneur Tips, Business Growth, Online Branding, Password Manager, Marketing Simplified",
"CtaText": "Watch on YouTube",
"CtaUrl": "https://www.youtube.com/watch?v=UiuAZU8YG8U",
"CtaTarget": "_blank"
},
{
"Title": "Modern Website Migrations for Small Businesses",
"Description": "<p>Tired of your outdated website? We make it easy to migrate from Wix, Squarespace, WordPress, and more—without the stress. Let’s build something better together.</p>",
"YouTubeUrl": "https://www.youtube.com/watch?v=UDhDlJ2AEgY",
"ThumbnailImage": "https://img.youtube.com/vi/UDhDlJ2AEgY/maxresdefault.jpg",
"ThumbnailAlt": "Modern Website Migrations for Small Businesses video thumbnail",
"Category": "Upendo Ventures",
"Tags": "Small Business, Website Migration, Digital Transformation, Upendo Ventures",
"CtaText": "Watch on YouTube",
"CtaUrl": "https://www.youtube.com/watch?v=UDhDlJ2AEgY",
"CtaTarget": "_blank"
},
{
"Title": "How to Edit Page Meta Data in DNN CMS",
"Description": "<p>Learn how to easily edit and manage page-level SEO meta data in DNN CMS using a custom OpenContent template combined with the OpenContentHelper theme object. We’ll walk through how to update your page titles, descriptions, canonical URLs, Open Graph tags, and Twitter Cards — all without writing custom code. Perfect for developers, site owners, and marketers who want more control and better SEO performance from their DNN site.</p>",
"YouTubeUrl": "https://www.youtube.com/watch?v=8JtyEsgXiGo",
"ThumbnailImage": "https://img.youtube.com/vi/8JtyEsgXiGo/maxresdefault.jpg",
"ThumbnailAlt": "How to Edit Page Meta Data in DNN CMS video thumbnail",
"Category": "Technical Briefings",
"Tags": "DNN, SEO, OpenContent, Resources",
"CtaText": "Watch on YouTube",
"CtaUrl": "https://www.youtube.com/watch?v=8JtyEsgXiGo",
"CtaTarget": "_blank"
},
{
"Title": "How to Upgrade DNN",
"Description": "<p>Upgrading DNN is far more simple than some people make it out to be. As long as you only install trusted extensions and only ones that you need, upgrades can literally be as easy as you see in this video.</p>",
"YouTubeUrl": "https://www.youtube.com/watch?v=bSgJ07AAT4s&t=48s",
"ThumbnailImage": "https://img.youtube.com/vi/bSgJ07AAT4s/maxresdefault.jpg",
"ThumbnailAlt": "How to Upgrade DNN video thumbnail",
"Category": "Technical Briefings",
"Tags": "DNN, Upgrades, Technical Briefing, Decision Support",
"CtaText": "Watch on YouTube",
"CtaUrl": "https://www.youtube.com/watch?v=bSgJ07AAT4s&t=48s",
"CtaTarget": "_blank"
}
]
}
92 changes: 92 additions & 0 deletions Upendo-Video-Resource-List/options.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
{
"fields": {
"ModuleTitle": {
"type": "text",
"helper": "Administrator-facing title for this OpenContent module. This helps identify the content block and is not displayed to visitors.",
"placeholder": "Video Resource List"
},
"ModuleAnchor": {
"type": "text",
"helper": "Optional. Used to create a page anchor, such as resources-videos. Use letters, numbers, and hyphens only.",
"placeholder": "resources-videos",
"showMessages": false
},
"Eyebrow": {
"type": "text",
"helper": "Optional. Small label shown above the section heading.",
"placeholder": "Video Resources"
},
"SectionHeading": {
"type": "text",
"helper": "Optional. Main heading shown above the video list.",
"placeholder": "Video Library"
},
"SectionDescription": {
"type": "textarea",
"helper": "Optional. Short introduction shown above the videos. HTML is allowed.",
"placeholder": "Watch brief explainers, product conversations, and field notes from the team."
},
"Videos": {
"type": "accordion",
"helper": "Add each video resource here. Categories and tags are simple text fields so this template can remain independent.",
"items": {
"fields": {
"Title": {
"type": "text",
"helper": "Required. Public title for this video.",
"placeholder": "Platform Overview"
},
"Description": {
"type": "textarea",
"helper": "Optional. Short description shown below the video.",
"placeholder": "A draft overview of how teams can evaluate and operationalize technical decisions."
},
"YouTubeUrl": {
"type": "url",
"helper": "Optional. Paste a YouTube watch, youtu.be, shorts, or embed URL. The public embed uses youtube-nocookie.com when the video ID can be parsed.",
"placeholder": "https://www.youtube.com/watch?v=VIDEO_ID"
},
"ThumbnailImage": {
"type": "image",
"helper": "Optional fallback image shown when no usable YouTube URL is configured. Recommended minimum: 1280 x 720 px.",
"uploadfolder": "Content/OpenContent/VideoResourceList/",
"typeahead": {
"Folder": "Content/OpenContent/VideoResourceList/"
}
},
"ThumbnailAlt": {
"type": "text",
"helper": "Describe the thumbnail for assistive technology. Leave empty only if the image is decorative.",
"placeholder": "Video thumbnail"
},
"Category": {
"type": "text",
"helper": "Optional. Simple label shown above the title and used for grouping when multiple categories exist.",
"placeholder": "Platform Overview"
},
"Tags": {
"type": "text",
"helper": "Optional. Comma-separated tags shown as small badges.",
"placeholder": "AI strategy, evaluation, operations"
},
"CtaText": {
"type": "text",
"helper": "Optional. Link text shown below the description. If empty, the YouTube URL is used as a source link only when a fallback card renders.",
"placeholder": "Watch on YouTube"
},
"CtaUrl": {
"type": "url",
"helper": "Optional. Link URL for the CTA. If empty, the YouTube URL is used when CTA text is present.",
"placeholder": "https://www.youtube.com/watch?v=VIDEO_ID"
},
"CtaTarget": {
"type": "select",
"helper": "Open the CTA in the same tab or a new tab. New tabs automatically receive noopener and noreferrer.",
"optionLabels": ["Same Tab", "New Tab"],
"removeDefaultNone": true
}
}
}
}
}
}
80 changes: 80 additions & 0 deletions Upendo-Video-Resource-List/schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
{
"type": "object",
"properties": {
"ModuleTitle": {
"type": "string",
"title": "Module Title"
},
"ModuleAnchor": {
"type": "string",
"title": "Module Anchor",
"pattern": "^$|^[a-zA-Z0-9\\-]+$"
},
"Eyebrow": {
"type": "string",
"title": "Eyebrow"
},
"SectionHeading": {
"type": "string",
"title": "Section Heading"
},
"SectionDescription": {
"type": "string",
"title": "Section Description"
},
"Videos": {
"type": "array",
"title": "Videos",
"items": {
"type": "object",
"properties": {
"Title": {
"type": "string",
"title": "Title"
},
"Description": {
"type": "string",
"title": "Description"
},
"YouTubeUrl": {
"type": "string",
"title": "YouTube URL"
},
"ThumbnailImage": {
"type": "string",
"title": "Thumbnail Image"
},
"ThumbnailAlt": {
"type": "string",
"title": "Thumbnail Alt Text"
},
"Category": {
"type": "string",
"title": "Category"
},
"Tags": {
"type": "string",
"title": "Tags"
},
"CtaText": {
"type": "string",
"title": "CTA Text"
},
"CtaUrl": {
"type": "string",
"title": "CTA URL"
},
"CtaTarget": {
"type": "string",
"title": "CTA Target",
"enum": ["_self", "_blank"],
"default": "_self"
}
},
"required": [
"Title"
]
}
}
}
}
12 changes: 12 additions & 0 deletions Upendo-Video-Resource-List/template-data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"BackgroundColorClass": "bg-body",
"ContainerClass": "container-xxl",
"MarginTop": "mt-5",
"MarginBottom": "mb-5",
"PaddingTop": "pt-5",
"PaddingBottom": "pb-5",
"DisplayMode": "grouped",
"CardsPerRow": "2",
"CompactSpacing": false,
"ShowBackToTop": true
}
Loading