Rakeback.com - Don't play poker without it


Working with Images in Django CMS

Django Images

The Django Content Management System can be fiddly when working with images.

Unlike e.g. WordPress, images don't automatically have a neat amount of white spacing (12 to 16 pixels or so) around them once you insert them into a page.

Not only do the margin spacings have to be inserted manually, it isn't readily possible to have spacing only on one side in Django.

To achieve this requires a minor thirty second hack:

1. Set the vertical and horizontal space to different numbers above zero, as shown right (I used 1 and 16 pixels).

You can change these in a moment.

2. Open the HTML editor using the button labelled 'HTML' in the page backend.

3. Do a CTRL+F search for 'margin' to find the HTML code controlling the four image margins (white spacing). It'll look something like this:

Django Image HTML

4. Set the left or right margin to zero, as required - you won't see these unless you follow step one. Instead there'll just be two margins to edit in the HTML rather than four.

5. Set the top and bottom margin back to zero too.

I set the image at the top of this page, for example, to have a right margin of zero pixels, and a left margin of 16 pixels (up to personal preference).

Awkward Spacing Example

martin-jacobsonThis image was placed just using the default insert image box, to 16 pixels horizontal space.

As you can see it annoyingly adds the white space to both left and right of the image, looking out of alignment and terribly unsightly on the published page.

Use the HTML hack above to fix dilemmas such as this.

Neat Spacing

martin-jacobsonNow it's fixed - and another helpful tip is that images can be resized in the CMS without becoming pixellated, and without you needing to use external tools like simpleimageresizer.com ( still useful for other stuff).

To do this, increase only one size dimension in the edit image box, and delete the other dimension, if it's visible.

For example I selected the image above, clicked the 'insert/edit image' button, and then increased the X dimension, setting the Y dimension blank.

The image then keeps its aspect ratio automatically, and doesn't lose clarity.


One final tip is that the correct page width (on this website at least) is 660 pixels, so when adding a Youtube video, adjust the width in the HTML code to the page width (done automatically in WordPress).

Video not Page Width

Video Page Width

And similarly for any page width images in Django.

The code to insert YouTube videos into CMS pages (non news) on Rakeback.com is:

youtube src="0lZguwLWTS8" width=660 height=315

With [[double square brackets]] around it.

Then for /news/ pages you need to take the embed code directly from under a YouTube video. Then open HTML mode, find the width and change to 660 pixels.

Then the code to add social sharing buttons like the ones below in CMS pages is social_box with double brackets (not necessary on /news/ pages as it's there by default).