src/cover/templates/cover/image_detail.html

   1 {% extends "documents/base.html" %}
   2 {% load i18n l10n %}
   3 {% load thumbnail %}
   4 {% load build_absolute_uri from fnp_common %}
   5 {% load bootstrap4 %}
   6
   7 {% block titleextra %}{% trans "Cover image" %}{% endblock %}
   8
   9 {% block content %}
  10   <h1>{% trans "Cover image" %}</h1>
  11   <div class="row">
  12     <div class="col-md-5">
  13
  14
  15
  16
  17
  18       {% if editable %}
  19         <form method="post" enctype="multipart/form-data">
  20           {% csrf_token %}
  21       {% endif %}
  22       <table class='editable'><tbody>
  23         {% bootstrap_form form %}
  24         {% if editable %}
  25           {% buttons %}
  26           <button type="submit" class="btn btn-primary">{% trans "Change" %}</button>
  27       {% endbuttons %}
  28         {% endif %}
  29       </tbody></table>
  30       {% if editable %}</form>{% endif %}
  31     </div>
  32
  33
  34     <div class="col-md-7">
  35       {% with perc=object.cut_percentages %}
  36         <a href="{{ object.use_file.url }}" style="position: relative; display: block; width: {{ perc.width }}px; height: {{ perc.height }}px;">
  37           {% thumbnail object.file perc.th as th %}
  38           <img src="{{ th.url }}" />
  39     {% endthumbnail %}
  40     {% localize off %}
  41     <div style="background: black; opacity: .5; display: block; position: absolute; top:0; left: 0; right: 0; height: {{ perc.top }}%"></div>
  42     <div style="background: black; opacity: .5; display: block; position: absolute; bottom:0; left: 0; right: 0; height: {{ perc.bottom }}%"></div>
  43     <div style="background: black; opacity: .5; display: block; position: absolute; top: {{ perc.top }}%; bottom: {{ perc.bottom }}%; left: 0; width: {{ perc.left }}%"></div>
  44     <div style="background: black; opacity: .5; display: block; position: absolute; top: {{ perc.top }}%; bottom: {{ perc.bottom }}%; right: 0; width: {{ perc.right }}%"></div>
  45       {% endlocalize %}
  46       {% endwith %}
  47         </a>
  48         <br/><a href="{{ object.source_url }}">{{ object.title }}</a> by {{ object.author }},
  49         {% if object.license_url %}<a href="{{ object.license_url }}">{% endif %}
  50           {{ object.license_name }}
  51           {% if object.license_url %}</a>{% endif %}
  52
  53           {% if object.example %}
  54             <div class="mt-4">
  55               <img src="{{ object.example.url }}?{{ object.etag }}">
  56             </div>
  57           {% endif %}
  58     </div>
  59   </div>
  60
  61
  62   <textarea style="width:100%" rows="6" class="form-control mt-4" disabled>
  63 &lt;dc:relation.coverImage.url xmlns:dc="http://purl.org/dc/elements/1.1/">{{ object.use_file.url|build_absolute_uri:request }}&lt;/dc:relation.coverImage.url>
  64 &lt;dc:relation.coverImage.attribution xmlns:dc="http://purl.org/dc/elements/1.1/">{{ object.attribution }}&lt;/dc:relation.coverImage.attribution>
  65 &lt;dc:relation.coverImage.source xmlns:dc="http://purl.org/dc/elements/1.1/">{{ object.get_full_url }}&lt;/dc:relation.coverImage.source></textarea>
  66
  67   <div class="card mt-4">
  68     <div class="card-header">
  69       <h2>{% trans "Used in:" %}</h2>
  70     </div>
  71     <div class="card-body">
  72       {% if object.book_set.exists %}
  73         <ul style="list-style: none; padding: 0; display: flex; gap: 10px;">
  74           {% for book in object.book_set.all %}
  75             <li>
  76               <a href="{{ book.get_absolute_url }}">
  77                 <img src="{{ book.cover.url }}?{{ object.etag }}" alt="{{ book }}">
  78               </a>
  79             </li>
  80             <li>
  81               <a href="{{ book.get_absolute_url }}" title="{{ book }}">
  82                 <img src="{{ book.cover.url }}?{{ object.etag }}" alt="{{ book }}">
  83               </a>
  84             </li>
  85           {% endfor %}
  86         </ul>
  87       {% else %}
  88         <p>{% trans "None" %}</p>
  89       {% endif %}
  90   </div>
  91 </div>
  92
  93
  94 {% endblock %}