Skip to main content

A Django CMS plugin that provides responsive, full screen background media with text.

Project description

https://travis-ci.org/tdsymonds/djangocms-background-media.svg?branch=master https://coveralls.io/repos/github/tdsymonds/djangocms-background-media/badge.svg?branch=master&t=1:target:https://coveralls.io/github/tdsymonds/djangocms-background-media?branch=master https://img.shields.io/badge/pypi-v1.0.0-blue.svg https://img.shields.io/badge/license-MIT%20License-red.svg

djangocms-background-media

This is a simple django-cms plugin that provides responsive, full screen background media with text.

A HTML div container is added to the page that can either have a background image or video. Video backgrounds are enabled by making use of the Vide jQuery plugin. Child plugins are enabled, so text and/or hyperlinks etc can be placed on top of the background media, see usage below for more details.

Installation

To install:

pip install djangocms-background-media

Then add djangocms-background-media to your installed apps:

INSTALLED_APPS = [
    ...
    'djangocms_background_media',
    ...
]

If you’re not already using django-filer and easy-thumbnails then these too will need to be added to your installed apps:

INSTALLED_APPS = [
    ...
    'easy_thumbnails',
    'filer',
    ...
]

And run the migrations:

./manage.py migrate

The package assume that jQuery has been added to the site already. So if you’re not using, please add to you templates/base.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Usage

The background media plugin is added to a page and configured accordingly. If a background image is all that is required, then an image is uploaded, the container height can be updated, and optional overlay added and that’s all. If a video background is required then a video is uploaded and a video poster should be provided, as this is what will be displayed for mobile browsers. You’re also able to pass a JSON config object if you wish. More details of the video plugin can be viewed on Vide.

I have provided the ability to link an optional style sheet to the page, so that the plugin will work “out of the box”, if you don’t link the style sheet you will need to provide your own styling.

To add text, links or another plugin to the background media plugin, simply add the child plugins you desire.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

djangocms-background-media-1.0.0.tar.gz (401.8 kB view hashes)

Uploaded Source

Built Distribution

djangocms_background_media-1.0.0-py2-none-any.whl (416.0 kB view hashes)

Uploaded Python 2

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page