In Symfony 1.4 I use to include just the needed assets with:
apps/myApp/config/view.yml (general assets to be used in every page)
stylesheets: [main.css]
javascripts: [lib/jquery.js, lib/jquery.qtip.js, backend/main.js]
apps/myApp/modules/someModule/templates/someTemplateSuccess.php (assets just for this view, partial, etc)
<?php use_stylesheet('backend/datagrid.css') ?>
<?php use_javascript('backend/datagrid.js') ?>
and then finally linking those in apps/myApp/templates/layout.php:
<?php include_stylesheets() ?>
<?php include_javascripts() ?>
So, how to do this using the AsseticBundle in Twig views?
I'm really confused... thanks!
Ok, I got here:
https://github.com/kriswallsmith/symfony-sandbox/commit/f1fc1d0cf2fe69660f94f33719a4508d6e9e25ae
and it WORKS!
it goes like this:
src/MySite/MyBundle/Resources/css/datagrid.css
to include it in the view:
src/MySite/MyBundle/Resources/views/MyViews/myview.html.twig
{% block stylesheets %}
{% stylesheets '#MySiteMyBundleBundle/Resources/css/datagrid.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% endblock %}
and finally, lets print it:
app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Lol!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
Great!
UPDATE:
I still don't know why but:
{% stylesheets '#MySiteMyBundleBundle/Resources/css/*.css' output='css/all.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Only works setting debug to false, so the best way to do this is configuring it:
app/config/config.yml
# Assetic Configuration
assetic:
debug: false
use_controller: true
write_to: %kernel.root_dir%/../web
filters:
cssrewrite: ~
Related
I have read the other answers on this topic and still do not see what I am missing. Not sure if it is something with vs code and the extensions I have added as I type out code as per the training video and when I save the code it get compressed?
My base.html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block page_title %}{% endblock page_title %}</title>
</head>
<body>
{% block content %}{% endblock content%}
</body>
</html>
The code in the index file where I want to use the base.html format, looks like this after I have saved it. As you can see vs code compress it - is that the issue and if so how do I fix?
{% extends "base.html" %} {% block page_title %} All challenges {% endblock
page_title %} {% block content %}
<ul>
<li>{{ month|title}}</li>
</ul>
{% endblock content %}
The extensions I have is Django Template, Prettier, Django I am thinking it is something with my preferences that cause this.
I have re-typed and double check the spacing around the {% to make sure as I see that is the most common solution.
I have also tried the just using {% endblock %} without the block names but still get the same error.
Here in your code Prettier extension auto format page so title block is start with first line and end with second line.
html templete can't understand DTL(jinja) reading so django tempale engine fatch an error
so just rearrange it like this...
{% extends "base.html" %}
{% block page_title %} All challenges {% endblockpage_title %}
{% block content %}
<ul>
<li>{{ month|title}}</li>
</ul>
{% endblock content %}
Shopify creates a URL to each collection filter. This URL https://example.com/collections/default/type_tag+size_tag+width_tag would filter products on a collection called default to show products that are tagged with type_tag, size_tag, width_tag.
This also creates a canonical link with the same href as the above URL. In this example, the canonical href would be <link rel="canonical" href="https://example.com/collections/default/type_tag+size_tag+width_tag">
We want to optimize for SEO. For URLs with the same filters but inverse (and therefore yield the same page and filtered content) we would like to have the same canonical href.
For example: These URLs would filter the same products on collections default and show canonicals with matching href value.
https://example.com/collections/default/type_tag+size_tag+width_tag
https://example.com/collections/default/size_tag+width_tag+type_tag
https://example.com/collections/default/type_tag+width_tag+size_tag
https://example.com/collections/default/width_tag+type_tag+size_tag
Regardless of the URLs above, we would like the canonical href to be fixed as the one we set. So as an example, we want the above URLs to have https://example.com/collections/default/type_tag+size_tag+width_tag as the canonical.
As you can tell, our tags are grouped into type_, size_ and width_.
I have tried several methods to loop over the {% current_tags %} object to check if any of the tags in {% current_tags %} contains type_, size_ and width_. Below is the idea that I have but clearly it doesn't work so it's trash. Fresh ideas please and thank you!!!
{% if template contains 'collection' and current_tags %}
{% for tag in current_tags %}
{% if current_tags contains 'type_' %}
{% assign type_tag_url = tag %}
{% elsif current_tags contains 'size_' %}
{% assign size_tag_url = tag %}
{% elsif current_tags contains 'width_' %}
{% assign width_tag_url = tag %}
{% endif %}
{% endfor %}
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}/{{type_tag_url}}+{{size_tag_url}}+{{width_tag_url}}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}">
{% endif %}
The current_tags is an array. When you use contains operator to find items in the array the comparison works based on an exact match. So you cannot use it to check whether it contains tags that contain a part of the string, like type_. Check the tags itself instead e.g.:
{% if template contains 'collection' and current_tags %}
{% for tag in current_tags %}
{% if tag contains 'type_' %}
{% assign type_tag_url = tag %}
{% elsif tag contains 'size_' %}
{% assign size_tag_url = tag %}
{% elsif tag contains 'width_' %}
{% assign width_tag_url = tag %}
{% endif %}
{% endfor %}
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}/{{type_tag_url}}+{{size_tag_url}}+{{width_tag_url}}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}">
{% endif %}
Here's a simple template structure that consists of three files:
wrapper.html, which defines the basic structure of a page. It has some blocks that can be extended.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="/something.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css">
<title>{{ title }}</title>
</head>
<body>
{% block header %}
{% endblock %}
{% block body %}
{% endblock %}
</body>
</html>
main.html is the the file that I give to jinja2 to format.
{% extends "wrapper.html" %}
{% set title = title | default("Untitled") %}
{% block header %}
<h1>Welcome to {{ title }}</h1>
{% endblock %}
{% block body %}
{% include "included.html" %}
{% endblock %}
and included.html has some extra stuff I don't want to put into main.html for whatever reason
<p>In this page ({{ title }}), we will discuss all kinds of things.</p>
<p>Blah blah blah...</p>
My problem is that when missing a title, everything gets filled with "Untitled" except for one place: the included.html file.
I have found two ways of fixing this.
Add {% set title = title %} inside the {% block body %} of main.html (What? Why does that even work?)
Move the {% set title = title | default("Untitled") %} to wrapper.html
I like neither of these options. The first one for obvious reasons, and the second one because if I might want to extend wrapper.html in a number of ways and "Untitled" may not always be the best choice for an untitled page.
So my question is this: Is there any way I can I get included.html to recognize variables from main.html that are not directly defined in the block scope?
I would also like to know if I'm using Jinja2 incorrectly.
Is it possible to change a css property in a Shopify liquid page using a logic statement?
Something like:
{% case template %}
{% when 'index' %}
#headlogo{display:none}
{% endcase %}
You could put something like this in theme.liquid:
<head>
...
{% case template %}
{% when 'index' %}
<style>
#headlogo { display:none }
</style>
{% endcase %}
</head>
Or you could conditionally load stylesheets, see here for an example:
{% if template contains 'index' or template contains 'collection' %}
{{ 'style.theme-dark.css' | asset_url | stylesheet_tag }}
{% else %}
{{ 'style.theme-light.css' | asset_url | stylesheet_tag }}
{% endif %}
I would add a class to the <body> instead:
<body class="{% if customer %}customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}">
Then you can do:
.template-index #headlogo {
display: none;
}
You can use "if template" statements only on Layouts, Templates and Snippets.
Here better decision
theme.liquid or some Template, Snippet:
<div id="headlogo"{% if template == 'index' %} class="hide_logo"{% endif %}>
css
.hide_logo{
display: none;
}
I am trying to use a formatter to format dates in a dojo grid with DOJANGO.
This is the template script:
{% extends "dojango/base.html" %}
{% load dojango_grid %}
{% block dojango_page_title %} Testing datagrid {% endblock %}
{% block dojango_header_extra %}
<script type="text/javascript">
function formatDate(datum) {
var d = dojo.date.stamp.fromISOString(datum);
return dojo.date.locale.format(d, {formatLength: 'long'});
}
</script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.Dialog");
dojo.require("dojo.date.stamp");
dojo.require("dojo.date.locale");
</script>
{% endblock %}
{% block dojango_content %}
<h1> Movimientos </h1>
</br>
</br>
{% datagrid voucher_v1 Movimiento %}
width="100%"
height="500px"
formatter= {'fecha_cambio_saldo':"this.formatDate",'fecha_cambio_saldo_anterior':"this.formatDate"}
id="test_grid"
{% enddatagrid %}
{% endblock %}
However, the function parameter datum is passed null and there is an exception at the line:
return dojo.date.locale.format(d, {formatLength: 'long'});
(it complains that ObjectDate.getHours() is undefined since ObjectDate is null)
What am I missing something here? I followed the example from this link:
Thank you in advance!
Try adding the script
function formatDate(datum) {
var d = dojo.date.stamp.fromISOString(datum);
return dojo.date.locale.format(d, {formatLength: 'long'});
}
after the dojo requires statements