Skip to content

Commit

Permalink
New blog - Twig in Views
Browse files Browse the repository at this point in the history
  • Loading branch information
@miromichalicka
miromichalicka committed Dec 8, 2015
1 parent b615e47 commit 77a39f3
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 2 deletions.
4 changes: 4 additions & 0 deletions 2015/11/06/configuration-d8/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@ <h3 id="conclusion">Conclusion</h3>
</li>


<li class="next">
<a href="/2015/12/07/views-twig/" data-toggle="tooltip" data-placement="top" title="Twig inside Views in Drupal 8">Next Post &rarr;</a>
</li>

</ul>

</div>
Expand Down
196 changes: 196 additions & 0 deletions 2015/12/07/views-twig/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<!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">
<meta name="description" content="Drupal and travelling">

<title>Twig inside Views in Drupal 8 - Miro Michalicka</title>

<link rel="canonical" href="http://yourdomain.com/2015/12/07/views-twig/">

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="/css/clean-blog.css">

<!-- Pygments Github CSS -->
<link rel="stylesheet" href="/css/syntax.css">

<!-- Custom Fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>


<body>

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Miro Michalicka</a>
</div>
</div>
<!-- /.container -->
</nav>


<!-- Post Header -->
<header class="intro-header" style="background-image: url('/img/post-bg-07.png')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>Twig inside Views in Drupal 8</h1>

<h2 class="subheading">frontend for sitebuilders</h2>

<span class="meta">Posted on December 7, 2015</span>
</div>
</div>
</div>
</div>
</header>

<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

<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>


<hr>

<ul class="pager">

<li class="previous">
<a href="/2015/11/06/configuration-d8/" data-toggle="tooltip" data-placement="top" title="Configuration management in Drupal 8">&larr; Previous Post</a>
</li>


</ul>

</div>
</div>
</div>
</article>

<hr>


<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="/feed.xml">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

<li>
<a href="https://twitter.com/miromichalicka">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>



<li>
<a href="https://github.com/miromichalicka">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

<li>
<a href="https://sk.linkedin.com/in/michalicka">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js "></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js "></script>

<!-- Custom Theme JavaScript -->
<script src="/js/clean-blog.min.js "></script>


</body>

</html>
46 changes: 44 additions & 2 deletions feed.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,52 @@
<description>Drupal and travelling</description>
<link>http://yourdomain.com/</link>
<atom:link href="http://yourdomain.com/feed.xml" rel="self" type="application/rss+xml" />
<pubDate>Fri, 06 Nov 2015 23:36:38 +0100</pubDate>
<lastBuildDate>Fri, 06 Nov 2015 23:36:38 +0100</lastBuildDate>
<pubDate>Tue, 08 Dec 2015 09:45:13 +0100</pubDate>
<lastBuildDate>Tue, 08 Dec 2015 09:45:13 +0100</lastBuildDate>
<generator>Jekyll v3.0.0</generator>

<item>
<title>Twig inside Views in Drupal 8</title>
<description>&lt;p&gt;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.&lt;/p&gt;

&lt;h3 id=&quot;twig&quot;&gt;Twig&lt;/h3&gt;
&lt;p&gt;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 &lt;a href=&quot;http://twig.sensiolabs.org/&quot;&gt;this&lt;/a&gt; page and in Drupal &lt;a href=&quot;https://www.drupal.org/list-changes&quot;&gt;change records&lt;/a&gt;.&lt;/p&gt;

&lt;h3 id=&quot;views&quot;&gt;Views&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;

&lt;h3 id=&quot;using-twig-functions-filters-in-views&quot;&gt;Using Twig functions filters in Views&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Usecase:&lt;/strong&gt; You want to display some text all uppercase and you don’t want to do it in CSS.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drupal 7 solution:&lt;/strong&gt; 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 &lt;code&gt;strtoupper&lt;/code&gt; PHP function.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drupal 8 solution:&lt;/strong&gt; You will rewrite field with its own value and use &lt;code&gt;upper&lt;/code&gt; Twig filter. It will look this way:
&lt;img src=&quot;/img/twig1.png&quot; alt=&quot;upper Twig filter&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;more-advanced-twig-expressions&quot;&gt;More advanced Twig expressions&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Usecase:&lt;/strong&gt; Show content of field conditionally or conditionally show content one of two fields.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drupal 7 solution:&lt;/strong&gt; Preprocessing or some naughty things in templates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drupal 8 solution:&lt;/strong&gt; Use Twig expressions :)
&lt;img src=&quot;/img/twig2.png&quot; alt=&quot;upper Twig filter&quot; /&gt;&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;lineno&quot;&gt;1&lt;/span&gt; {% if field_display_text2==&amp;#39;True&amp;#39; %}
&lt;span class=&quot;lineno&quot;&gt;2&lt;/span&gt; {{ field_text2 }}
&lt;span class=&quot;lineno&quot;&gt;3&lt;/span&gt; {% else %}
&lt;span class=&quot;lineno&quot;&gt;4&lt;/span&gt; {{ field_text1 }}
&lt;span class=&quot;lineno&quot;&gt;5&lt;/span&gt; {% endif %}&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;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. &lt;/p&gt;
</description>
<pubDate>Mon, 07 Dec 2015 08:00:00 +0100</pubDate>
<link>http://yourdomain.com/2015/12/07/views-twig/</link>
<guid isPermaLink="true">http://yourdomain.com/2015/12/07/views-twig/</guid>


</item>

<item>
<title>Configuration management in Drupal 8</title>
<description>&lt;p&gt;&lt;em&gt;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.&lt;/em&gt;&lt;/p&gt;
Expand Down
Binary file added img/post-bg-07.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/twig1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/twig2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,20 @@ <h1>Miro Michalicka</h1>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

<div class="post-preview">
<a href="/2015/12/07/views-twig/">
<h2 class="post-title"> Twig inside Views in Drupal 8
</h2>

<h3 class="post-subtitle">
frontend for sitebuilders
</h3>

</a>
<p class="post-meta">Posted on December 7, 2015</p>
</div>
<hr>

<div class="post-preview">
<a href="/2015/11/06/configuration-d8/">
<h2 class="post-title"> Configuration management in Drupal 8
Expand Down

0 comments on commit 77a39f3

Please sign in to comment.