Skip to content

Add image preview in forms for image fields#7489

Open
javiereguiluz wants to merge 6 commits intoEasyCorp:5.xfrom
javiereguiluz:fix_5410
Open

Add image preview in forms for image fields#7489
javiereguiluz wants to merge 6 commits intoEasyCorp:5.xfrom
javiereguiluz:fix_5410

Conversation

@javiereguiluz
Copy link
Collaborator

Fixes #5410.

Image fields now display the image contents in edit/new page. When you change/remove the image, it dynamically updates the preview using JS too.

@javiereguiluz javiereguiluz added this to the 5.x milestone Mar 7, 2026
{% for image in images %}
{% if image is not empty %}
{% set _lightbox_id = 'ea-lightbox-' ~ form.vars.id ~ '-' ~ loop.index %}
<a href="#" class="ea-lightbox-thumbnail" data-ea-lightbox-content-selector="#{{ _lightbox_id }}">
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<a href="#" class="ea-lightbox-thumbnail" data-ea-lightbox-content-selector="#{{ _lightbox_id }}">
<a href="{{ asset(image) }}" class="ea-lightbox-thumbnail" data-ea-lightbox-content-selector="#{{ _lightbox_id }}">

Copy link
Contributor

@Seb33300 Seb33300 Mar 9, 2026

Choose a reason for hiding this comment

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

This would allow opening the image in a new tab? (using middle click or ctrl + click)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good idea! Done. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ImageField image preview on forms?

2 participants