addon_edit_media.html

{% from "devhub/includes/macros.html" import tip, empty_unless %}

<form method="post" action="{{ url('devhub.addons.section', addon.slug, 'media', 'edit') }}"
      enctype="multipart/form-data">
  {{ csrf() }}
  <h3>
    {{ _('Images') }}
    {% if not editable %}
      <a href="#" data-editurl="{{ url('devhub.addons.section', addon.slug, 'media', 'edit') }}" class="button">
      {{ _('Edit') }}</a>
    {% endif %}
  </h3>
  <div class="item">
    <div class="item_wrapper">
      <table>
        <caption>{{ _('Add-on Media for {0}')|f(addon.name) }}</caption>
        <tbody>
          <tr>
            <th>
              {{ tip(_("Add-on icon"),
                     _("Upload an icon for your add-on or choose from one of ours. The
                        icon is displayed nearly everywhere your add-on is. Uploaded images
                        must be one of the following image types: .png, .jpg, .gif")) }}
            </th>
            <td>
              {% if editable %}
                <div id="icon_preview">
                  <div class="icon_preview" id="icon_preview_32">
                    <img src="{{ addon.icon_url }}">
                  </div>
                  <div class="edit-media-details">
                    {# L10n: The size of the icon #}
                    {{ _('32x32px') }}
                    {{ tip(None,
                           _("Used in listings of add-ons, like search results
                              and featured add-ons.")) }}
                  </div>

                  <div class="icon_preview" id="icon_preview_64">
                    <img src="{{ addon.get_icon_url(64) }}">
                  </div>
                  <div class="edit-media-details">
                    {# L10n: The size of the icon #}
                    {{ _('64x64px') }}
                    {{ tip(None,
                           _("Used in add-on detail pages.")) }}
                  </div>
                </div>
                <ul id="icons_default">
                  {{ form.icon_type|safe }}
                </ul>
                <div class="invisible-upload">
                  <a class="button" href="#">{{ _('Upload a Custom Icon...') }}</a>
                  {{ form.icon_upload|safe }}
                </div>
                <div class="edit-media-details">
                  {% trans %}
                  PNG and JPG supported. Icons resized to 64x64 pixels if larger.
                  {% endtrans %}
                </div>
                {{ form.icon_upload.errors|safe }}
                <ul class="errorlist">
                  <li id="edit-icon-error"></li>
                </ul>
              {% else %}
                <div id="icon_preview_readonly">
                    <img src="{{ addon.get_icon_url(64) }}">
                    <img src="{{ addon.icon_url }}">
                </div>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th>
              <label>{{ _("Screenshots") }}</label>
            </th>
            <td class="edit-previews-readonly">
              {% if editable %}
                {% if preview_form: %}
                  {{ preview_form.management_form|safe }}
                  {{ preview_form.non_form_errors()|safe }}
                  <div id="file-list">
                    {% for form in preview_form.forms %}
                      <div class="preview">
                        <div class="preview-thumb">
                          {% if form.instance.id %}
                            <img src="{{ form.instance.thumbnail_url }}">
                          {% endif %}
                        </div>
                        {{ form.id|safe }}
                        <label data-for="{{ form.prefix }}-{{ form.caption.name }}" class="above-the-field">
                          {{ _('Please provide a caption for this screen shot:') }}
                        </label>
                        {{ form.caption|safe }}
                        <div class="preview_extra">
                          {{ form.upload_hash|safe }}
                        </div>
                        {{ form.errors|safe }}
                      </div>
                    {% endfor %}
                  </div>
                  <div class="invisible-upload">
                    <a class="button" href="#">{{ _('Add a screenshot...') }}</a>
                    <input type="file" id="screenshot_upload" name="uploads" multiple
                           data-upload-url="{{ url('devhub.addons.upload_preview', addon.slug) }}">
                  </div>
                {% endif %}
              {% else %}
                {% for preview in addon.previews.all() %}
                  <div class="preview-thumb">
                    <img src="{{ preview.thumbnail_url }}">
                  </div>
                {% endfor %}
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    {% if editable %}
    <div class="listing-footer">
      <button>{{ _('Save Changes') }}</button> {{ _('or') }}
        <a href="{{ url('devhub.addons.section', addon.slug, 'media') }}"
          class="addon-edit-cancel">
          {{ _('Cancel') }}</a>
    </div>
    {% endif %}
  </div>
</form>