I am trying to render some Angular2 code using Jekyll and Liquid. Here's what I start with
{% highlight html %}
<button (click)="action('dec')">Decrement</button>
<span>{% raw %}{{count}}{% endraw %}</span>
<button (click)="action('inc')">Increment</button>
{% endhighlight %}
And this is what I get
The red squares have been added automatically. How do I remove them?
In your _sass/_syntax-highlighting.scss remove styles for the .err class
.err {} // Error
Related
I'm trying to change the color of a button depending which home country the user is from. But my rendering does not work/ does not override the current css. Is this line of code correct?
{% if {{custom_attribute.${home_country}}} == 'DE'%}
<div class="button-right btn btn-next" style="background:#992B82 !important;">
<a><p> NEXT</p></a>
</div>
{% else %}
<div class="button-right btn btn-next" style="background: #F1287E !important;">
<a><p> NEXT</p></a>
</div>
{% endif %}
If anyone is familiar with Braze, liquid conditional rendering, and if it is possible. Im grateful for any answers!
I want to display S1 only instead of season 1. Thus I need to truncate season and put only 1 and add "S" at the front.
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">
{{ all_episode.season}}
</a>
How do I truncate the word "season"?
Edit:
Here's what I did again
I created templatetag folder inside my app
then added init.py and seasonify.py
and inside seasonify.py I added
from django import template
register = template.Library()
#register.filter
def seasonify(value):
return value.replace('season', 'S')
then inside my template
I added
{% load seasonify %}
and {% episode.season|seasonify %}
Your best bet is to write a custom template filter. The logic is simple:
#register.filter
def seasonify(value):
return value.replace('season', 'S')
then simply use it in your templates:
{{ all_episode.season | seasonify }}
See Django docs for details on where to put this code.
I have a content type with a field field_gallery that has multiple images.
I would like to get all these images printed in my twig file: page--front.html.twig. So i want to get these images in my frontpage and not only in their nodes. So far i could get them in their nodes with
{{ file_url(node.field_image.entity.fileuri) }}
but not somewhere else (of course since its using node). Is this possible?
Should i create a preprocessor function for page? Any guidance for this?
Yes, This is possible. This question is have two sub tasks :
1) Creating page--front.html.twig file
For creation of this twig file, you'll have to clone file i.e. page.html.twig and rename it with page--front.html.twig
2) Fetch Raw values of Image fields
You need to update code in my .theme file:
function THEMENAME_preprocess_node(&$variables) {
if ($variables['node']->field_image->entity) {
$variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
}
}
Then in page--front.html.twig file I have this:
{% for item in image_url %}
<div class="featured-thumb">
<img src="{{ item }}"/>
</div>
{% endfor %}
I have this piece of code inside Twig loops that will render beautiful color to every first letter of key=>value
<i class="avatar avatar-color-95 avatar-letter-c">{{ firstletter(message.firstname)}}</i>
But I want this to display color in dynamic way, different colors depending the length of the value
{% for message in pagination %}
{% set namecount = message.firstname | length %}
{#{ dump(namecount)}#}//outputs number(length)
<div class="container avatar">
<i class="avatar avatar-color-12 avatar-letter-c">{{ firstletter(message.firstname)}}</i>
{% endfor %}
I want to do it like this
<i class="avatar avatar-color-{{ namecount }} avatar-letter-{{firstletter(message.firstname)}}">
How do you do it? I tried to put qoutes between
"{{namecount}}"
and
"{{firstletter(message.firstname)}}
But it doesnt work. I cant find any docs for this in Twig docs,.How do you do it?
From the comments section...
You could just use <i class="avatar avatar-color-{{ message.firstname|length }} avatar-letter-{{ message.firstname|slice(0, 2) }}">.
Unless you are going to be using the variable again there's not much point in setting a variable rather than calling the filter/function inline.
on my site i have lists using two different kinds of styles for list items. Their occurance is uneven.
For now i edit these lists manually in html. I would like to put them inside an array in the YAML front matter and let jekyll generate the appropriate lists.
Example:
My idea is to put all list items in an array in the YAML front matter and tag those, which should be italic, with a string like 'ITALIC_':
list: [ITALIC_Main, 300g tomatoes, 1 mozzarella ball, ITALIC_Dressing, olive oil, vinegar, ...]
Is it possible to check not only the array for a certain string but
the array items too?
How can i filter the tagged array items and apply a certain css class via Jekyll?
Thanks for your help!
Vin
I think you have a modeling problem ;-) You're mixing datas and style : No Goood !
I propose a more dissociated solution, with organized datas on one place and presentation in an other.
It can be something like this :
---
title: recipe
layout: default
recipe:
ingredients:
main:
- ingredient1
- ingredient2
dressing:
- ingredient3
- ingredient4
optional:
- ingredient5
operations:
.... To be continued ...
---
<h2>Ingredients</h2>
{% for part in page.recipe.ingredients %}
<h3>{{ part[0] }}</h3>
<ul>
{% for ingredient in part[1] %}
<li>{{ ingredient }}</li>
{% endfor %}
</ul>
{% endfor %}
<h2>Operations</h2>
{% for part in page.recipe.operations %}
To be continued ...
(Not tested) You can write it as: ITALIC_Main_ and in the template loop just remove the ITALIC with
{{ site.list.item | remove_first: "ITALIC" }} - this will leave you with _Main_ which is converted to italic style in markdown.