servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

add support for svg images in library

Browse source
This commit is contained in:
Tobias Brunner 2025-07-08 15:24:47 +02:00
parent 2c217939b0
commit ff3a09d30c
No known key found for this signature in database
7 changed files with 257 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

23
hub/services/admin/images.py
View file

@ -72,6 +72,8 @@ class ImageLibraryAdmin(admin.ModelAdmin):
Display small thumbnail in list view.
"""
if obj.image:
# Use img tag for all images in list view to maintain clickability
# SVG files will still display correctly with img tag
return format_html(
'<img src="{}" width="50" height="50" style="object-fit: cover; border-radius: 4px;" />',
obj.image.url,
@ -85,10 +87,23 @@ class ImageLibraryAdmin(admin.ModelAdmin):
Display larger preview in detail view.
"""
if obj.image:
return format_html(
'<img src="{}" style="max-width: 300px; max-height: 300px; border-radius: 4px;" />',
obj.image.url,
)
if obj.is_svg():
# For SVG files in detail view, use object tag for better rendering
# This is only for display, not for clickable elements
return format_html(
'<div style="pointer-events: none;">'
'<object data="{}" type="image/svg+xml" style="max-width: 300px; max-height: 300px; border-radius: 4px; background: #f5f5f5;">'
'<img src="{}" style="max-width: 300px; max-height: 300px; border-radius: 4px;" />'
"</object>"
"</div>",
obj.image.url,
obj.image.url,
)
else:
return format_html(
'<img src="{}" style="max-width: 300px; max-height: 300px; border-radius: 4px;" />',
obj.image.url,
)
return "No Image"
image_preview.short_description = "Preview"

8
hub/services/admin/widgets.py
View file

@ -59,11 +59,17 @@ class ImageLibraryWidget(forms.Select):
selected = "selected" if str(image.pk) == str(value) else ""
image_url = image.image.url if image.image else ""
# Use img tag for all images in widget to maintain clickability
# SVG files will still display correctly with img tag
preview_html = (
f'<img src="{image_url}" alt="{image.alt_text}" loading="lazy">'
)
html_parts.append(
f"""
<div class="image-option {selected}" data-value="{image.pk}">
<div class="image-preview">
<img src="{image_url}" alt="{image.alt_text}" loading="lazy">
{preview_html}
</div>
<div class="image-info">
<span class="image-name">{image.name}</span>