Quickstart

Installation

  • Install Django-rgallery with your favorite Python package manager, pip will install the dependencies too (compressor, sorl.thumbnail, taggit, etc...):

    pip install django-rgallery
    
  • Add 'compressor', 'sorl.thumbnail', 'taggit' and 'rgallery' to your INSTALLED_APPS setting:

    INSTALLED_APPS = (
        # rgallery-dependencies
        'compressor',
        'taggit',
        'sorl.thumbnail',
        'rgallery',
    )
    
  • Add a proper url for the application in your project urls.py:

    url(r'^gallery/', include('rgallery.urls',
                              namespace='rgallery',
                              app_name='rgallery')),
    

    You probably wants to add this urls too just in case you’re using debug_toolbar and serving media elements in a development enviroment:

    if settings.DEBUG:
        import debug_toolbar
        urlpatterns += patterns(
            '',
            url(r'^__debug__/', include(debug_toolbar.urls)),
            url(r'^media/(?P<path>.*)$', 'django.views.static.serve',
                {'document_root': settings.MEDIA_ROOT, }),
        )
    
  • Execute a syncdb command in your django project:

    ./manage.py syncdb
    
  • See the list of Settings to modify Django Compressor’s default behaviour and make adjustments for your website.

Dependencies

Other required packages

In case you’re installing Django-rgallery differently (e.g. directly from the repo), make sure to attach it in develop mode:

python setup.py develop

This ensures that you install all the required dependencies.

Template dependencies

Django-rgallery templates have some functionality that depends on software like jquery or dropzonejs. You have to install and link them from your django project site_base.html template. The static files dependencies are the following:

At this point, a good recommendation to work with static files as packages for install, update new versions... is bower. You can just install bower in your system, create a bower.json a .bowerrc files like the following ones and type a:

bower install

bower.json

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "~1.9.1",
    "bootstrap": "~3.0.3",
    "font-awesome": "~4.0.3",
    "mediaelement": "~2.13.1",
    "jquery-colorbox": "~1.4.26",
    "dropzone": "3.10.2",
    "select2": "3.5.2",
    "jquery-cookie": "~1.4.1"
  }
}

.bowerrc

In the .bowerrc file we can configure where to store the bower installation, in this case project/static/vendors will do the job:

{
    "directory" : "project/static/vendors"
}

site_base.html

We have to put all the css/js referencies and links in our project site_base.html, let me show you a sample:

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'vendors/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'vendors/mediaelement/build/mediaelementplayer.min.css' %}">
<link rel="stylesheet" href="{% static 'vendors/jquery-colorbox/example3/colorbox.css' %}">
<link rel="stylesheet" href="{% static 'vendors/dropzone/downloads/css/dropzone.css' %}">
<link rel="stylesheet" href="{% static 'vendors/select2/select2.css' %}">
<link rel="stylesheet" href="{% static 'vendors/select2/select2-bootstrap.css' %}">
....
<script type="text/javascript" src="{% static 'vendors/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/transition.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/alert.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/modal.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/dropdown.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/scrollspy.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/tab.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/tooltip.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/popover.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/button.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/collapse.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/carousel.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/bootstrap/js/affix.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/jquery-colorbox/jquery.colorbox.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/mediaelement/build/mediaelement-and-player.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/dropzone/downloads/dropzone.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/select2/select2.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendors/jquery-cookie/jquery.cookie.js' %}"></script>

Optionally you can add your own custom css/less/js files:

<link rel="stylesheet" href="{% static 'less/custom.less' %}" type="text/less">
...
<script type="text/javascript" src="{% static 'js/custom.js' %}"></script>