Commits

Franck Bret committed e491243

Add a new model for managing popup

Comments (0)

Files changed (4)

cmsplugin_photologue/cms_plugins.py

 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
-from cmsplugin_photologue.models import PhotologueGalleryPlugin, PhotologuePhotoPlugin, PhotologuePhotoTeaserPlugin
+from cmsplugin_photologue.models import PhotologueGalleryPlugin, PhotologuePhotoPlugin, PhotologuePhotoTeaserPlugin, PhotologuePhotoPopupPlugin
 from django.utils.translation import ugettext as _
 from photologue.models import Gallery, Photo
 from django.conf import settings
         return context
 
 plugin_pool.register_plugin(CMSPhotologuePhotoTeaserPlugin)
+
+
+class CMSPhotologuePhotoPopupPlugin(CMSPluginBase):
+    model = PhotologuePhotoPopupPlugin
+    name = _("Photologue Popup Photo")
+    text_enabled = True
+
+    def render(self, context, instance, placeholder):
+        
+        #set plugin template from plugin model
+        self.render_template = "plugins/cmsplugin_photologue/%s" % instance.get_template_display()
+        popup = instance.popup
+        print popup
+
+        context.update({
+            'photo':        instance.photo,
+            'title':        instance.title,
+            'placeholder':  placeholder,
+            'display_mode': instance.display_mode,
+            'css':          instance.get_css_display(),
+            'popup':        instance.popup,
+            'popup_display_mode': instance.popup_display_mode,
+
+        })
+        return context
+    
+plugin_pool.register_plugin(CMSPhotologuePhotoPopupPlugin)
+

cmsplugin_photologue/models.py

 from django.utils.translation import ugettext_lazy as _
 from django.conf import settings
 
-
 #get custom css from settings or use default
 CMSPLUGIN_PHOTOLOGUE_CSS_CHOICES = getattr(settings,"CMSPLUGIN_PHOTOLOGUE_CSS", (('0', ''),('1', 'left'),('2', 'right'),('3', 'center'),) )
 
 CMSPLUGIN_PHOTOLOGUE_GALLERY_TEMPLATES_CHOICES = getattr(settings,"CMSPLUGIN_PHOTOLOGUE_GALLERY_TEMPLATES", (('default', 'photologue_gallery.html'),) )
 CMSPLUGIN_PHOTOLOGUE_PHOTO_TEMPLATES_CHOICES = getattr(settings,"CMSPLUGIN_PHOTOLOGUE_PHOTO_TEMPLATES", (('default', 'photologue_photo.html'),) )
 CMSPLUGIN_PHOTOLOGUE_TEASER_PHOTO_TEMPLATES_CHOICES = getattr(settings,"CMSPLUGIN_PHOTOLOGUE_TEASER_PHOTO_TEMPLATES", (('default', 'photologue_teaser_photo.html'),) )
+CMSPLUGIN_PHOTOLOGUE_POPUP_PHOTO_TEMPLATES_CHOICES = getattr(settings,"CMSPLUGIN_PHOTOLOGUE_POPUP_PHOTO_TEMPLATES", (('default', 'photologue_popup_photo.html'),) )
 #get custom gallery sample size from settings or use default (overrides photologue.urls.SAMPLE_SIZE)
 SAMPLE_SIZE = getattr(settings, 'CMSPLUGIN_PHOTOLOGUE_SAMPLE_SIZE', 3)
 
     url = models.CharField(_("link"), max_length=255, blank=True, null=True, help_text=_("If present image will be clickable."))
     description = models.TextField(_("description"), blank=True, null=True)
     template = models.CharField(_('Plugin template'), max_length=255, choices=CMSPLUGIN_PHOTOLOGUE_TEASER_PHOTO_TEMPLATES_CHOICES, default='photologue_teaser_photo.html', help_text=_('Template used to render plugin'))
+
+class PhotologuePhotoPopupPlugin(CMSPlugin):
+    title = models.CharField(_("title"), max_length=255)
+    photo = models.ForeignKey(Photo)
+    display_mode = models.CharField(_('Display mode'), max_length=1, choices=CMSPLUGIN_PHOTOLOGUE_DISPLAY_MODE_CHOICES, default='3', help_text=_('Apply a specific display mode, normal for 4/3 without cropping, wide for 16/9 with cropping, square for 1/1, or thumbnail'))
+    css = models.CharField(_('CSS class'), max_length=1, choices=CMSPLUGIN_PHOTOLOGUE_CSS_CHOICES, default='0', help_text=_('Additional CSS class to apply'))
+    popup = models.ForeignKey(Photo, related_name='popup')
+    popup_display_mode = models.CharField(_('Pop up display mode'), max_length=1, choices=CMSPLUGIN_PHOTOLOGUE_DISPLAY_MODE_CHOICES, default='3', help_text=_('Apply a specific display mode, normal for 4/3 without cropping, wide for 16/9 with cropping, square for 1/1, or thumbnail'))
+    template = models.CharField(_('Plugin template'), max_length=255, choices=CMSPLUGIN_PHOTOLOGUE_POPUP_PHOTO_TEMPLATES_CHOICES, default='photologue_popup_photo.html', help_text=_('Template used to render plugin'))

