I use jekyll code highlight with gem rouge.
Templates - Jekyll • Simple, blog-aware, static sites
Code (index.html)
---
layout: default
---
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:red;">
{% highlight ruby %}
def hoge
puts 'red'
end
{% endhighlight %}
</div>
<div class="col-sm-8" style="background-color:blue;">
{% highlight ruby %}
def foo
puts 'blue'
end
{% endhighlight %}
</div>
<div class="col-sm-2" style="background-color:yellow;">
{% highlight ruby %}
def bar
puts 'yellow'
end
{% endhighlight %}
</div>
</div>
</div>
Result
Commit
https://github.com/shingo-nakanishi/jekyll-dojo/tree/ca564cd5653e7ee028cd30b87c04a6076f078693
Point
{% highlight ruby %}
def bar
puts 'yellow'
end
{% endhighlight %}
is the unnecessary indent was gone. but unreadable html code. the unnecessary break line not gone.
How to remove them?
The newlines and extra indentation are being preserved inside the highlight tags - similar to how text inside an HTML pre tag is displayed by default. The first newline is trimmed, but the final newline is preserved since it is followed by whitespace.
This produces the output you want, at the cost of source indentation:
<div class="container-fluid">
<div class="row">
...
<div class="col-sm-2" style="background-color:yellow;">
{% highlight ruby %}
def bar
puts 'yellow'
end
{% endhighlight %}
</div>
</div>
</div>
Alternatively, you could capture the output above your markup to keep your source indentation:
{% capture code %}
def bar
puts 'yellow'
end
{% endcapture %}
<div class="container-fluid">
<div class="row">
...
<div class="col-sm-2" style="background-color:yellow;">
{% highlight ruby %}{{ code }}{% endhighlight %}
</div>
</div>
</div>
highlight tag is made to preserve code indentation, just like the html pre tag does.
If you want correct a indentation, you must remove unwanted spacing.
The extra line is due to indentation before closing {% endhighlight %}. For liquid it's a new line.
Related
I have different styles of heading in a 5- column layout newspaper template. I want to apply different css to the title of each column. The queryset is the {% block content %}How can I iterate over the queryset objects and apply different css to each {{ post.title }} variable? Note: html truncated for brevity.
<div class="content">
<div class="columns">
{% block content %}
{% endblock %}
</div>
<div class="column">
<div class="head">
<span class="headline hl1">May the Force be with you</span>
<p><span class="headline hl2">Let go your conscious self and act on instinct</span></p>
</div>
</div>
</div>
i think that {% cicle %} will help you.
{% for o in some_list %}
<div class="{% cycle 'class1' 'class2' 'class3' %}">
...
</div>
{% endfor %}
more about built-in template tags you could read
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#cycle
I have to icons on a product page (Shopify's theme). I have the following code that displays the icons correctly, except I don't know how to display them inline. I tried wrapping everything in a div or a span with no luck. Here's the code:
<div class="barra-de-info">
{% for tag in product.tags %}
{% if tag contains '_hecho _en _mexico' %}
<div class"icono-hecho-en-mex" style="width: 80px;">{% include 'icon-hecho-en-mexico' %}</div>
{% endif %}
{% endfor %}
{% if product.price >= 60000 %}
<div class"icono-hecho-en-mex">{% include 'icon-free-shipping5' %}</div>
{% endif %}
</div>
I have a working solution for a template that allows for optional sidebars. Depending on the options selected by the user; significant DOM manipulations occur.
The working solution is unnecessarily large and features some code duplication. It also doesn't extend nicely.
I'm looking for a far more generic solution. One that allows for easier extending or abstracting so as to not have to repeat myself for every page that features a sidebar.
The Working Solution
{% extends "app/base.html" %}
{% load wagtailcore_tags %}
{% block content %}
{% if self.sidebar == "left" %}
<div class="row">
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
<div class="8u 12u(mobile) important(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
</div>
{% elif self.sidebar == "right" %}
<div class="row">
<div class="8u 12u(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
</div>
{% else %}
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
{% endif %}
{% endblock %}
{% block content %} is first defined here in app/base.html:
<div id="main-wrapper">
<div class="container">
<!-- <article class="box post"> -->
{% block content %}{% endblock %}
<!-- {% include 'app/includes/prev_next.html' %} -->
<!-- </article> -->
</div>
</div>
And sidebar.html looks like this:
{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
<section class="box">
{% image sidebar_item.image original as img %}
<img src="{{ img.url }}" alt="" />
<header>
<h3>{{ sidebar_item.title }}</h3>
</header>
<p>{{ sidebar_item.body }}</p>
{% if sidebar_item.button_text %}
<footer>
{{ sidebar_item.button_text }}
</footer>
{% endif %}
</section>
{% endfor %}
My initial attempt at generalising it was to try to do all of the conditionals in app/base.html but I faced issues when it came to optionally the location of {{ block content }}.
Any help greatly appreciated.
If the condition to decide type of sidebar are being decided and supplied by the views.py function serving the page, then the best approach would be to simply make different template for each different page.
This solution sounds overly simple, but if correctly modularized(in terms of all the common code being kept in a basefile and being extended as and when needed), this would be the best approach. Even though the number of other templates might increase, it will give shorter load times because of smaller HTML snippets.
In case you do not want the conditional decisions being handled by views.py , you can alternatively use AJAX, and asynchronously change the template being viewed without causing a reload.
Hope this helps!
So here's my problem: I've got a bunch of instances of a class. I would like to have a sort of table of these instance objects, so that there is a maximum of six in every row. In bootstrap terms, I would like each object to be represented by a thumbnail in a "div" of class "span2".
My initial impulse was to use a nested for loop, but I am having trouble manipulating my index variable in the template, and I can't figure out how to do so outside of my template.
Here is generally what the python/django template/pseudo code is I'm trying to figure out.
queryset = Class.objects.all()
set_length = queryset.count()
num_rows = set_length/6
#because I want 6 columns in each row, each with one instance
set_as_list = list(queryset)
# have a list so I can iterate through objects by index
for i in range(table_rows):
# make a row
<div class="row">
for j in range (i*6,(i+1)*6):
#make six or less columns
<div class="span2">
<p>set_as_list[j].attribute1</p>
<p>set_as_list[j].attribute2</p>
</div>
</div> # end row
I hope this flagrant mixing of django templating language, python, and html doesn't offend anybody too badly. just trying to express the idea of what I'm trying to do. I would appreciate any help someone may be willing to offer because I've been struggling with this for days and have done quite a bit of searching for a solution both within a template and outside.
I also realise that there will be need to be a final row with the remainder of objects after the integer division.
Have no time to explain, but I've had similar problem and until i closed this browser page here is a solution
{% for sub_article in articles %}
{% if forloop.first %}<div class="row">{% endif %}
<div class="col-xs-4">
<a href="#">
{{ sub_article.name }}
</a>
</div>
{% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
{% if forloop.last %}</div>{% endif %}
{% endfor %}
Since forloop.counter starts the index with 1, divisibleby 3 does not work.
So use forloop.counter0 instead.
<div class="row">
{% for product in all_products %}
{% if forloop.counter0|divisibleby:3 %}
</div><br><div class="row">
{% endif %}
<div class="col-4"></div>
{% endfor %}
I would recommend to add a custom tag as_chunk. I think it makes the code prettier and more readable.
# app/templatetags/my_tags.py
from math import ceil
from django import template
register = template.Library()
#register.filter
def as_chunks(lst, chunk_size):
limit = ceil(len(lst) / chunk_size)
for idx in range(limit):
yield lst[chunk_size * idx : chunk_size * (idx + 1)]
# app/templates/your-template.html
{% load my_tags %}
...
{% for chunk in elements|as_chunk:6 %}
<div class="row">
{% for element in chunk %}
<div class="col-2">
{{ element.name }}
</div>
{% endfor %}
</div>
{% endfor %}
...
maybe too late but there is simple solution as follow
<div class="container">
<div class="row">
{% for product in products %}
{% if forloop.counter0|divisibleby:3 and not forloop.first %}<div class="w-100"></div>{% endif %}
<div class="col">{{product.title}}</div>
{% endfor %}
</div>
</div>
You could make the code a bit more generic. Here's the logic:
queryset = Class.objects.all()
set_length = queryset.count()
<div class="row">
{% for i in queryset %}
<div class="span2">
<p>i.attr</p>
<p>i.attr</p>
</div>
{% if forloop.counter|divisibleby:"6" or forloop.last %}
</div> <!--end row-->
{% endif %}
{% endfor %}
I hope this solves your problem :-)
I am trying to grasp the usage of Django's cycle template tag. My layout in my html is 3 post from right to left and 5 posts from top to bottom. I used the cycle tag so that right after the sixth post a horizontal bar goes under the whole width of my row. I want to put ads there. So it looks like this
123
456
---
123
456
789
I kind of figured it out after playing around with the code for a while. My dilemma now is I want to put the code for my ad where the bar is. but the code is to long and if I go to a new line, even if I use this \ it still scrambles my html. The way I have it now is like this
{% block content %}
<div class="row" id="scheme">
{% for post in posts %}
<div class="col-xs-12 col-md-4" id="split">
<div class="thumbnail thumb">
<h6 id="date">{{ post.publish|date }}</h6>
{% if post.image %}
<img src="{{post.image.url}}" class="img-responsive post">
{% elif post.image_url %}
<img src="{{post.image_url}}" class="img-responsive post">
{% else %}
<p>upload an image</p>
{% endif %}
<div style="border-bottom: thin solid lightslategray; padding-bottom: 15px;"></div>
<div class="caption" id="cap">
<a href="{{ post.get_absolute_url }}">
<h5 class="post-title" id="title">{{post.title}}</h5>
</a>
{% if user.is_authenticated %}
<p>
delete
edit
</p>
{% endif %}
</div>
</div>
</div>
{% cycle "" "" "" "" "" "<div id='adspace' class='col-xs-12 col-lg-12' style='height:200px; background-color: #5b80b2; margin-bottom: 60px'></div>" "" "" "" "" "" "" "" "" "<div class='col-sm-12'></div></div><div class='row'>" %}
{% endfor %}
</div>
{% include "pagination.html" with page=posts %}
{% endblock content%}
The cycle template is way to long. I'm hoping there is a more sophisticated way of doing this. What is a better way to use the cycle tag or rather a shorter way? I'm open to any suggestions. Thanks all.
To insert something special after the sixth item in the loop, just use the forloop counter (docs):
{% for post in posts %}
... Post content here
{% if forloop.counter == 6 %}
<div id='adspace' class='col-xs-12 col-lg-12' style='height:200px;
background-color: #5b80b2; margin-bottom: 60px'></div>
{% endif %}
{% endfor %}
Similarly you can add other content at other specific counter points in your loop.