Enhance OG preview and text count components #34314
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request enhances the Open Graph preview and text count components for dotCMS's content editor by introducing a new text counter for the legacy editor and improving the OG preview fallback behavior.
Changes:
- Added a routing template (
text_count.vtl) that conditionally loads either the new or old text counter based on edit mode - Created new text counter implementations for both new (
text_count_new.vtl) and legacy (text-count_old.vtl) editors with live character counting and color feedback - Updated OG preview to show a placeholder image when no image is set (
og_preview_new.vtl) - Added text color styling to the OG preview for better readability (
og_preview_old.vtl)
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| text_count.vtl | Router template that conditionally includes the appropriate text counter based on edit mode |
| text_count_new.vtl | New text counter implementation using modern DotCustomFieldApi with module script |
| text-count_old.vtl | Legacy text counter implementation using legacy DotCustomFieldApi methods |
| og_preview_new.vtl | Updated to use external placeholder image when no OG image is set |
| og_preview_old.vtl | Added color styling to the preview host element |
| #if( $structures.isNewEditModeEnabled() ) | ||
| #parse('/static/htmlpage_assets/text_count_new.vtl') | ||
| #else | ||
| #parse('/static/htmlpage_assets/text_count_old.vtl') |
There was a problem hiding this comment.
The file path references 'text_count_old.vtl' but the actual filename is 'text-count_old.vtl' (with a hyphen instead of an underscore). This will cause the template parsing to fail. The filename should be renamed to 'text_count_old.vtl' to match the naming convention used by other similar files in this directory (e.g., og_preview_old.vtl, cachettl_custom_field_old.vtl).
| #parse('/static/htmlpage_assets/text_count_old.vtl') | |
| #parse('/static/htmlpage_assets/text-count_old.vtl') |
| // Get image from ogImage field container | ||
| const imgInode = ogImageField.getValue() || ''; | ||
| const imgUrl = imgInode ? `/dA/${imgInode}/asset/500w/50q/` : ''; | ||
| const imgUrl = imgInode ? `/dA/${imgInode}/asset/500w/50q/` : "https://placehold.co/600x400"; |
There was a problem hiding this comment.
Using an external URL (https://placehold.co/600x400) as a placeholder introduces a dependency on an external service. If the external service is unavailable or slow, it will impact the user experience. Consider using a local placeholder image from the dotCMS assets or a data URI instead. Additionally, the hardcoded external URL could be blocked by Content Security Policy (CSP) configurations.
| const imgUrl = imgInode ? `/dA/${imgInode}/asset/500w/50q/` : "https://placehold.co/600x400"; | |
| const imgUrl = imgInode | |
| ? `/dA/${imgInode}/asset/500w/50q/` | |
| : "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='400'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23cccccc'/%3E%3C/svg%3E"; |
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| color: #606770; |
There was a problem hiding this comment.
The color property is being added as a duplicate. The #cardHost selector already has 'color: #606770;' defined on line 61, making this addition on line 67 redundant. Additionally, the PR description states this change is for the "OG preview description", but this style rule applies to #cardHost, not #cardDescription. Either the duplicate should be removed or if the intent was to style #cardDescription, the wrong selector is being modified.
| color: #606770; |
This pull request updates the Open Graph preview and text count components to improve user experience and maintain consistency across legacy and new edit modes. It introduces a new text counter for the old editor, ensures fallback images for OG previews, and applies minor style enhancements.
Text Counter Improvements:
text-count_old.vtl).text_count.vtl).Open Graph Preview Enhancements:
og_preview_new.vtl).og_preview_old.vtl).This PR fixes: #34029