kopia lustrzana https://github.com/wagtail/wagtail
Use grid and simplify the template for image edit view
Sage Abdullah
Matt Westcott
rodzic
d3d3299c22
commit
4245d7f619
|
|
@ -10,85 +10,66 @@
|
|||
<script src="{% versioned_static 'wagtailimages/js/focal-point-chooser.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block main_content %}
|
||||
<form action="{% url 'wagtailimages:edit' image.id %}" method="POST" enctype="multipart/form-data" novalidate>
|
||||
{% csrf_token %}
|
||||
<input type="hidden" value="{{ next }}" name="next">
|
||||
<div class="row row-flush">
|
||||
<div class="col6">
|
||||
{% for field in form %}
|
||||
{% if field.name == 'file' %}
|
||||
{% include "wagtailimages/images/_file_field.html" %}
|
||||
{% elif field.is_hidden %}
|
||||
{{ field }}
|
||||
{% else %}
|
||||
{% formattedfield field %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="w-hidden sm:w-block">
|
||||
<input type="submit" value="{% trans 'Save' %}" class="button" />
|
||||
{% if can_delete %}
|
||||
<a href="{{ delete_url }}{% if next %}?next={{ next|urlencode }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% block fields %}
|
||||
<div class="w-grid w-grid-cols-1 sm:w-grid-cols-2 w-gap-8">
|
||||
<div>
|
||||
<input type="hidden" value="{{ next }}" name="next">
|
||||
{% for field in form %}
|
||||
{% if field.name == 'file' %}
|
||||
{% include "wagtailimages/images/_file_field.html" %}
|
||||
{% elif field.is_hidden %}
|
||||
{{ field }}
|
||||
{% else %}
|
||||
{% formattedfield field %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div>
|
||||
{% image image max-800x600 as rendition %}
|
||||
|
||||
<div
|
||||
class="focal-point-chooser"
|
||||
style="max-width: {{ rendition.width|unlocalize }}px; max-height: {{ rendition.height|unlocalize }}px;"
|
||||
data-focal-point-x="{{ image.focal_point_x|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-y="{{ image.focal_point_y|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-width="{{ image.focal_point_width|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-height="{{ image.focal_point_height|default_if_none:''|unlocalize }}"
|
||||
data-focal-input-label="{% trans 'Image focal point' %}"
|
||||
>
|
||||
<img {{ rendition.attrs }} decoding="async" data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
|
||||
<div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
|
||||
</div>
|
||||
|
||||
<div class="col6">
|
||||
{% image image max-800x600 as rendition %}
|
||||
{% if url_generator_url %}
|
||||
<a href="{{ url_generator_url }}" class="button bicolor button--icon">{% icon name="link" wrapped=1 %}{% trans "URL Generator" %}</a>
|
||||
<hr />
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
class="focal-point-chooser"
|
||||
style="max-width: {{ rendition.width|unlocalize }}px; max-height: {{ rendition.height|unlocalize }}px;"
|
||||
data-focal-point-x="{{ image.focal_point_x|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-y="{{ image.focal_point_y|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-width="{{ image.focal_point_width|default_if_none:''|unlocalize }}"
|
||||
data-focal-point-height="{{ image.focal_point_height|default_if_none:''|unlocalize }}"
|
||||
data-focal-input-label="{% trans 'Image focal point' %}"
|
||||
>
|
||||
<img {{ rendition.attrs }} decoding="async" data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
|
||||
<div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
|
||||
<div class="w-grid md:w-grid-cols-3 w-gap-2">
|
||||
<div class="w-col-span-2">
|
||||
<h2 class="w-label-3">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
|
||||
<p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
|
||||
|
||||
<button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
|
||||
</div>
|
||||
<div class="w-col-span-1">
|
||||
{% image image original as original_image %}
|
||||
|
||||
{% if url_generator_enabled %}
|
||||
<a href="{% url 'wagtailimages:url_generator' image.id %}" class="button bicolor button--icon">{% icon name="link" wrapped=1 %}{% trans "URL Generator" %}</a>
|
||||
<hr />
|
||||
{% endif %}
|
||||
<dl>
|
||||
<dt>{% trans "Max dimensions" %}</dt>
|
||||
<dd>{{ original_image.width|unlocalize }}x{{ original_image.height|unlocalize }}</dd>
|
||||
<dt>{% trans "Filesize" %}</dt>
|
||||
<dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
|
||||
|
||||
<div class="row">
|
||||
<div class="col8">
|
||||
<h2 class="w-label-3">{% trans "Focal point" %} <span class="w-font-normal">{% trans "(optional)" %}</span></h2>
|
||||
<p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.has_focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
|
||||
|
||||
<button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
|
||||
</div>
|
||||
<div class="col4">
|
||||
{% image image original as original_image %}
|
||||
|
||||
<dl>
|
||||
<dt>{% trans "Max dimensions" %}</dt>
|
||||
<dd>{{ original_image.width|unlocalize }}x{{ original_image.height|unlocalize }}</dd>
|
||||
<dt>{% trans "Filesize" %}</dt>
|
||||
<dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
|
||||
|
||||
<dt>{% trans "Usage" %}</dt>
|
||||
<dd>
|
||||
{% with image.get_usage.count as usage_count_val %}
|
||||
<a href="{{ image.usage_url }}">{% blocktrans trimmed with usage_count=usage_count_val|intcomma count usage_count_val=usage_count_val %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
|
||||
{% endwith %}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<dt>{% trans "Usage" %}</dt>
|
||||
<dd>
|
||||
{% with image.get_usage.count as usage_count_val %}
|
||||
<a href="{{ image.usage_url }}">{% blocktrans trimmed with usage_count=usage_count_val|intcomma count usage_count_val=usage_count_val %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
|
||||
{% endwith %}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-flush sm:!w-hidden">
|
||||
<div class="col5">
|
||||
<input type="submit" value="{% trans 'Save' %}" class="button" />
|
||||
{% if can_delete %}
|
||||
<a href="{{ delete_url }}{% if next %}?next={{ next }}{% endif %}" class="button no">{% trans "Delete image" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -131,8 +131,10 @@ class EditView(generic.EditView):
|
|||
index_url_name = "wagtailimages:index"
|
||||
edit_url_name = "wagtailimages:edit"
|
||||
delete_url_name = "wagtailimages:delete"
|
||||
url_generator_url_name = "wagtailimages:url_generator"
|
||||
header_icon = "image"
|
||||
context_object_name = "image"
|
||||
delete_item_label = gettext_lazy("Delete image")
|
||||
_show_breadcrumbs = True
|
||||
|
||||
@cached_property
|
||||
|
|
@ -193,9 +195,11 @@ class EditView(generic.EditView):
|
|||
|
||||
try:
|
||||
reverse("wagtailimages_serve", args=("foo", "1", "bar"))
|
||||
context["url_generator_enabled"] = True
|
||||
context["url_generator_url"] = reverse(
|
||||
self.url_generator_url_name, args=(self.object.id,)
|
||||
)
|
||||
except NoReverseMatch:
|
||||
context["url_generator_enabled"] = False
|
||||
context["url_generator_url"] = None
|
||||
|
||||
return context
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue