Import a static HTML website to Django CMS - html

I have designed and coded a website (with bootstrap 4) and now I would like to import it in Django CMS so the client can edit the content.
Any tips or guide that helps me to achieve this?
Thanks a lot

You have to make it into a template and import the information itself separately. Add new template to settings.py.
If your client already has a basic template that you're editing you may simply edit his existing files and CSS. Alternatively, you may also download/import an existing template and use it as your base for editing.
The template itself will look something like this: default template: base.html,
{% load i18n %}
{% extends 'base.html' %}
{% block title %}Title Here{% endblock %}
{% block content %}
{% endblock %}

#A-creative At first you should copy Bootstrap 4 static files (css and js) into your "projectname/appname/static" dir, run "python manage.py collectstatic" and then just copy your Bootstrap-ready html into the cms using Style, Text and Snippet plugin fields (Admin > Create new page > Edit > Add plugin/block > ...). You should do it page by page.
I doubt there is a shorter way... Yeap, and your should use a standard minimalistic template as mentioned by #Patriot to avoid dealing with template issues and plugin / html issues at the same time.

Related

Django-CMS admin tool Template

I have created html template named testTemplate which is added to CMS_TEMPLATES:
CMS_TEMPLATES = (
## Customize this
('fullwidth.html', 'Fullwidth'),
('sidebar_left.html', 'Sidebar Left'),
('sidebar_right.html', 'Sidebar Right'),
('testTemplate.html', 'testTemplate')
)
Then in fullwidth.html file I have changed the {% extends "base.html" %} to {% extends "testTemplate.html" %}. In testTemplate.html file I can find few {% placehoders %}. And now if I want to go to django-cms to add a content to placeholders, my cms-admin does not look right. Layout of cms admin looks like the template elements. How to separate the cms-admin template and my site template to make it work correctly?
I'm not sure I completely understand your issue. Are you wanting to use testTemplate.html instead of base.html or are you wanting to insert testTemplate.html between base.html and fullwidth.html?
If you want to replace base.html, then I would simply save testTemplate.html in the same location as base.html and not bother registering it with CMS_TEMPLATES. Registering with CMS_TEMPLATES simply makes these templates available to your pages in cms-admin. If testTemplate.html is not a final template that you will want to use then you don't need to register it here. Note that base.html is not registered here for that very reason. Another approach would be to rename base.html as something else and renaming testTemplate.html to base.html, effectively replacing it if you don't want to use the original, which means you wouldn't need to change any of the dependant templates.
If you are trying to insert testTemplate.html between base.html and fullwidth.html, that is a different kettle of fish. You will need to make sure you have all your blocks nested correctly and you'll need to post some more details like your html code for each page for people to be able to assist you.

Performance hits from loading Django static tag multiple times

