Context value / variable not rendered inside blocktrans template tag - django-templates

I've a context processor which adds objects (i.e. site) to the template context but the value is not rendered inside the {% blocktrans %} template tag. Outside the template tag, the value prints just fine.
<h1>{% trans "About" %} {{ site.domain }}</h1> <!-- works -->
{% blocktrans %}
{{ site.domain }} <!-- doesn't work -->
{% endblocktrans %}
How do I get the object's attribute / variable to render inside {% blocktrans %}?

Interpolated variables cannot be dotted expressions - you need something like this:
{% blocktrans with site_domain=site.domain %}{{ site_domain }} is a ...{% endblocktrans %}
See also:
Django documentation: blocktrans template tag
Question: django blocktrans and i18n in templates

Related

Django concatenate variables in template

I'm trying to pass django queryset to hidden div as a cvs to allow copy text within div. So far i'm doing this as shown below:
<div class="invisible text-nowrap" id="report" style="white-space: nowrap;" >
{% for item in queryset %}
{{ item.name }},{{ item.priority }}, {{ item.location }} # and so on many times
{% endfor %}
</div>
but method shown above is breaking into new line and it looks as below for instance:
some_name,priority_3,CR LF
main_building
Is there any way to prevent line breaks in line ? I was trying to use '|add' but it is showing error probably beacause of different types of variables in single 'item'. Maybe there is something similar to {{ item.name + item.priority }} or any different solution ? If so please let me know.
Thank you in advance

How to make PyCharm autocomplete VueJS code in *.html (django template)

