Skip to content

Commit 6ff90f7

Browse files
author
Zane
committed
Article editor: images gallery
1 parent 8d5fde8 commit 6ff90f7

File tree

5 files changed

+55
-57
lines changed

5 files changed

+55
-57
lines changed

‎assets/js/article-edit-upload-images.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ $(document).on('change', '#tli-article-editor-image-gallery input[type="file"]',
3535
let errorMessage = editorImageGallery.find('.alert-danger');
3636
errorMessage.addClass('collapse');
3737

38+
editorImageGallery.find('.border-success').removeClass('border border-2 border-success')
39+
3840
$.ajax({
3941
url: editorImageGallery.data('save-url'),
4042
type: 'POST',

‎templates/article/editor/images-gallery.html.twig

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- ARTICLE side column editor images gallery START -->
2+
<div id="tli-article-editor-image-gallery" class="col-lg-4 sticky-top overflow-auto mt-15"
3+
data-save-url="{{ path('app_article_edit_images-upload', {'articleId': Article.id}) }}">
4+
5+
{% embed 'parts/alert-chalkboard.html.twig' %}
6+
{% block alertStyle %}{% if Article.Images is empty %}collapse{% endif %} tli-images-guide{% endblock %}
7+
{% block alertTitle %}Immagini caricate{% endblock %}
8+
{% block alertBody %}Clicca o trascina un'immagine per inserirla nell'articolo{% endblock %}
9+
{% endembed %}
10+
11+
{% embed 'parts/alert-warning.html.twig' %}
12+
{% block alertStyle %}{% if Article.Images is not empty %}collapse{% endif%} tli-no-images-guide{% endblock %}
13+
{% block alertTitle %}Nessuna immagine caricata{% endblock %}
14+
{% block alertBody %}Carica un'immagine per inserirla nell'articolo{% endblock %}
15+
{% endembed %}
16+
17+
18+
<div id="tli-images-gallery" class="row row-cols-2 g-1">
19+
{% embed 'article/editor/images.html.twig' with {'Article': Article, 'Images': Article.Images} only %}
20+
{% block imageBorder %}{% endblock %}
21+
{% endembed %}
22+
</div>
23+
24+
25+
<div class="sticky-bottom text-center mt-2">
26+
27+
<button type="button" class="btn btn-primary tli-image-upload">
28+
<i class="fa-solid fa-upload"></i> Carica immagini
29+
</button>
30+
31+
<input type="file" multiple accept="image/*" class="d-none">
32+
33+
<div id="tli-image-upload-progress" class="progress mt-2 collapse" role="progressbar"
34+
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
35+
<div class="progress-bar" style="width: 0%"></div>
36+
</div>
37+
38+
{% embed 'parts/alert-error-message.html.twig' %}
39+
{% block alertStyle %}mt-2 collapse{% endblock %}
40+
{% block alertBodyIcon %}{% endblock %}
41+
{% endembed %}
42+
43+
</div>
44+
45+
</div>
46+
<!-- ARTICLE side column editor images gallery END -->

‎templates/article/editor/images-new-uploaded.html.twig

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎templates/article/editor/images.html.twig

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,8 @@
1-
<!-- ARTICLE side column editor images gallery START -->
2-
<div id="tli-article-editor-image-gallery" class="col-lg-4 sticky-top overflow-auto mt-15"
3-
data-save-url="{{ path('app_article_edit_images-upload', {'articleId': Article.id}) }}">
4-
5-
{% embed 'parts/alert-chalkboard.html.twig' %}
6-
{% block alertStyle %}{% if Article.Images is empty %}collapse{% endif %} tli-images-guide{% endblock %}
7-
{% block alertTitle %}Immagini caricate{% endblock %}
8-
{% block alertBody %}Clicca o trascina un'immagine per inserirla nell'articolo{% endblock %}
9-
{% endembed %}
10-
11-
{% embed 'parts/alert-warning.html.twig' %}
12-
{% block alertStyle %}{% if Article.Images is not empty %}collapse{% endif%} tli-no-images-guide{% endblock %}
13-
{% block alertTitle %}Nessuna immagine caricata{% endblock %}
14-
{% block alertBody %}Carica un'immagine per inserirla nell'articolo{% endblock %}
15-
{% endembed %}
16-
17-
<div id="tli-images-gallery" class="row row-cols-2 g-1">
18-
{% for Image in Article.Images %}
19-
<div class="col">
20-
<div class="ratio ratio-1x1">
21-
<img src="{{ Image.url(Article, 'med') }}" loading="lazy" class="img-fluid object-fit-cover"
22-
alt="{{ Image.title }}" title="{{ Image.title }}">
23-
</div>
24-
</div>
25-
{% endfor %}
26-
</div>
27-
28-
29-
<div class="sticky-bottom text-center mt-2">
30-
31-
<button type="button" class="btn btn-primary tli-image-upload">
32-
<i class="fa-solid fa-upload"></i> Carica immagini
33-
</button>
34-
35-
<input type="file" multiple accept="image/*" class="d-none">
36-
37-
<div id="tli-image-upload-progress" class="progress mt-2 collapse" role="progressbar"
38-
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
39-
<div class="progress-bar" style="width: 0%"></div>
1+
{% for Image in Images %}
2+
<div class="col">
3+
<div class="ratio ratio-1x1 {% block imageBorder %}border border-2 border-success{% endblock %}">
4+
<img src="{{ Image.url(Article, 'med') }}" loading="lazy" class="img-fluid object-fit-cover"
5+
alt="{{ Image.title }}" title="{{ Image.title }}">
406
</div>
41-
42-
{% embed 'parts/alert-error-message.html.twig' %}
43-
{% block alertStyle %}mt-2 collapse{% endblock %}
44-
{% block alertBodyIcon %}{% endblock %}
45-
{% endembed %}
46-
477
</div>
48-
49-
</div>
50-
<!-- ARTICLE side column editor images gallery END -->
8+
{% endfor %}

‎templates/article/index.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@
233233

234234
{% if Article.currentUserCanEdit %}
235235

236-
{% include 'article/editor/images.html.twig' %}
236+
{% include 'article/editor/images-gallery.html.twig' %}
237237

238238
{% else %}
239239

0 commit comments

Comments
 (0)