better popup management preview for images and contents.
--- a/src/metadatacomposer/templates/metadatacomposer_home.html Tue Jun 04 15:01:26 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_home.html Tue Jun 04 17:03:45 2013 +0200
@@ -75,21 +75,10 @@
<div class="row">
{% for i in images %}
<div class="span2">
- <a href="#image{{ i.pk }}" role="button" data-toggle="modal">{% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+ <a href="{% url 'composer_image' branding=branding image_pk=i.pk %}?maxwidth=530&maxheight=500&imgtag=true" data-type-media="image" data-title="{{ i.title }}" class="open-modal">
+ {% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
<h4>{{ i.title }}</h4></a>
</div>
- <div id="image{{ i.pk }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="image{{ i.pk }}label" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="image{{ i.pk }}label">{{ i.title }}</h3>
- </div>
- <div class="modal-body" style="max-height: 500px;">
- <img src="{% url 'composer_image' branding=branding image_pk=i.pk %}?maxwidth=530&maxheight=500" />
- </div>
- <div class="modal-footer">
- <button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
- </div>
- </div>
{% endfor %}
</div>
</article>
@@ -105,7 +94,8 @@
<div class="row">
{% for c in contents %}
<div class="span2">
- <a href="#">{% thumbnail c.image "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+ <a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new>
+ {% thumbnail c.image "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
<h4>{{ c.title }}</h4></a>
</div>
{% endfor %}
@@ -134,42 +124,6 @@
{% endblock %}
{% block js_page %}
<script src="{% static 'metadatacomposer/js/home.js' %}"></script>
- <script type="text/javascript">
- $(document).on('click', 'a.content_pagination', function(e){
- e.preventDefault();e.stopPropagation();
- var url = $(this).attr('href');
- $(this).addClass("loader");
- $.ajax({
- url: url,
- cache: false,
- type: 'GET',
- success: function(data, status, request) {
- $("#content_list_container").html(data);
- },
- error: function(jqXHR, textStatus, errorThrown) {
- resp = $.parseJSON(jqXHR.responseText);
- alert(resp.message);
- }
- });
- });
- $(document).on('click', 'a.content_pagination_library', function(e){
- e.preventDefault();e.stopPropagation();
- var url = $(this).attr('href');
- $(this).addClass("loader");
- $.ajax({
- url: url,
- cache: false,
- type: 'GET',
- success: function(data, status, request) {
- $("#content_list_container_library").html(data);
- },
- error: function(jqXHR, textStatus, errorThrown) {
- resp = $.parseJSON(jqXHR.responseText);
- alert(resp.message);
- }
- });
- });
- </script>
{% endblock %}
{% endblock %}
{% analytics %}
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html Tue Jun 04 15:01:26 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html Tue Jun 04 17:03:45 2013 +0200
@@ -35,7 +35,7 @@
<tr>
<td>{% thumbnail p.image "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</td>
<td>{{ p.title }}</td>
- <td>{% with c=p.contents.all|first %}<a href="#">{{ c.title }}</a>{% endwith %}</td>
+ <td>{% with c=p.contents.all|first %}<a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new>{{ c.title }}</a>{% endwith %}</td>
<td>{{ p.modification_date|date:"Y/m/d" }}</td>
<td>
<form action="#">
--- a/src/metadatacomposer/templates/partial/resource_content_list.html Tue Jun 04 15:01:26 2013 +0200
+++ b/src/metadatacomposer/templates/partial/resource_content_list.html Tue Jun 04 17:03:45 2013 +0200
@@ -15,7 +15,10 @@
<tbody class="liste">
{% for res in content_results %}
<tr id="row-list-ressources-video-id{{ forloop.counter }}">
- <td>{% thumbnail res.content.image "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</td>
+ <td>
+ <a href="{% url 'embediframe_page' %}?content_id={{ res.content.iri_id }}" data-type-media="video" data-title="{{ res.content.title }}" class="open-modal" data-hide-add-new>
+ {% thumbnail res.content.image "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</a>
+ </td>
<td>{{ res.content.title }}</td>
<td>
<ul>
--- a/src/metadatacomposer/templates/partial/resource_image_list.html Tue Jun 04 15:01:26 2013 +0200
+++ b/src/metadatacomposer/templates/partial/resource_image_list.html Tue Jun 04 17:03:45 2013 +0200
@@ -16,19 +16,8 @@
{% for res in image_results %}
<tr id="row-list-ressources-image-id{{ forloop.counter }}">
<td>
- <a href="#image{{ res.pk }}" role="button" data-toggle="modal">{% thumbnail res.image_file "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</a>
- <div id="image{{ res.pk }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="image{{ res.pk }}label" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="image{{ res.pk }}label">{{ res.title }}</h3>
- </div>
- <div class="modal-body" style="max-height: 500px;">
- <img src="{% url 'composer_image' branding=branding image_pk=res.pk %}?maxwidth=530&maxheight=500" />
- </div>
- <div class="modal-footer">
- <button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
- </div>
- </div>
+ <a href="{% url 'composer_image' branding=branding image_pk=res.pk %}?maxwidth=530&maxheight=500&imgtag=true" data-type-media="image" data-title="{{ res.title }}" class="open-modal">
+ {% thumbnail res.image_file "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</a>
</td>
<td>{{ res.title }}</td>
<td>
--- a/src/metadatacomposer/views.py Tue Jun 04 15:01:26 2013 +0200
+++ b/src/metadatacomposer/views.py Tue Jun 04 17:03:45 2013 +0200
@@ -453,8 +453,16 @@
else:
# Image ratio < wanted ratio, we resize with fixed height
image_file = get_thumbnail(os.path.join(settings.MEDIA_ROOT, image.image_file.path), 'x'+str(maxheight), crop='center', format='PNG', quality=99)
- if image_file:
- image_data = image_file.read()
+
+ # We display directly the image file or, if asked, the <img> html tag
+ imgtag = request.GET.get("imgtag") or None
+ if imgtag:
+ imgtag = {'true': True, 'false': False, "0": False, "1": True}.get(imgtag.lower())
+ if imgtag:
+ return HttpResponse('<img src="' + image_file.url + '" />')
+ else:
+ if image_file:
+ image_data = image_file.read()
return HttpResponse(image_data, mimetype="image/png")