feat: add external attribute support to image-preview for direct URL rendering

Browse Source 
Introduce an 'external' attribute on the image-preview component to bypass the devrant image URL builder when the source is an external link. Update the component's observed attributes, rendering logic, and lightbox initialization to conditionally use the raw src URL. Modify rant-content to detect external images via the presence of links and pass the external flag accordingly.
This commit is contained in:
retoor 2025-12-12 18:00:51 +00:00
parent d36937f743
commit fefd47f703
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/components/image-preview.js
View File

@ -10,7 +10,7 @@ import { buildDevrantImageUrl, isGifUrl } from '../utils/url.js';
class ImagePreview extends BaseComponent {
static get observedAttributes() {
return ['src', 'width', 'height', 'alt'];
return ['src', 'width', 'height', 'alt', 'external'];
}
init() {
@ -23,14 +23,15 @@ class ImagePreview extends BaseComponent {
const width = this.getAttr('width');
const height = this.getAttr('height');
const alt = this.getAttr('alt') || 'Image';
const external = this.hasAttribute('external');
if (!src) {
this.setHtml('');
return;
}
const imageUrl = buildDevrantImageUrl(src);
const isGif = isGifUrl(imageUrl);
const imageUrl = external ? src : buildDevrantImageUrl(src);
const isGif = isGifUrl(src);
const aspectRatio = width && height ? width / height : null;
this.addClass('image-preview');
@ -71,7 +72,8 @@ class ImagePreview extends BaseComponent {
const src = this.getAttr('src');
if (!src) return;
const imageUrl = buildDevrantImageUrl(src);
const external = this.hasAttribute('external');
const imageUrl = external ? src : buildDevrantImageUrl(src);
const lightbox = document.createElement('image-lightbox');
lightbox.setAttribute('src', imageUrl);

3
js/components/rant-content.js
View File

@ -53,11 +53,12 @@ class RantContent extends BaseComponent {
let html = `<div class="content-text">${renderedText}</div>`;
if (images.length > 0) {
const isExternal = links && links.length > 0;
html += `
<div class="content-images">
${images.map(url => {
const safeUrl = sanitizeUrl(url);
return safeUrl ? `<image-preview src="${safeUrl}"></image-preview>` : '';
return safeUrl ? `<image-preview src="${safeUrl}"${isExternal ? ' external' : ''}></image-preview>` : '';
}).join('')}
</div>
`;