How to check development mode in OctoberCMS? - livereload

I've got a .env file with this content:
APP_ENV=dev
in the root of my project which shows that I am in the development mode
and therefor my config files will be loaded from config/dev directory instead of config directory.
Now I want to add live reload to my html page by including the following script:
<script type="text/javascript">document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')</script>
But I only want this to be included if I am in development mode, not in production. How can I do this?

As luketowers answered on October's Slack channel:
https://octobercms.com/docs/markup/this-environment
So for your example you’d do something like this:
{% if this.environment == 'dev' %}
<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>
{% endif %}

Related

Show the download button only if file is available on server in Django template (html)

I am using the following template code to show the Download option on the webpage.
<a href="{%static 'media/finance'%}/sap-daily.csv" download >Download</a>
But I want to only show the Download option if the file is present on the server and otherwise show not available option.
I am using python 2.7 and django 1.6.7 .
What you can do is check if the file exists in your views.py with
from pathlib import Path
my_file = Path("/path/to/file")
if my_file.is_file():
show_link = True
Then in your template HTML:
{% if show_link %}
<a href="{%static 'media/finance'%}/sap-daily.csv" download >Download</a>
{% endif %}

How to remove ellipsis set by the browser by default?

I've been given a task of displaying files hosted on a webserver(jekyll) via a webpage using iframe. Iframe lists all the files. Though the view is not as pretty as an embedded Google Drive link.
However, there are 2 major issues with this:
The filenames are being truncated - "abc..." and on the browser I see ellipses and I'm not able to reverse this.
All the pdf files are getting downloaded as opposed to opening in a new tab which would have been possible via embedding a Gdrive link (the idea is to move files to a static folder on the web server instead of Gdrive)
I have read most articles. Even if the second issue is not solvable, I am interested in learning how to solve the first issue.
I'm able to inject my own CSS like this:
<script>
$( document ).ready(function() {
$('iframe').each(function(){
console.log("here");
function injectCSS(){
$iframe.contents().find('head').append(
$('<link/>', { rel: 'stylesheet', href: '{{ site.col_url}}/static/xyz/xyz.css', type: 'text/css' })
);
}
var $iframe = $(this);
$iframe.on('load', injectCSS);
injectCSS();
});
});
</script>
I would like to see the complete file names being listed on my webpage. I am not allowed to use a scripting language since the whole system is built in Markdown format
Set the below option on your vhost file, if you are using Apache
IndexOptions NameWidth=*
Ref: https://www.networkworld.com/article/2311687/showing-long-file-names-in-apache-directory-listings.html
Use can use the directory plugin https://github.com/sillylogger/jekyll-directory to display the files in your static folder. This gives full filenames and its better than using iframes. By default your chrome browser renders pdf and jpg images in a new tab as opposed to downloading them. Just take care of bad urls. To get the last modified date, use the gem file https://github.com/gjtorikian/jekyll-last-modified-at
Your code looks like this:
{% directory path: <provide a path to your static folder> %}
<a href="<static_path>/{{ file.name }}" datetime="{{ file.date |
date_to_xmlschema }}">{{ file.name }}</a>
{% enddirectory %}
Additionally, to get the last modified date:
Last Modified on {{ page.last_modified_at|date_to_string}}

Jekyll responsive_images gem throwing errors when trying to work with gh-pages

I've been working on my portfolio site using jekyll, and everything seems to work just great locally. So, the next step for me was to push it up to github inside a gh-pages branch, and when I do that, I receive an email with the error below.
The tag responsive_image on line 20 in _layouts/post.html is not a recognized Liquid tag.
The gem that I'm trying to use is Jekyll Responsive Images.
Like I said before, when I run jekyll serve, I get no errors and I can run my jekyll site just fine locally, but for some reason this error is keeping my site from working with github. My post.html file looks like this.
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
In my _includes folder, I had to make a include for the responsive_images gem and it looks like this
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
And here's my config.yml file for anyone wondering
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: test#test.com
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
Has anyone had this problem with the responsive images gem? I can't seem to google an answer to this. Any help would be greatly appreciated.
Jekyll responsive images is a Jekyll plugin and you cannot add your own plugins to github pages. This is a restriction by github due to security reasons.
Here is the related page on github and here is the list of plugins that are officially included by github in the github server and can be used.
You can try Picturefill instead.
In fact, you're not allowed to use most of Jekyll plugins when hosting on GitHub for security reasons.
A good way out is uploading the static site generated by Jekyll, so GitHub won't build your site, it will only display it as plain html. To do that, the only thing you need to do is pushing to GitHub the _site content only.
Another way out is using GitLab Pages instead. There you can use as many plugins as you want, as the building process is controlled by yourself through a configuration file called .gitlab-ci.yml. A full tutorial on this process is to be published soon.
The only feature GitLab.com doesn't have yet is the possibility of setting custom domain names for websites build by GitLab Pages. But it's coming soon.
Hope to have helped!
It is important to say that this is not a recommended way, but it works for me. I feel like the other answers were a bit to: No you can't - do this.
Yes you can. But as Virtua Creative suggests - you need a workaround. Especially if you are using a custom domain.
I myself had problems with the jekyll-responsive-image for resizing and lazy load on my Jekyll site.
It is not a supported gem.
Example
First if all make your _site repository a git repository.
and remove CNAME from .gitignore.
When you are finished working locally then build:
jekyll build
Afterwords add a CNAME file to your build:
touch _site/CNAME
Echo your domain into it:
echo 'www.your_domain.com' >> _site/CNAME
And then you can push to your github pages repository (also from parent).
Ekstra
Next time you can create a custom command in your bash to automate.
My .zshrc:
alias jekyll_build_cname='jekyll build && touch _site/CNAME && echo "www.instamoneyservices.de" >> _site/CNAME'

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

Where is "root_url" in Octopress?

Maybe this is some kind of Jekyll setting or something but I need to set root_url to something other then "/" and I can't figure out where to do it.
In the .themes/classic/source/_layouts/default.html file, there is {% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}.
site.root is configured in _config.yml which defaults to root: /.
If you are testing with http://127.0.0.1:4000/ which is the default settings for jekyll local development, you can change it to root: http://127.0.0.1:4000/. Then the path will be correct. For example, <link href="{{ root_url }}/favicon.png" rel="icon"> will be resolved as <link href="http://127.0.0.1:4000//favicon.png" rel="icon">.
In short, changing the line root: / in the _config.yml will do.
Sorry for asking too quickly. You can find the settings in _config.yml. I thought I checked there but I must have opened one of the other two config files twice.