I'm using Jekyll for my blog, and I'd like the ability to use unique CSS styling in particular posts. Right now, I'm specifying a CSS file in the YAML frontmatter like so:
style: artdirection.css
and using it in the layout like this:
{% if page.style %}
<link rel="stylesheet" href="{{ page.style }}">
{% endif %}`
This works, but I'd prefer to include the actual CSS styling in a style tag in the page's frontmatter instead of linking to a style sheet.
I've tried dealing with this in a couple of ways, including the method described here, but the variable that I capture is only usable inside the post itself, not in the layout.
So, is it possible?
I'm pretty sure this would work:
---
title: xxx
style: |
/* You can put any CSS here */
/* Just indent it with two spaces */
/* And don't forget the | after "style: " */
h2 {
color: red;
}
---
Your markdown/textile goes here. h2s will be red
And then in your layout:
<style type="text/css">
{{ page.style }}
</style>
And that should be it.
Jekyll 3 breaking change
Now variables declared in the layout front-matter (_layouts/default.html) are visible via:
{{ layout.style }}
instead of the older:
{{ page.style }}
https://github.com/jekyll/jekyll/issues/4123
Related
In a flask project, using BeautifulSoup I am using the following front-end design from codepen.io
https://codepen.io/drehimself/pen/QNXpyp
in my html template. I have a web scraped list of images and want to display them instead of the existing image using jinja2.
Notice that the images are contained in the CSS.
.clash-card__image {
position: relative;
height: 230px;
margin-bottom: 35px;
border-top-left-radius: $border-radius-size;
border-top-right-radius: $border-radius-size;
}
.clash-card__image--barbarian {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
img {
width: 400px;
position: absolute;
top: -65px;
left: -70px;
}
}
Up until now, I have managed to use jinja2 to display images in the html or body part of the template.
As the images are in the CSS, I have tried this, but it doesn't work.
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{images");
{% endfor %}
I have tried various iterations of the above, but can't get the image to display. I can however, get the TITLE to display because it is in the html.
The other problem is that the list is not fixed in size. I want the cards to replicate without my having to put in the {{image}} jinja reference in each css reference.
My question is: How do I correctly put the jinja2 reference to the image in the list of images in the css?
Any best practices and suggestions also appreciated.
I hope my example meets your requirements. I think if you define the background images directly in the element you will save yourself a lot of trouble.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- All resources from Clash of Clans Cards -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<link rel="stylesheet" href="{{ url_for('static', filename='main.css')}}" />
<!-- End of resources from Clash of Clans Cards -->
<style type="text/css">
.clash-card__image {
background-color: #1e1e1f;
background-size: contain; /*cover or contains; decide for yourself*/
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="slide-container">
{% for image,title in images_titles %}
<div class="wrapper">
<div class="clash-card" style="padding-bottom: 3.5rem;">
<div class="clash-card__image" style="background-image: url({{image}});">
</div>
<div class="clash-card__unit-description">
{{ title }}
</div>
</div>
</div>
{% endfor %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
(function() {
var slideContainer = $('.slide-container');
slideContainer.slick();
$('.clash-card__image img').hide();
$('.slick-active').find('.clash-card img').fadeIn(200);
// On before slide change
slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-active').find('.clash-card img').fadeOut(1000);
});
// On after slide change
slideContainer.on('afterChange', function(event, slick, currentSlide) {
$('.slick-active').find('.clash-card img').fadeIn(200);
});
})();
</script>
</body>
</html>
I'm guessing you may be trying to use Jinja expressions in a CSS file which is included as a static asset (via a tag like <link href='/some/file.css />).
This won't work as these external assets are never processed by Jinja.
A quick workaround for this may be to keep this in the HTML template by including it in the <head> as follows:
<head>
<link rel='stylesheet' type='text/css'>
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{image}}");
}
{% endfor %}
</link>
</head>
EDIT:
what is the best practice for this as surely it is something that is often required
CSS files are, by their nature, static. Modern methods of static asset deployment may put those assets on a CDN (or if using a reverse proxy like nginx have the static folder served by nginx, so the WSGI/app server doesn't even know about them).
With that in mind, this template probably isn't built with dynamic image URLs in mind. On a closer inspection it appears that it's only loading a background image within the CSS, and the actual character image is loaded within an <img> tag. So you're probably looking at two ways in which images are loaded within this template.
Since you're asking about the background image, you could change it with Javascript. Something like:
var elem = document.getElementsByClassName('clash-card__image--barbarian')[0];
elem.style.backgroundImage = "url('http://localhost:5000/some_image.jpg')"
You could then, for example use the fetch API to load the URL string dynamically from an endpoint whtin your app. This probably involves some more Javascript work, which is difficult to expand on within the context of this question.
Without Javascript, if you're placing that character image with Jinja2 syntax, perhaps doing something like:
<div class="clash-card__image clash-card__image--archer">
<img src="{{image}}" />
</div>
You could avoid putting the CSS block in the <head> by modifying that parent div to load the CSS via a style tag:
<div style="background: url('{{bg_image}}');"
class="clash-card__image clash-card__image--archer">
then remove that declaration from the external CSS file.
This has the same effect as placing the CSS within the <head> in the template file: it's all rendered by Jinja2 on page load.
The following piece of code works well in bokeh version 1.0.4, that is to say my RadioButtonGroup is well cut into several lines, but it is doesn't work in version 1.1.0: all Buttons are on the same line and outside of the 500 width!!!!
I do some trial with various sizing mode but without any effect on the automatic cut into several line
from bokeh.models.widgets import RadioButtonGroup
output_file('ulk.html')
buttongroup = RadioButtonGroup(labels=["Option {:d}".format(i+1) for i in range(100)])
save(widgetbox(buttongroup,height=500,width=500))
Thank you by advance for your help
A temporary work-around would be to apply a custom styles using the bokeh server directory-structure like this one below. Run your code using: bokeh serve --show myapp
directory structure:
myapp
|
+---main.py
+---templates
+---index.html
+---styles.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</body>
</html>
styles.css
.bk .bk-btn-group
{
display: inline;
}
.bk .bk-btn
{
height: 25px;
width:70px;
}
Result:
I have followed https://django-tables2.readthedocs.io/en/latest/pages/tutorial.html to create a table. I have managed to rezise the table:
python version: 3.5.2
django version: 1.11.2
tables.py:
import django_tables2 as tables
from .models import Person
class PersonTable(tables.Table):
class Meta:
model = Person
attrs = {'class': 'paleblue','width':'300%'}
people.html:
{% load render_table from django_tables2 %}
{% load static %}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="{% static 'django_tables2/them/paleblue/css/screen.css' %}" />
</head>
<body>
{% render_table table %}
</body>
</html>
I cannot see any option to change the size of bottom border in the docs ?
Alternatively I have tried to change screen.css to remove the borders, but changes has no effect. The link is active when I click view page source even if I rename screen.css.
You should resize the container around the table and the pagination, which for the default template has class table-container.
You should use some CSS to make that container wider, something like
<style>
.table-container {
width: 300%;
}
</style>
You should remove the width attribute from the table definition, as it will make the table 3 times as wide as the container.
I can't fins any information on how to define css or javascript files in a view like:
class MyView(View):
....
class Media:
css = { 'all' : 'mystyle.css' }
If you have a form you can do like:
class MyForm(ModelForm):
....
class Media:
css = { 'all' : 'mystyle.css' }
And then in the template you can print the files like;
{{ form.media.css }}
I like that Syntax very much and I like to keep the View-specific css files in the app-directory.
Does anyone know if it's possible?
Thanks!
I imagine you should be able to set a variable with the css filename/location in your view, and if you pass that variable to the render/response you should be able to access it in your template.
Take a look at https://docs.djangoproject.com/en/dev/ref/templates/api/#variables-and-lookups
example:
def my_view(request):
stylesheet = {"css": "my_view.css"}
return render(request, 'myapp/templatename.html', stylesheet,
content_type="application/xhtml+xml")
and them templatename.html would be
<link rel="stylesheet" type="text/css"
href="{{ MEDIA_URL }}{{ stylesheet["css"] }}" media="screen"/>
I am using django_compressor.
In template :
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8">
{% endcompress %}
In settings :
DEBUG = True
MEDIA_URL = '/media/'
INSTALLED_APPS = [
'compressor',
// Here other installed app.
]
But When I do these things my css is not getting uploaded. When I remove the {% compress css %} tag My css start rendreing. Where I am doing mess? Can any one suggest me?
I would check two things:
if compress has access to the file itself
is generated file (e.g. under /media/cache/....) is accessible by browser
In settings COMPRESS is a boolean that decides if compression will happen. Default value is the opposite of DEBUG. So you should change DEBUG = True to DEBUG = False.
(https://github.com/carljm/django_compressor)