mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-08-04 10:14:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Show preview pictures as carousel on part info page.

Browse source
This commit is contained in:
Jan Böhmer 2019-10-03 18:03:56 +02:00
parent 07dcbc0464
commit 2d4def2836
5 changed files with 96 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

10
templates/Parts/info/_main_infos.html.twig
View file

@ -1,14 +1,10 @@
{% import "helper.twig" as helper %}
<div class="row">
<div class="col-md-3">
{% if part.masterPictureAttachment and part.masterPictureAttachment.picture %}
<img src="{{ part.masterPictureAttachment | entityURL('file_view') }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300">
{% else %}
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300">
{% endif %}
<div class="col-md-3 col-lg-4">
{% include "Parts/info/_picture.html.twig" %}
</div>
<div class="col-md-9">
<div class="col-md-9 col-lg-8">
<h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">
{% if part.manufacturer %}
{% if part.manufacturer.id is not null %}

26
templates/Parts/info/_picture.html.twig Normal file
View file

@ -0,0 +1,26 @@
{% if not pictures is empty %}
{# <img src="{{ part.masterPictureAttachment | entityURL('file_view') }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300"> #}
<div id="pictureCarousel" class="carousel slide mb-2" data-interval="false">
<div class="carousel-inner">
{% for pic in pictures %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
</div>
{% endfor %}
</div>
{% if pictures | length > 1 %}
<a class="carousel-control-prev" href="#pictureCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">{% trans %}part.info.prev_picture{% endtrans %}</span>
</a>
<a class="carousel-control-next" href="#pictureCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">{% trans %}part.info.next_picture{% endtrans %}</span>
</a>
{% endif %}
</div>
{% else %}
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2" alt="Part main image" height="300" width="300">
{% endif %}