Unless I am doing things wrong, it seems like if you have nested templates (i.e., {% include %} a template within a template), you will sometimes need to call {% load static %} in multiple "layers" of the nest. For example, say I have templateA.html:
{% load static %}
<a href={% static "some/path" %}>Some Link</a>
{% include 'templateB.html' %}
And then in `templateB.html, I have:
{% load static %}
<a href={% static "some/other/path" %}>Some Other Link</a>
As far as I can tell from testing, I must include {% load static %} in both templates, because templateB.html does not know that I have already loaded the {% static %} tag.
My question is this:
Assuming that it is necessary to load the {% static %} tag twice (or more times depending on the amount of nesting), is there going to be a performance hit from this extra loading?
I am not sure what Django does under the hood when you load this tag, but my intuition is that you don't want to be loading and reloading static files. (Since we are talking about an open source project, I did actually try to look under the hood myself at how this templatetag is implemented, but it proved to be a little beyond my comprehension...).
Also, this question assumes that it is necessary to always load the tag this way. If there is something I am missing, I would be very interested to learn more. Thank you!
You have to write the tag in every template. In case of performance, you need not to worry as it never reloads or loads a separate new copy of static files.
There is no overhead. load static does not "load and reload static files"; it just makes available the (already-loaded) code in the staticfiles templatetags library for use in your template.
By using load you adding tags and filters from some app into the context for the current template. It just calls parser.add_library() for parser and updates the list of tags and filters for this particular template. You can check this method, and it gets called from load tag
If you don't want to load something you can add it in the builtins. For Django 1.9 you can configure it like this
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'builtins': ['django.templatetags.static'],
},
},
]
and for older versions
from django.template.loader import add_to_builtins
add_to_builtins('django.templatetags.static')

External HTML file in Django

I'm making Django app in which I need to embed many external HTML files in the template. Each HTML file is stored in its own directory, along with the subdirectory that contains all the images. The file structure:
Abstract1
Pictures
image1.png
image2.png
abstract1.html
I use a custom template tag for embedding (see below). My problem: the HTML files are loaded, but linked resources (e.g. img) are not working properly (i.e. they're not being displayed). HTML files use relative urls, which, mixed with the django template base path produce invalid url, but even if I use hardcoded absolute urls the problem remains. I feel like I'm missing something obvious. Is there some proper (or not proper but working) way to overcome such problem?
template
{% load abstracts_extras %}
<!DOCTYPE html>
<html>
<body style="margin-left:10px">
<h2>{{abstract}}</h2>
<b>Authors:</b><br/>
<ul>
{% for author in authors %}
<li>{{author}}</li>
{% endfor %}
</ul>
<p>
<b>Title: </b>{{abstract.title}}
<p>
<hr>
{% include_external filename|add:'.html' %}
</body>
</html>
abstracts_extras
from django.template import Library
register = Library()
def include_external (url):
url = 'file:///' + url
import urllib2
return urllib2.urlopen (url).read ()
If I am understanding well, your templates load but not statics like img.
It would be a configuration error.
You should check both settings.py for Django and httpd.conf for Apache and check staticfiles are properly configured.
Have you any error shown or just images are not loaded (but no error)?

Aldryn NewsBlog - one particular blog instance multiple times

I am using aldryn-newsblog, and would like to include the top three first blog posts to my home/index page, along with other elements like a gallery slider and a newsletter sign up.
How can I render the first three blog post from the aldryn news-blog into the tpl_home.html template used on my home/index page?
This is the default tpl_home.html template:
{% extends "fullwidth.html" %}
{% block body_class %}tpl-home{% endblock %}
This is the default article_list.html:
{% extends "aldryn_newsblog/two_column.html" %}
{% load i18n cms_tags %}
{% block newsblog_content %}
{% render_placeholder view.config.list_view_placeholder language placeholder_language %}
<div class="aldryn-newsblog-list">
{% for article in article_list %}
{% include "aldryn_newsblog/includes/article.html" %}
{% empty %}
<p class="well">{% trans "No items available" %}</p>
{% endfor %}
</div>
{% endblock %}
{% block newsblog_footer %}
<div class="aldryn-newsblog-pagination">
{% include "aldryn_newsblog/includes/pagination.html" %}
</div>
{% endblock %}
I have basically tried to copy the content of the article_list.html file to the tpl_home.html, as well as changing the aldryn_blog/two_column.html
from {% extends "aldryn_newsblog/base.html" %}
to {% extends "base.html" %}
But all I get is the "No items available" error, from the article_list.html.
I have also tried to add the blog instance to the home page using the django-CMS GUI, but keep getting this error "An application instance using this configuration already exists.".
Is there a way to include one particular blog instance multiple times on different sites?
This is a little old at this point, but for anybody who stumbles across it:
You don't need to touch {% extends <anything> %} -- anytime you use the extends tag, it's going to pull in the entire page that follows it, which will either result in an error, an extremely funky page, or just generally undesired results. Depending on your setup, there are two methods to accomplish what you're trying to do:
1. Using the Aldryn setup.
As far as articles_list.html goes, that's simply one piece of your blog page's puzzle: The one that lists the articles. What you're looking for can be done entirely through the front-end editing, with the "Latest Articles" plugin. Below is the structure laid out by default for my tpl_home.html:
This doesn't need to go into the "Header" section -- you can arrange the order of appearance however you like.
It's a perfect plugin for your needs, as you can specify the number of selected articles to be shown once you've clicked on the plugin, as well as which blog (if you have more than one) you'd like them to come from:
You should see this when you click on the plugin.
As for the gallery slider: I've never used it, but I do have the Aldryn Gallery package installed, and it has the option displayed in the link below, so I believe that's the route you'd take to get that on your page. It can be installed through the "Manage Addons" page on your site's dashboard.
For a newsletter, Aldryn Mailchimp can also be installed via the "Manage Addons" page, but you'll first need to sign up for a free Mailchimp account on their site (linked to in the package details) to get an API key (this must be entered on the package's installation page before the installation will initiate). I've never personally used Mailchimp, but most newsletter services require you to give them $$$. Mailchimp kinda rocks, because it offers a free usage level that should be quite capable of handling your site's needs (12,000 emails a month are allowed). It also offers a ton of features for managing your campaigns/formats/other stuff (I haven't really looked into it). It's email submission form should be available as a plugin, just like "Recent Articles" and "Gallery," once installed.
Now onto...
2. Not Using Aldryn.
However you're using Aldryn-NewsBlog, the normal plugins should still be available, and it can be downloaded on github. How to use them, exactly, depends on your admin setup -- but you should still be able to use the "Latest Articles" plugin, with the same methods, if you have the package properly installed.
Same for your gallery slider: Download and install Aldryn-Gallery from GitHub, and you should be good to go with the slider option.
With Mailchimp, you can just go to their site, and they'll explain how to integrate their service into virtually anything from there. I don't have enough repo points to post more than two links, but evidently iframes in snippits don't count as links (so take that, stackexchange rules!) Run the snippit for a Mailchimp newsletter install video:
<iframe src="//fast.wistia.net/embed/iframe/5ou4sscmze" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"
oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="600" height="400"></iframe>

Django css file not working

I've been looking around everywhere and trying everything but i cannot seem te get my css file to work in a Django template.
My css i called style.css
the code in the template right now looks like:
{% load staticfiles %}
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" type="text/css" media="screen" />
I'm still working on the development server.
In settings py I added:
STATICFILES_DIRS = (
"home/henk-jan/website/Template/Database")
django.contrib.staticfiles is installed in Installed_apps
can anyone help me with this?
Cheers, Henkes
Edit: My template (index.html) is in the same folder as my style.css the folder is: /home/henk-jan/website/Template/Database
From looking at your original post it would appear to me that your working at rendering your page from two separate angles.
First, you have {% load staticfiles %} which will load the templatetags associated with the staticfiles module. Second, inside your link element you are referencing {{ STATIC_URL }} which gets expanded via context.
From this I would recommend one of the following two courses of action.
1 - Utilize the staticfiles module and the templatetags you loaded in your template.
To do this you should modify your link element to read like this:
<link rel="stylesheet" href="{% static "style.css" %}" type="text/css" media="screen" />
Note that in this instance I have replaced the {{ STATIC_URL }} with the {% static %} templatetag. The {% static %} templatetag takes an argument which is the file you wish to prefix with the static URL, and expands into the complete string.
2 - Make use of context by modifying your view to render with context.
The {{ STATIC_URL }} variable is made available via request context. There are a number of useful variables that are, that you can rely on to get expanded if you want to utilize them. The trouble is that you have to ensure that you render your template with context which means you would potentially have to change one or more views.
As an example an overly simple view that renders without context would look like:
from django.shortcuts import render_to_response
def index_without_context(request):
return render_to_response("index.html")
While the same overly simple view rendered with context would look like this:
from django.shortcuts import render_to_response
from django.templates import RequestContext
def index_with_context(request):
return render_to_response("index.html",
context_instance=RequestContext(request))
As I stated above, by rendering your template with a RequestContext you get other variables and such that can be of use so it is a very viable option.
In the end it really depends on where you want to keep the logic that ensures your static files get your static URL rendered correctly at. If you want that logic inside the template itself I would recommend you go with the {% load staticfiles %} approach and use the {% static %} template tag. If you prefer to make use of the {{ STATIC_URL }} variable as well as having other potentially useful variables available then I would recommend modifying your view to be rendered with a RequestContext.
You can read more about the difference between using the context processor or a template tag in the Django docs section about this very topic:
https://docs.djangoproject.com/en/1.4/howto/static-files/#referring-to-static-files-in-templates
Is "home/henk-jan/website/Template/Database" a valid location? Maybe "/home/henk-jan/website/Template/Database" instead? Right now the preceding forward slash is missing.
If you are working on the development server, you will want to let Django serve the static content. When you go to production you will have your web server handle serving static content instead.
You will want STATIC_URL pointing to the path to your static content (in this case it looks like that would be /Template/Database/. It sounds like you have that working. Now you just need to tell Django to serve static content when in DEBUG mode. See this post: Django MEDIA_URL and MEDIA_ROOT