diff --git a/2015/11/06/configuration-d8/index.html b/2015/11/06/configuration-d8/index.html index f699bce..c09b0b9 100644 --- a/2015/11/06/configuration-d8/index.html +++ b/2015/11/06/configuration-d8/index.html @@ -132,6 +132,10 @@

Conclusion

+ + diff --git a/2015/12/07/views-twig/index.html b/2015/12/07/views-twig/index.html new file mode 100644 index 0000000..ba6ec01 --- /dev/null +++ b/2015/12/07/views-twig/index.html @@ -0,0 +1,196 @@ + + + + + + + + + + + Twig inside Views in Drupal 8 - Miro Michalicka + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

Twig inside Views in Drupal 8

+ +

frontend for sitebuilders

+ + Posted on December 7, 2015 +
+
+
+
+
+ + +
+
+
+
+ +

Drupal 8 brings us except Symfony in backend also Twig for frontenders and Views for sitebuilders. Have you every thought about mixing this two parts of Drupal? In most of cases it is better if frontender knows at least basics of Drupal sitebuilding and Views are one of the most important modules for this.

+ +

Twig

+

Twig is templating engine which replaced PHPTemplates in Drupal 8. It uses some own functions, filters and syntax which aren’t related to PHP or Javascript and more importantly, it protects you from complexity of Drupal data model. No more thinking if variable is array or object - you access its children the same way. These functions and filters, which modify way how are input variables displayed. Drupal also extends Twig abilities by adding some own functions, mostly related to manipulation with html attributes. More about Twig should be found on this page and in Drupal change records.

+ +

Views

+

Views is module, which knows probably everyone in Drupal world and honestly I cannot imagine building even simple presentation website without it. It offers you ability to build complex queries and display their results without having any knowledge about databases just through Drupal UI.

+ +

Using Twig functions filters in Views

+

Usecase: You want to display some text all uppercase and you don’t want to do it in CSS.

+ +

Drupal 7 solution: You can create field template with correct name, so it will have an effect only on desired field and inside this field template you will use strtoupper PHP function.

+ +

Drupal 8 solution: You will rewrite field with its own value and use upper Twig filter. It will look this way: +upper Twig filter

+ +

More advanced Twig expressions

+

Usecase: Show content of field conditionally or conditionally show content one of two fields.

+ +

Drupal 7 solution: Preprocessing or some naughty things in templates.

+ +

Drupal 8 solution: Use Twig expressions :) +upper Twig filter

+ +
1  {% if field_display_text2=='True' %}
+2  {{ field_text2 }}
+3  {% else %}
+4  {{ field_text1 }}
+5  {% endif %}
+ +

Conclusion

+

Twig makes Frontender’s life easier. I’m not saying that we should do everything possible only through UI, as I see there many risks related to harder debugging. Practical use on projects will show us the best way.

+ + +
+ + + +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + diff --git a/feed.xml b/feed.xml index edd3dce..1c5f2f0 100755 --- a/feed.xml +++ b/feed.xml @@ -5,10 +5,52 @@ Drupal and travelling http://yourdomain.com/ - Fri, 06 Nov 2015 23:36:38 +0100 - Fri, 06 Nov 2015 23:36:38 +0100 + Tue, 08 Dec 2015 09:45:13 +0100 + Tue, 08 Dec 2015 09:45:13 +0100 Jekyll v3.0.0 + + Twig inside Views in Drupal 8 + <p>Drupal 8 brings us except Symfony in backend also Twig for frontenders and Views for sitebuilders. Have you every thought about mixing this two parts of Drupal? In most of cases it is better if frontender knows at least basics of Drupal sitebuilding and Views are one of the most important modules for this.</p> + +<h3 id="twig">Twig</h3> +<p>Twig is templating engine which replaced PHPTemplates in Drupal 8. It uses some own functions, filters and syntax which aren’t related to PHP or Javascript and more importantly, it protects you from complexity of Drupal data model. No more thinking if variable is array or object - you access its children the same way. These functions and filters, which modify way how are input variables displayed. Drupal also extends Twig abilities by adding some own functions, mostly related to manipulation with html attributes. More about Twig should be found on <a href="http://twig.sensiolabs.org/">this</a> page and in Drupal <a href="https://www.drupal.org/list-changes">change records</a>.</p> + +<h3 id="views">Views</h3> +<p>Views is module, which knows probably everyone in Drupal world and honestly I cannot imagine building even simple presentation website without it. It offers you ability to build complex queries and display their results without having any knowledge about databases just through Drupal UI.</p> + +<h3 id="using-twig-functions-filters-in-views">Using Twig functions filters in Views</h3> +<p><strong>Usecase:</strong> You want to display some text all uppercase and you don’t want to do it in CSS.</p> + +<p><strong>Drupal 7 solution:</strong> You can create field template with correct name, so it will have an effect only on desired field and inside this field template you will use <code>strtoupper</code> PHP function.</p> + +<p><strong>Drupal 8 solution:</strong> You will rewrite field with its own value and use <code>upper</code> Twig filter. It will look this way: +<img src="/img/twig1.png" alt="upper Twig filter" /></p> + +<h3 id="more-advanced-twig-expressions">More advanced Twig expressions</h3> +<p><strong>Usecase:</strong> Show content of field conditionally or conditionally show content one of two fields.</p> + +<p><strong>Drupal 7 solution:</strong> Preprocessing or some naughty things in templates.</p> + +<p><strong>Drupal 8 solution:</strong> Use Twig expressions :) +<img src="/img/twig2.png" alt="upper Twig filter" /></p> + +<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="lineno">1</span> {% if field_display_text2==&#39;True&#39; %} +<span class="lineno">2</span> {{ field_text2 }} +<span class="lineno">3</span> {% else %} +<span class="lineno">4</span> {{ field_text1 }} +<span class="lineno">5</span> {% endif %}</code></pre></figure> + +<h3 id="conclusion">Conclusion</h3> +<p>Twig makes Frontender’s life easier. I’m not saying that we should do everything possible only through UI, as I see there many risks related to harder debugging. Practical use on projects will show us the best way. </p> + + Mon, 07 Dec 2015 08:00:00 +0100 + http://yourdomain.com/2015/12/07/views-twig/ + http://yourdomain.com/2015/12/07/views-twig/ + + + + Configuration management in Drupal 8 <p><em>Disclaimer: This blog represents personal opinions of author, which don’t have to be same as opinions of iKOS and the rest of its development team.</em></p> diff --git a/img/post-bg-07.png b/img/post-bg-07.png new file mode 100644 index 0000000..e5d3c67 Binary files /dev/null and b/img/post-bg-07.png differ diff --git a/img/twig1.png b/img/twig1.png new file mode 100644 index 0000000..3e9a168 Binary files /dev/null and b/img/twig1.png differ diff --git a/img/twig2.png b/img/twig2.png new file mode 100644 index 0000000..72bf0fc Binary files /dev/null and b/img/twig2.png differ diff --git a/index.html b/index.html index 06c9bb4..56a8c36 100755 --- a/index.html +++ b/index.html @@ -76,6 +76,20 @@

Miro Michalicka