jinja2 template char limit - jinja2

in {{blog.content}} I want to limit the viewer to see only 50 char at most, how can I do that using jinja2?
After searching through their documentation I have found that {{ s|autolink[ length[ nofollow]] }} has a length property but it will make it auto link! Which I don't want it to be.

Have you tried the python slice notation?
{{ blog.content[:50] }}

The documentation for jinja2 says to use {{ blog.content|truncate(50) }}. Thats what I have been using thus far.
You can find the docs for template here.

It's works for me:
{{article.content|safe|truncatechars:50}}
use this -> truncatechars:XX <- type here
See DOC is here

Related

How to match a hexadecimal value in liquid templates with regex?

Desired result
Content editors can enter hexadecimal values in Shopify for a background-color. How can you check with Liquid template's control flow if a given input is a valid hexadecimal?
The regex that needs to be implemented:
^#(?:[0-9a-fA-F]{3}){1,2}$
The Liquid snippet where it should be added:
<div class="a-module" style="background-color: {{ bg_color }};">
...
</div>
The variable bg_color may only be a hexadecimal including the pound # character.
How can above be achieved with regex?
Other solutions?
If this is not possible what are other methods to match a string in liquid templates?
Research
I could not find much about regex in liquid templates.
There is this issue: Regex for matching a tag in a Liquid template : ">" inside html tag
But I do not understand how it is to be implemented.
There is no regex in Shopify liquid, so there is no way to check it that way.
A better approach will be to use one of the color filters.
You can do something like this:
{% assign is_color = bg_color | color_to_rgb %}
{% if is_color %}
It's color
{% endif %}
Where if the color is valid it will return a rgb output, but if it's not it will return a null result making the variable false.
If you really need to use regex, the only option is to rely on Javascript and handle it once the DOM is ready.
What about create your own filter. And in this filter checking hexadecimal.
/^#[0-9a-f]{3,6}$/igm
https://github.com/Shopify/liquid/wiki/Liquid-for-Programmers#create-your-own-filters

How to save and show data submitted from texterea editor (tinymce)?

I am developing a website which contain a post submission. When I save the data from texterea, I noticed that the data is in html format rather than plain text. So, what is the best way to show the data in an article format? I am using tinymce editor.
I'm using laravel, thus I just simply use
auth()->user()->posts()->create([
'article' => $data['article'],
]);
To call, I use {{$data->article}}. Please noted that, I only specifically show how I save only textera input.
This is my output
Output
This is database
Database image
This is expected ouput, without html tag.
Expected output
Try this:
{ !! $data->article !! }
Blade statements {{ }} are sent to htmlspecialcharacters() to prevent XSS attacks. If you do not want your html to be escaped you have to use this syntax -> {!! !!}
https://laravel.com/docs/8.x/blade#displaying-unescaped-data
You can display html content by many ways in laravel. Here are some examples
Method 1:
#php
echo $data->article;
#endphp
Method 2:
{{ !! $data->article !! }}
Method 3:
{{ !! htmlspecialchars_decode($data->article) !! }}
OR
{{ !! html_entity_decode($data->article) !! }}
Update: Simply use <?php echo $post_data->article;?> will do the job. Can anyone explain the reason?
Output

Formatting flask-wtf submit button using bootstrap

I'm using jinja to render a flask-wtf submit button as follows:
{{ wtf.form_field(form.submit) }}
This results in a button formatted in btn-default bootstrap format (white). I'd like to change this to btn-success bootstrap format (green).
How can I achieve this?
As suggested by #dpgaspar the solution was to use button_map as follows:
{{ wtf.form_field(form.submit, button_map={'submit':'success'}) }}
If you are using wtf.quick_form, use the form like this.
{{ wtf.quick_form(form, button_map={'submit':'success'}) }}
I presume you are also using flask-bootstrap.
On the flask-bootstrap Jinja2 macros you have:
{% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
{{field(class='btn btn-%s' % button_map.get(field.name, 'default'), **kwargs)}}
{% endcall %}
You should use if you can the button_map to do it [see details in comments below]
If you are using flask-bootstrap, use the form with button_map as suggested by #dpgaspar,
For whole form - wtf.quick_form:
{{wtf.quick_form(delete_form, button_map={'name_of_field': 'danger'})}}
For individual field, wtf.form_field:
{{wtf.form_field(delete_form.delete, button_map={'delete': 'success'})}}
Flask-Bootstrap official documentation says:
button_map – A dictionary, mapping button field names to names such as primary, danger or success. Buttons not found in the button_map will use the default type of button.

Is there a way to evaluate string with liquid tags

I need to provide page content reference list (it should contain references on sections on page).
The only way which I can see is to use page.content and parse it, but I stumbled on problem with data evaluation. For example I can pull out this string from page.content: {{site.data.sdk.language}} SDK but there is no way to make jekyll process it, it outputs as is.
Also I want to make it possible to create cross-pages links (on specific section on page, but that link generated by another inclusion and doesn't persist in page.content in HTML form).
Is there any way to make it evaluate values from page.content?
P.S. I'm including piece of code which should build page content and return HTML with list (so there is no recursions).
P.P.S. I can't use submodules, because I need to run this pages on github pages.
Thanks.
Shouldn't {{ site.data.sdk.language | strip_html }} do it? I don't know, most probably I didn't understand the problem. Can you elaborate more? Maybe provide a link to a post you're referring to?
Thinking about the similar
{% assign title = site.data.sdk.language %}
which is a stock Liquid tag and does the job well, so instead of
{% section title={{site.data.sdk.language}} %}
write your code as
{% section title = site.data.sdk.language %}
The key here is that once you enter {%, you're in Liquid. Don't expect Liquid to go "Inception" all over itself. {{ is just a shorthand for "print this to output", but an parameter passing is not output, it's just reading a variable.
You should be able to also go wild and do:
{% section title = site.data.sdk.language | capitalize %}
For more re-read the docs: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

Liquid turn string into url link

I have the following code in a liquid template:
{{ sample.url }}
Coming from jinja2 I was hoping for something like this:
{{ sample.url|urlize }}
Does this exist in liquid?
I've seen the liquid documentation and couldnt find any reference to that, but as the documentation sayed you can write your own filter to do that.
Take a look here.