I would like to render different html for desktop and mobile on jekyll. I need something like:
{% if is_mobile %}
<!-- mobile html -->
{% else %}
<!-- desktop html -->
(% endif %}
Obviously I could just use javascript in the browser to determine this but I don't want to render the extra html for mobiles.
Maybe I could create a jekyll plugin and register the liquid tag but how can I get access to the user agent? Is there anyway I can get access to HTTP request parameters?
In your layout you could use:
<div class="mobile">{% include mobile.html %}</div>
<div class="desktop">{% include desktop.html %}</div>
Then you should let js decide which one to show, as liquid has no access to the user agent.
Since you're using Jekyll I'm guessing you're not working with a backend which is typically how you'd process the User-Agent.
Perhaps your best approach is using accessing navigator.userAgent variable using plain-old Javascript.
More info here: Getting the User Agent with JavaScript
Related
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.
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.
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>
currently I'm working on static website, so I'm using jekyll to generate it. To have a nice structure and fancy URLs, I use permalinks.
permalink: /impressum/
So for example the impressum.html is rendered to impressum/index.html. And in my HTML i can simply link to that file with
<a href="/impressum">
That works for me very well. But you know, I'm a programmer. What if I want for example to change the URL to /imprint/? Well, I can change the permalink without any problems. But what's about all the other links on the site? Yeah, sure, I can use the search & replace function of my editor to change the linked URLs and check the whole site with a site checker for broken links, but that's not the fancy way I want to go. That's why I tried to create some kind of global variables with the permalink.
_config.yml:
lnk_impressum: /impressum/
impressum.html
---
layout: layout
title: Your New Jekyll Site
permalink: {{ site.lnk_impressum }}
---
But that does not work. I get this error:
Generating... error: no implicit conversion of Hash into String. Use --trace to view backtrace
So what's wrong or is there a better way?
It doesn't seem to be possible to place Liquid tags inside the YAML Frontmatter or _config files, per this SO answer.
Something else you could try is based on the approach used by the documentation pages for Bootstrap, which uses a Page Variable they call slug that provides a unique, unchanging reference to each page.
For instance, if you'd like to place a link to your impressum.html page (for which the permalink could change), you can place this code on another page, such as index.html:
{% for mypage in site.pages %}
{% if mypage.slug == 'impressum' %}
Link to Impressum page
{% endif %}
{% endfor %}
Then, in the YAML frontmatter for each of your pages, place code similar to the following:
---
slug: impressum
permalink: /my-permalink-to-impressum/
---
To change your permalinks in the future, you would just make the change to the Page Variable permalink in each page. The URLs referenced in your other pages would be automatically updated by Jekyll, as long as the slug variable remains unchanged.
I would like to make a categories page.
{% for post in site.categories[CATEGORY_NAME] %}
<li>{{ post.title }} ({{post.date|date:"%-d %B %Y"}})</li>
{% endfor %}
Is it possible to use a page parameter to fill in CATEGORY_NAME? Then I could have one file category.html which could serve as the index page for multiple categories (i.e. category.html?name=food and category.html?name=animals.
I've found a few plugins that handle this, but it seems like overkill to require a plugin.
https://github.com/zroger/jekyll-categories
http://blog.nitrous.io/2013/08/30/using-jekyll-plugins-on-github-pages.html
Here's the most related forum post I could find.
https://groups.google.com/forum/#!topic/jekyll-rb/y-dq-63Uvy4
If I can't do this without a plug in, is there a good reason?
I think the correct answer is that Jekyll pages must be compiled to html before they are served. This is not possible if the liquid language takes a parameter.