Giter Site home page Giter Site logo

alekseevav / django-galleries Goto Github PK

View Code? Open in Web Editor NEW

This project forked from espenhogbakk/django-galleries

0.0 2.0 0.0 525 KB

django-galleries is a photo gallery app for django that enables you to add/edit/remove images inline with the model that the gallery belongs to in the django admin interface.

License: MIT License

Python 17.93% JavaScript 69.70% CSS 12.37%

django-galleries's Introduction

Django Galleries

About

Django Galleries is a photo gallery app that makes it easy to include galleries in your django apps. It has an easy to use, drag & drop interface for managing the photos. It also includes tools for cropping the images.

Example Example edit

Configuration

Sadly, there is a few things that needs to be configured. I will try to make this list smaller with time, but for now everything is necessary. This is somewhat because I am utilizing a few other apps.

In your settings module add the following:

from easy_thumbnails.conf import settings as thumbsettings
THUMBNAIL_PROCESSORS = (
    'image_cropping.thumbnail_processors.crop_corners',
) + thumbsettings.THUMBNAIL_PROCESSORS

And this to INSTALLED_APPS

'orderable',
'easy_thumbnails',
'image_cropping',
'galleries',

Make sure that you have configured your MEDIA_ROOT to handle file uploads. Set it to something like MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media')

And then add this to MIDDLEWARE_CLASSES:

'respite.middleware.HttpMethodOverrideMiddleware',
'respite.middleware.HttpPutMiddleware',
'respite.middleware.HttpPatchMiddleware',
'respite.middleware.JsonMiddleware',

This is requirements from django-respite that 'django-galleries` utilizes.

Then in your urls.py file

Add (r'^admin/galleries', include('galleries.urls', namespace='galleries', app_name='galleries')),

If you are in development mode, remember to host your media files accordingly, add something like this

from django.conf import settings
# Serve media files through Django if in debug mode
if settings.DEBUG:
    urlpatterns += patterns('django.views',
        url(r'%s(?P<path>.*)$' % settings.MEDIA_URL[1:], "static.serve", {
            'document_root': settings.MEDIA_ROOT
        })
    )

At the moment, all images in a gallery has to use the same aspect ratio, it defaults to 16/9, but you can override that with the setting GALLERIES_IMAGE_CROPPING_RATIO:

GALLERIES_IMAGE_CROPPING_RATIO = '5/4

And at last, remember to do a syncdb to update the database.

Usage

Add the GalleryForeignKey to your models.py file, e.g:

from galleries.fields import GalleryForeignKey

class Article(models.Model):
    title = models.CharField(max_length=255)
    gallery = GalleryForeignKey('galleries.Gallery', blank=True, null=True, on_delete=models.SET_NULL)

    def __unicode__(self):
        return self.title

This is just a regular models.ForeignKey except that is has a default widget that adds all the javascript and styling that makes everything work. You could of course if you wanted to, not use the GalleryForeignKey, but override the widget on a regular ForeignKey, if so, use galleries.widgets.GalleryForeignKeyWidget.

And then in you're template you can do something like this:

{% if article.gallery %}
<div id="gallery">
  <ul>
    {% for image in article.gallery.images.all %}
    <li><img src="{% thumbnail image.image 610x343 box=image.cropping crop detail %}" alt="" /></li>
    {% endfor %}
  </ul>
</div>
{% endif %}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.