cmsplugin_photologue/templates/plugins/cmsplugin_photologue/photologue_popup_photo.html

+{% load sekizai_tags %}
+<a href="#" id="trigger{{ photo.pk }}" class="popup-trigger">
+    <figure class="{% ifequal display_mode '6' %}thumbnail {% else %} photo {% endifequal %} {% if css %}{{ css }}{% endif %}">
+            {% ifequal display_mode '0' %}    
+                <img src="{{ photo.get_desktop_big_normal_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '1' %}    
+                <img src="{{ photo.get_desktop_big_wide_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '2' %}    
+                <img src="{{ photo.get_desktop_big_square_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '3' %}    
+                <img src="{{ photo.get_desktop_display_normal_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '4' %}    
+                <img src="{{ photo.get_desktop_display_wide_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '5' %}    
+                <img src="{{ photo.get_desktop_display_square_url }}" alt="{{ title }}" />
+            {% endifequal %}
+            {% ifequal display_mode '6' %}    
+                <img src="{{ photo.get_desktop_display_thumb_url }}" alt="{{ title }}" />
+            {% endifequal %}
+    {% if photo.title or photo.caption %}<figcaption><strong>{{ title }} </strong>{% if description %}, {{ description }}{% endif %}</figcaption>{% endif %}
+    </figure>
+</a>
+<div class="modal-popup" id="popup{{ photo.pk }}">
+        {% ifequal popup_display_mode '0' %}    
+            <img src="{{ popup.get_desktop_big_normal_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_normal_size.0 }}" height="{{ photo.get_desktop_big_normal_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '1' %}    
+            <img src="{{ popup.get_desktop_big_wide_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_wide_size.0 }}" height="{{ photo.get_desktop_big_wide_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '2' %}    
+            <img src="{{ popup.get_desktop_big_square_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_big_square_size.0 }}" height="{{ photo.get_desktop_big_square_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '3' %}    
+            <img src="{{ popup.get_desktop_display_normal_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_normal_size.0 }}" height="{{ photo.get_desktop_display_normal_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '4' %}    
+            <img src="{{ popup.get_desktop_display_wide_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_wide_size.0 }}" height="{{ photo.get_desktop_display_wide_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '5' %}    
+            <img src="{{ popup.get_desktop_display_square_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_display_square_size.0 }}" height="{{ photo.get_desktop_display_square_size.1 }}" />
+        {% endifequal %}
+        {% ifequal popup_display_mode '6' %}    
+            <img src="{{ popup.get_desktop_display_thumb_url }}" alt="{{ popup.title }}" width="{{ photo.get_desktop_thumb_size.0 }}" height="{{ photo.get_desktop_thumb_size.1 }}" />
+        {% endifequal %}
+</div>
+{% addtoblock "sekizaijs" %}
+<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $(".popup-trigger").each(function() {
+        var trigger_id = $(this).attr('id');
+        var current_id = trigger_id.split('trigger')[1];
+        var popup_id = '#popup' + current_id;
+        var popup_title = $(popup_id).find('img').attr('alt');
+        
+        var closedialog;
+        
+        function overlayclickclose() {
+            if (closedialog) {
+                $(popup_id).dialog('close');
+            }
+            //set to one because click on dialog box sets to zero 
+            closedialog = 1;
+        }
+         
+        $(popup_id).dialog({
+            title: popup_title,
+            autoOpen: false,
+            show: 'fade',
+			hide: 'fade',
+            modal: true,
+            width: 'auto',
+            height: 'auto',
+            resizable: false,
+            open: function(){closedialog = 1;$(document).bind('click', overlayclickclose);},
+            focus: function(){closedialog = 0;},
+            close: function(){$(document).unbind('click');},
+        });
+        
+        $(this).click(function() {
+            $(popup_id).dialog('open');
+            closedialog = 0;
+        });
+    });
+});
+</script> 
+{% endaddtoblock %}
+

cmsplugin_photologue/templates/plugins/cmsplugin_photologue/photologue_teaser_photo.html

+<figure class="{% ifequal display_mode '6' %}thumbnail {% else %} photo {% endifequal %} {% if css %}{{ css }}{% endif %}">
+	{% if link %}<a href="{{ link }}" title="{{ title|title }}">{% endif %}
+        {% ifequal display_mode '0' %}    
+            <img src="{{ photo.get_desktop_big_normal_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '1' %}    
+            <img src="{{ photo.get_desktop_big_wide_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '2' %}    
+            <img src="{{ photo.get_desktop_big_square_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '3' %}    
+            <img src="{{ photo.get_desktop_display_normal_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '4' %}    
+            <img src="{{ photo.get_desktop_display_wide_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '5' %}    
+            <img src="{{ photo.get_desktop_display_square_url }}" alt="{{ title }}" />
+        {% endifequal %}
+        {% ifequal display_mode '6' %}    
+            <img src="{{ photo.get_desktop_display_thumb_url }}" alt="{{ title }}" />
+        {% endifequal %}
+    {% endif %}
+	{% if link %}</a>{% endif %}
+{% if photo.title or photo.caption %}<figcaption><strong>{{ title }} </strong>{% if description %}, {{ description }}{% endif %}</figcaption>{% endif %}
+</figure>