We use VueJS inside Django templates. Every template has it's own VueJS app.
base.html
<div id="vue">
{% block content %}
{% endblock %}
</div> ...
page.html
{% extends "base.html" %}
{% block content %}
...
<div v-if="..."..</div>
{% endblock %}
<script>
new Vue({...
</script>
The problem is that PyCharm doesn't recognize that we use Vue so it doesn't highlight or autocomplete things like v-if etc...
In*.vue files, everything works correctly.
Is there a way to inject the language to the file or another way to tell PyCharm that we use Vue?
EDIT
When I go to Editor -> File Types -> Vue.js Template, there is only *.vue pattern. So I try to add *.html but PyCharm warns me This wildcard is already registered by HTML filetype Reassign wildcard?

How to add css class to specific text.md file

I’m using Grav modular pages to build a site but can’t find how to target a specific module to add a css class.
I have found this https://learn.getgrav.org/16/content/media but can’t see if there’s a way to do this.
What I’m trying to achieve is have a different background for each modular div in the page.
In the template : shared class for all modules
As a module implies, for its displaying, to browse the paren'ts page collection in the Twig template of that parent, you can add any HTML and CSS there.
For instance, here is one way of looping through the collection :
{% for module in page.collection %}
<section class="module">
{{ module.content }}
</section>
{% endfor %}
In the template : specific class
You can customize the CSS class by playing with a Twig variable. The most secure way is to use the slug of the page, wich has already escaped characters :
{% for module in page.collection %}
<section class="module_{{module.slug}}">
{{ module.content }}
</section>
{% endfor %}
In the markdown
You can use the already existent options to define CSS :
classes: module1
and then use it in the Twig, by using the header() function :
{% for module in page.collection %}
<section class="module_{{module.header.classes}}">
{{ module.content }}
</section>
{% endfor %}
Target a specific module
Now, for targetting a specific module in Twig, you have to import a page.
Here's the generic way of accessing an other page or sub-page content :
{% set imported_page = page.find("/route/to/the/page") %}
You can then use the header() and content() functions to access that imported page's frontmatter and content :
<section class="module_{{imported_page.header.classes}}">
{{ imported_page.content }}
</section>

edit or change injected content from {{ content_for_header }}

There is a fb pixel still imbedded in the header of my shopify store. using the facebook pixel helper it says I still have a fb pixel in my header. I looked into it and saw it is in my {{ content_for_header }}.
I have tried .remove() and | remove: and I still have the fb pixel in the header of my theme.liquid
You can't use replace or remove filter on content_for_header
It's not recommended to modify the content_for_header but, I will show you how to modify it.
First, comment it
{%- comment -%}
{{ content_for_header }}
{%- endcomment -%}
This will let you update the file with theme watch
Second, Use capture for custom content_for_header
{% capture custom_content_for_header %}
{{ content_for_header | replace: 'your-text-to-be-replaced', 'new-text'
{% endcapture %}
Last, print your custom content for header
{{ custom_content_for_header }}
You can remove or replace strings like below
Replace
{{ content_for_header | replace: 'string to be replaced', 'inserted' }}
To remove
{{ content_for_header | remove: '' }}
Otherwise you can't really edit {{ content_for_header }}

Referencing pages with no properties in Liquid conditionals for Shopify store

I successfully implemented a slider that shows different content on each page of a Shopify store. Out of the five pages where I would like to put unique content (an about page, a blog feed, another manually added static content page, the homepage, and the catalog page), I can't provide unique content for the homepage and the catalog page because I can't reference them in liquid.
I created a test snippet to show all potentially useful variables in order to discover a means of referencing my pages in a conditional:
<div class="grid__item__nm--wrap">
<span><h1>THIS IS WHAT THE PAGE HANDLE IS:</h1> {{ page.handle }}</span>
<span><h1>THIS IS WHAT THE PAGE TITLE IS:</h1> {{ page.title }}</span>
<span><h1>THIS IS WHAT THE PAGE TEMPLATE SUFFIX IS:</h1> {{ page.template_suffix }}</span>
<span><h1>THIS IS WHAT THE PAGE ID IS:</h1> {{ page.id }}</span>
</div>
(Note: The above snippet works fine and doesn't need troubleshooting. I post it as a succinct way to demonstrate what I'm doing.)
Including this snippet in theme.liquid works for all the pages I added to the navigation and for the "About Us" page, showing the different propertiers. However, nothing is output for any of the properties on the homepage or the catalog page.
The best I can do is to show the same content on the homepage and catalog page through the "else" case. This is not good enough. I want different content for the homepage and catalog page. In fact, ideally I would like to exclude the catalog page (but not the homepage) from the inclusion of the snippet that generates the slider. I don't know how to do either of those things without having any properties to use for referencing the catalog page.
According to Shopify schema, a page is something with the url as follow - //mystorelink.com/pages/page-handle . So when you use {{ page.title }} it will display the page title only when the url is in the above format.
Don't confuse between a "Shopify page" and a "webpage" for both are completely different.
A Shopify page is a template while a webpage is a normal html page. In order for your requirement refer to following link types and templates
/ or //myshoplink.com -> index.liquid -> {{ page_title }} & {{ page_description }}
/collections/xyz -> collection.liquid -> {{ collection.title }} & {{ collection.description }}
/products/xyz or /collections/abc/products/xyz -> product.liquid -> {{ product.title }} & {{ product.description }}
/pages/xyz -> page.liquid -> {{ page.title }} & {{ page.description }}
etc similarly for other templates.
P.S. You can have multiple product/collection/pages etc. templates using suffix values, but {{ <template>.title }} remains the same
P.P.S. If nothing is to be changed you can plainly use {{ page_title }} and {{ page_description }} everywhere. It defaults to the template currently in use.
For the benefit of anyone else, here is a more comprehensive testing snippet for finding identifiers to use in Liquid conditionals, based on the accepted answer:
<div class="grid__item__nm--wrap">
<span><h1>THIS IS WHAT THE SHOPIFY PAGE TITLE IS:</h1> {{ page.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE HANDLE IS:</h1> {{ page.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE TEMPLATE SUFFIX IS:</h1> {{ page.template_suffix }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PAGE ID IS:</h1> {{ page.id }}</span>
<span><h1>THIS IS WHAT THE RENDERED PAGE TITLE:</h1> {{ page_title }}</span>
<span><h1>THIS IS WHAT THE RENDERED PAGE META DESCRIPTION IS:</h1> {{ page_description }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION TITLE IS:</h1> {{ collection.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION HANDLE IS:</h1> {{ collection.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION ID IS:</h1> {{ collection.id }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY COLLECTION DESCRIPTION IS:</h1> {{ collection.description }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT TITLE IS:</h1> {{ product.title }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT HANDLE IS:</h1> {{ product.handle }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT ID IS:</h1> {{ product.id }}</span>
<span><h1>THIS IS WHAT THE SHOPIFY PRODUCT DESCRIPTION IS:</h1> {{ product.description }}</span>
</div>