Snippet 7: adding plugins for endless-pagination, facebook login, autocomplete, and PIL

Super awesome email from my best bud Ant (shout-out here) to add several frequently used plugins for our django project. All these works to a T for me. Thanks Ant!

1) Added pagination (Django-endless-pagination)

Key feature: allow us to extract chunk by chunk from database and present it on front-end in pages. Clean display and efficient database extraction. Can possibly do the facebook endless scroll display too.

To get it go to terminal and type:

$ pip install django-endless-pagination

2) Added facebook login: (Django allauth)

To get it installed on ur local comp go to terminal and type:

$ pip install django-allauth

If that gives errors during runtime, den get addional support by going to terminal and type:

$ pip install -e git://github.com/pythonforfacebook/facebook-sdk.git#egg=facebook-sdk

If that still fails, go to settings.py and set:

USE_TZ = False

3) Added an autocomplete plugin (django selectable)

Key feature: allow autocomplete from our database, works with foreignkey, manytomany etc..

To get it installed:

$ pip install django-selectable

4) Impt restructuring – images: Add PIL

First get python imaging library (PIL) installed:

Step 1 – Get JPEG support:

$ curl -O http://www.ijg.org/files/jpegsrc.v8c.tar.gz

$ tar zxvf jpegsrc.v8c.tar.gz

$ cd jpeg-8c/

$ ./configure

$ make

$ sudo make install

Step 2 – Get Freetype support:

curl -O http://ftp.igh.cnrs.fr/pub/nongnu/freetype/freetype-2.4.5.tar.gz

tar -xvzf freetype-2.4.5.tar.gz

cd freetype-2.4.5

./configure

make

sudo make install

cd ../

 

Step 3 – install PIL

$ pip install PIL

Images are now stored in the following fashion:

All images still have 1 link, for example:

Images.link = “ngo_images/HueHelp/1.jpg”   (previously “/site_media/images_beta/ngo_images/HueHelp/1.jpg”)

You can access the different sizes of the image by concatenating that to the following:

/site_media/images_beta/thumbnail/ – 60px by 60px (~1-4kb)

/site_media/images_beta/small/ – 300px by 300px (~20kb)

/site_media/images_beta/large/ – 900px by 900px (~100-200kb)

/site_media/images_beta/original/ – whatever

So for example if you are passing an ngo object, and you want to display the link to its logo:

<img class=”ngo_avatar” src=”/site_media/images_beta/small/{{ngo.logo}}” alt=”{{ngo.name}}”/>

Advertisements
This entry was posted in Snippets. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s