I am translating an html tooltip using i18n which does not show when it is between translation tags {% translate ... %} unless spaces are removed.
Code without translate tag:
<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= 'Some normal text (NT) with spaces.'><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>
The code with translation tag shows only the first word before the white space.
<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some normal text (NT) with spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>
When the white spaces are removed with _, the whole text shows even if between the {% translate .. %} tag.
<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some_normal_text_(NT)_with_spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>
Anyone knows how to show the whole text with white spaces?
The single quotes in the translate tag demarcate the string, but aren't part of it. So when it's translated, you have no attribute quotes for title.
title= {% translate 'Some normal text (NT) with spaces.' %}
Should be
title= "{% translate 'Some normal text (NT) with spaces.' %}"
Or
title= {% translate '"Some normal text (NT) with spaces."' %}
Otherwise the browser is assuming the first word is the string, because there are no quotes to encompass the rest of the string.
Related
I'm working on a jekyll project which requires me to create a code-snippet includable element. The code to include an element looks like this:
{% include callouts/codeSnippet.html
title="The title of the snippet"
bodyText="'Lines of code', 'for(as many as you need) {', ' indented with spaces', '}' "
%}
This is handled by the include file codeSnippet.html, which contains the following:
<div class="row codeSnippet">
<div class="col-md-1">
<i class="fa fa-file-alt" aria-hidden="true"></i>
</div>
<div class="col-md-11">
<h1>{{ include.title }}</h1>
{% assign rows = include.bodyText | split: ',' %}
{% for row in rows %}
<div class="snippetField">
<span class="lineNumber">{{ forloop.index }}</span> {{ row | remove: "'" }}
</div>
{% endfor %}
</div>
</div>
Unfortunately, it seems that when liquid receives the four spaces before 'indented with spaces' it removes them before displaying the output, so the output generated by Jekyll is this:
<h1>The title of the snippet</h1>
<div class="snippetField">
<span class="lineNumber">1</span> Lines of code
</div>
<div class="snippetField">
<span class="lineNumber">2</span> for(as many as you need) {
</div>
<div class="snippetField">
<span class="lineNumber">3</span> indented with spaces
</div>
<div class="snippetField">
<span class="lineNumber">4</span> }
</div>
Immediately after writing this, I discovered the HTML <pre></pre> container, which supports preformatted text and seems to solve the problem.
More on the pre tag here: https://www.w3schools.com/tags/tag_pre.asp
TLDR: Jekyll / Liquid work fine, and it's just the general way that HTML works that requires the use of the Pre tag.
I want to show some list of data into HTML. While showing the data I have enclosed that data into form tag but while printing it not coming in a single line
Input:-
<ul id="myUL" style="display:flex;flex-wrap:wrap;list-style:none">
{% for tagname in globalKeywordList%}
<li style="display:inline;">
<form action="searchKeyword/{{tagname}}" method="POST">
{% csrf_token %}
<button class="btn btn-link" type="submit" name="mostRelevant" data-toggle=”button” value="mostRelevant" style="background-color:transparent;padding:0;margine:0">{{ tagname }}
</button> |
</form>
</li>
{% endfor %}
</ul>
Output:-
As shown in the picture if the sentence is too long then it won't start from the previously closed data, some space is left blank and then started
How to resolve that problem ??
How can I write numbers in a cell inside Bootstrap table in accounting format?
For example: one million should be shown as 1,000,000 and not 1000000 (notice commas ',' between digits).
Please note that data data is getting filled by Django app.
Example:
<tbody>
{% for row in tbl_list %}
<tr id="port_row_{{row.stock}}_{{index}}">
{% if row.stock == 'TOTAL'%}
<td> {{row.stock}}</td>
{% else %}
<td> <a target="_blank" style="color:blue;" href="https://www.google.com/finance?q=NSE:{{ row.stock }}">{{row.stock}}</a></td>
{% endif %}
<td>{{row.name}}</td>
<td>{{row.investment_amount}}</td>
<td>
{% if row.weekly_gain >= 0 %}
<div style="color:green">
+{{row.weekly_gain}}
<i class="fa fa-arrow-up"></i>
</div>
{% else %}
<div style="color:tomato">
{{row.weekly_gain}}
<i class="fa fa-arrow-down"></i>
</div>
{% endif %}
</td>
<td>{{row.percentage}}</td>
<td>{{row.percentage_of_portfolio}}</td>
</tr>
{% endfor %}
</tbody>
It depends on where the data is coming from, but you will need to use something like Javascript to do this.
See this question for more information.
You can use the javascript accounting.js library:
// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00
Since the question was specifically for Django templates, I used django.contrib.humanize when rendering price.
A set of Django template filters useful for adding a “human touch” to data.
To activate these filters, add 'django.contrib.humanize' to your INSTALLED_APPS setting. Once you’ve done that, use {% load humanize %} in a template, and you’ll have access to the following filters.
Documentation
In your code, do <td>{{ row.monday_open_price|intcomma }}</td>
Do not forget to {% load humanize %}
I've got this YAML front matter on each post:
---
title: Title
subtitle: Description
date: 2017-09-26 13:15:18 +0200
post-type: front-end
tages:
- HTML
- CSS
- jQuery
---
And I've got this code to show each tag in a list.
{% for tag in page.tags %}
<a class="btn btn-primary" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }}</a>
{% endfor %}
Now I want to add a font-awesome icon inside each tag by adding:
<span class="badge badge-light"><i class="fab fa-..."></i>
Like so:
{% for tag in page.tags %}
<a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab fa-github"></i></span></a>
{% endfor %}
Now here's my problem. What I want to accomplish is to manually assign a font awesome icon link to a tag. And when fill in one or more tags in the YAML front matter I want said font awesome link to come with it. But I have no clue how to do it. I'm kinda new to Jekyll.
My first thought was to somehow use config.yml but again I didn't know how to approach it or what question to formulate in google. I was hoping one of you could point me in the right direction.
I think that you have two opportunities for doing so. You either have a key value pair in a seperate or same yaml which maps tag to icon or you make your tags list more complex with an item type describing both tag and icon. I will give you a brief sample of what I try to explain.
Sample 1
post.yaml
tags:
- HTML
- CSS
- jQuery
mapping.yaml (seperate file that has to be parsed by your code yet, name it as you want it)
tags:
HTML: fa-html
CSS: fa-css
jQuery: fa-js
In your template you would get the font awesome icon class name like so:
// ... load mapping yaml somewhere over here into `mapping` variable
{% for tag in page.tags %}
<a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag | slugify }}" rel="tag">{{ tag }} <span class="badge badge-light"><i class="fab {{ mapping.tags[tag] }}"></i></span></a>
{% endfor %}
{{ mapping.tags[tag] }} resolves your class name by key (given the tag)
Sample 2
tags:
- name: HTML
icon: fa-html
- name: CSS
icon: fa-css
- name: jQuery
icon: fa-js
In your template you would get the font awesome icon class name like so:
{% for tag in page.tags %}
<a class="btn btn-primary mr-1 mb-2" role="button" href="/tags#{{ tag.name | slugify }}" rel="tag">{{ tag.name }} <span class="badge badge-light"><i class="fab tag.icon }}"></i></span></a>
{% endfor %}
Do not forget to think about a fallback if no icon is provided. I'm not sure which technology you are using, that's why all of my code is pseudo. However you should make sure to fallback to a default class maybe - or at least to some point prevent ugly exceptions within your HTML.
I would like to list the Lego sets I used to build my models just like tags but in a separate list. According to the pelican documentation this should be possible. But when I run pelican content I get
Tags Animal / Duplo / MOC
Sets 1 / 0 / 5 / 7 / 1
instead of
Tags Animal / Duplo / MOC
Sets 10571
I modified the pelican-bootstrap theme from Daan Debie by adding {% include 'includes/setlist.html' %} to article_info.html.
This is what my setlist.html file looks like:
{% if article.sets %}
<span class="label label-default">Sets</span>
{% for set in article.sets %}
{{ set }}
{% if not loop.last %}
/
{% endif %}
{% endfor %}
{% endif %}
This is what my markdown file looks like:
Title: Girafe
Date: 2015-11-29 14:22:20
Modified: 2015-11-29 14:22:27
Category:
Tags: Animal, Duplo, MOC
Sets: 10571
Slug: girafe
Authors: Yann Baumgartner
![Girafe][girafe]
[girafe]: {filename}/images/girafe.jpg "Girafe"
I read through all the pelican questions on stackoverflow but couldn't find an answer. I tried the following:
If I use the taglist code within setlist without changing any
variables then the tags are displayed correctly
Renaming the variable
name to set_numbers didn't work.
Removing set.url didn't work.
Am I missing something (a template file, a jinja2 filter)? Any hint would be much appreciated.
pelican doesn't process any non-standard metadata. It'll be left as a string. So, article.sets will be a single string containing "10571". If you loop over that, you'll get individual characters. You need to process it yourself via a plugin or inside your template like:
{% if article.sets %}
<span class="label label-default">Sets</span>
{% for set in article.sets.split(',') %}
{{ set|trim }}
{% if not loop.last %}
/
{% endif %}
{% endfor %}
{% endif %}
PS: Also, I'm not sure what you expect the set.url to be. Again, since pelican doesn't do anything special with your custom metadata, it will be basic string and it won't have an url.