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>