Merge pull request #236 from divio/bugfix/adds-center-alignment-and-i…

…mg-responsive-class

adds center alignment and img responsive class

HISTORY

@@ -7,6 +7,8 @@ Changelog for django-filer-cmsplugins
 * Move migrations to proper layout
 * Put django's AppConfig for nice name in django admin
 * Add swappable dependency to initial migration
+* Add img-responsive class if automatic scaling
+* Add center image alignment
 
 1.0.1 (2016-01-14)
 ------------------

README.rst

@@ -146,3 +146,9 @@ be used in the template as ``{{ instance.style }}``.
 
 For backwards compatibility the plugin will always use ``cmsplugin_filer_image/image.html`` if it exists. Remove that
 template after migrating to the new structure.
+
+
+Classes
+-------
+
+Classes like ``left``, ``center``, ``right`` and ``img-responsive`` are given by the plugin to use in your own projects.

cmsplugin_filer_image/migrations/0006_auto_20160427_1438.py

@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cmsplugin_filer_image', '0005_auto_20160224_1457'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='filerimage',
+            name='alignment',
+            field=models.CharField(blank=True, max_length=10, null=True, verbose_name='image alignment', choices=[('left', 'left'), ('right', 'right'), ('center', 'center')]),
+        ),
+    ]

cmsplugin_filer_image/models.py

@@ -16,8 +16,10 @@
 class FilerImage(CMSPlugin):
     LEFT = "left"
     RIGHT = "right"
+    CENTER = "center"
     FLOAT_CHOICES = ((LEFT, _("left")),
                      (RIGHT, _("right")),
+                     (CENTER, _("center")),
                      )
     STYLE_CHOICES = settings.CMSPLUGIN_FILER_IMAGE_STYLE_CHOICES
     DEFAULT_STYLE = settings.CMSPLUGIN_FILER_IMAGE_DEFAULT_STYLE

cmsplugin_filer_image/templates/cmsplugin_filer_image/plugins/image/default.html

@@ -15,14 +15,14 @@
 {% if link %}<a href="{{ link }}"{% if instance.target_blank %} target="_blank"{% endif %} class="filer_image_link">{% endif %}
 {% if instance.image %}
 	{% if instance.use_original_image %}
-		<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ instance.image.url }}"{% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
+		<img class="filer_image{% if instance.alignment %} {{ instance.alignment }}{% endif %}{% if instance.use_autoscale %} img-responsive{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ instance.image.url }}"{% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
 	{% else %}
 		{% thumbnail instance.image size crop=opts.crop upscale=opts.upscale subject_location=opts.subject_location as thumbnail %}
-		<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ thumbnail.url }}"{% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
+		<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}{% if instance.use_autoscale %} img-responsive{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ thumbnail.url }}"{% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
 	{% endif %}
 {% else %}
 	{# just a plain link to some external image #}
-	<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ instance.image_url }}"{% if size.0 %} width="{{ size.0 }}"{% endif %}{% if size.1 %} height="{{ size.1 }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
+	<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}{% if instance.use_autoscale %} img-responsive{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ instance.image_url }}"{% if size.0 %} width="{{ size.0 }}"{% endif %}{% if size.1 %} height="{{ size.1 }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
 {% endif %}
 {% if instance.caption or instance.description %}
 	<span class="filer_image_info">