Skip to content

Commit b5d0afc

Browse files
wesleycolewesleycole
committed
adding twig macros
1 parent a79327a commit b5d0afc

File tree

14 files changed

+416
-7
lines changed

14 files changed

+416
-7
lines changed

‎_component/accordion/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Fields:
2222

2323
## Markup
2424

25-
{% include partials/tabs.md %}
25+
{% include partials/markup.md %}
2626

2727
## Styles
2828

‎_component/blogpost/component.html

Whitespace-only changes.

‎_component/blogpost/component.php

Whitespace-only changes.

‎_component/blogpost/component.twig

Whitespace-only changes.

‎_component/blogpost/index.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ title: Blog Post
33
layout: component
44
path_slug: blogpost
55
category: content
6+
iframe_height: medium
67
---
78

8-
## Blog Post
9+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
10+
11+
## Markup
12+
13+
{% include partials/markup.md %}

‎_component/blogroll/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ iframe_height: medium
1010

1111
## Markup
1212

13-
{% include partials/tabs.md %}
13+
{% include partials/markup.md %}

‎_component/macros/index.md

+195-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,198 @@ title: Macros
33
layout: component
44
path_slug: macros
55
category: twig
6-
---
6+
---
7+
8+
We love Twig and have created a few Macros that help make things a bit easier for us. One thing to note when working with Macros and Twig is that you need to import the macro everywhere you need it. If you use an `embed` or `block` within your Twig file, you need to call the Macro import within that `embed` or `block`. You can't add a macro import at the top of the file and expect to use it wherever.
9+
10+
[Responsive Images](#responsive-images) [SVG Icons](#svg-icons)
11+
12+
## Responsive Images
13+
If you need to work with responsive images use our nifty responsive macro. You can create fixed width images that will generate retina read markup or variable width images with multiple src sets.
14+
15+
16+
### Fixed Width Images
17+
This macro takes 3 parameters:
18+
19+
1. Integer: Image's ID
20+
2. Integer: The width that you want the image to be displayed in
21+
3. Object: Object that takes an alt and class value for outputting the markup
22+
23+
```twig
24+
{% raw %}{% import '_macros/_img.twig' as m_img %}
25+
{{m_img.fixed(imageId, 100, {alt: 'post thumbnail', class: ['fixed']})}}{% endraw %}
26+
```
27+
28+
#### Macro
29+
```twig
30+
{% raw %}{# Create a fixed width responsive image #}
31+
{% macro fixed(assetId, width, options={}) %}
32+
{% import '_macros/_classAttr.twig' as m_classAttr %}
33+
34+
{# merge the options with the options parameter #}
35+
{% set options = {
36+
alt: 'alt',
37+
class: []
38+
} | merge(options) %}
39+
40+
{# Get the asset meta data from WP #}
41+
{% set assetArray = function('wp_get_attachment_image_src', assetId, 'full') %}
42+
{% set assetUrl = assetArray[0] %}
43+
{% set assetMetaData = function('wp_get_attachment_metadata', assetId) %}
44+
{% set assetNativeWidth = assetMetaData.width %}
45+
46+
47+
<img
48+
{% if (assetNativeWidth <= width) %}
49+
src="{{assetUrl}}"
50+
{% else %}
51+
src="{{assetUrl|resize(width)}}"
52+
{% endif %}
53+
54+
{% if (width*2 == assetNativeWidth) %}
55+
srcset="{{assetUrl}} 2x"
56+
{% elseif (width*2 < assetNativeWidth) %}
57+
srcset="{{assetUrl|resize(width*2)}} 2x"
58+
{% endif %}
59+
60+
alt="{{options.alt}}"
61+
{{m_classAttr.classAttr(options.class)}}
62+
/>
63+
64+
{% endmacro %}{% endraw %}
65+
```
66+
67+
### Responsive Image
68+
This macro takes 3 parameters:
69+
70+
1. Integer: Image's ID
71+
2. Integer: The width that you want the image to be displayed in
72+
3. Object: Object that takes an alt and class value for outputting the markup
73+
74+
```twig
75+
{% raw %}{% import '_macros/_img.twig' as m_img %}
76+
{{m_img.responsive(imageId, {alt: 'post thumbnail', class: ['responsive']})}}{% endraw %}
77+
```
78+
79+
#### Macro
80+
```twig
81+
{% raw %}{# Create a variable width responsive image #}
82+
{% macro responsive(assetId, options={}) %}
83+
{% import '_macros/_classAttr.twig' as m_classAttr %}
84+
{# merge the options with options parameter #}
85+
{% set options = {
86+
alt: 'alt',
87+
class: [],
88+
style: 'default',
89+
} | merge(options) %}
90+
91+
{# Get the asset meta data from WP #}
92+
{% set assetArray = function('wp_get_attachment_image_src', assetId, 'full') %}
93+
{% set assetUrl = assetArray[0] %}
94+
{% set assetMetaData = function('wp_get_attachment_metadata', assetId) %}
95+
{% set assetNativeWidth = assetMetaData.width %}
96+
97+
{# Image Config
98+
# Make sure to update the configs to what fits for each site.
99+
#}
100+
{% set config = {
101+
default: {
102+
srcsetWidths: [640, 1024, 1600],
103+
sizes: [
104+
'(min-width: 900px) 1025px',
105+
'100vw'
106+
],
107+
defaultWidth: 1024
108+
}
109+
} %}
110+
111+
{# Let's get the style that is sent through as parameter #}
112+
{% set params = config[options.style] %}
113+
{% set srcset = [] %}
114+
115+
{# Create the srcset #}
116+
{% for width in params['srcsetWidths'] %}
117+
{% set srcset = srcset|merge([assetUrl|resize(width) ~ ' ' ~ width ~ 'w']) %}
118+
{% endfor %}
119+
120+
<img
121+
{% if (assetNativeWidth <= params['defaultWidth']) %}
122+
src="{{assetUrl}}"
123+
{% else %}
124+
src="{{assetUrl|resize(width)}}"
125+
{% endif %}
126+
127+
srcset="{{srcset|join(', ')}}"
128+
sizes="{{params['sizes']|join(', ')}}"
129+
130+
alt="{{options.alt}}"
131+
132+
{{m_classAttr.classAttr(options.class)}}
133+
/>
134+
135+
{% endmacro %}{% endraw %}
136+
```
137+
138+
## SVG Icons
139+
Just like the image macro the SVG macro will output an inline SVG element for you. There are a few requirements to use this macro. You must compile all of your SVG files into a single SVG sprite file with specific ID for each single SVG Icon. We use IcoMoon to generate our SVG icons store them in a directory within the theme and then use Gulp to generate the sprite for us.
140+
141+
The SVG Macro takes an object as its parameter with the required key value of `icon` with the file name of the SVG icon passed through as the value.
142+
143+
```twig
144+
{% raw %}{% import '_macros/_svg.twig' as m_svg %}
145+
{{m_svg.svg({icon: 'facebook-square', title: 'Facebook', desc: 'Facebook Icon'})}}{% endraw %}
146+
```
147+
148+
#### Macro
149+
```twig
150+
{% raw %}{% macro svg(options={}) %}
151+
{# merge the options with passed in options #}
152+
{% set options = {
153+
icon: 'facebook-square',
154+
title: 'Facebook',
155+
desc: ''
156+
} | merge(options) %}
157+
158+
{% set title = options.title ? options.title : options.icon %}
159+
{% set ariaHidden = ' aria-hidden="true"' %}
160+
161+
<svg class="icon icon-{{options.icon}}" {{ariaHidden}} role="img">
162+
<title>{{options.title}}</title>
163+
{% if options.desc %}
164+
<desc>{{options.desc}}</desc>
165+
{% endif %}
166+
<use xlink:href="#icon-{{options.icon}}"></use>
167+
</svg>
168+
{% endmacro %}{% endraw %}
169+
```
170+
171+
#### Gulp
172+
```js
173+
var gulp = require('gulp');
174+
var svgmin = require( 'gulp-svgmin' );
175+
var svgstore = require( 'gulp-svgstore' );
176+
var del = require( 'del' );
177+
var cheerio = require( 'gulp-cheerio' );
178+
179+
/**
180+
* Task to concat and compile svg into a single file
181+
*/
182+
gulp.task('svg', function() {
183+
gulp.src('assets/icons/svg-icons/*.svg')
184+
.pipe(svgmin())
185+
.pipe(rename({prefix: 'icon-'}))
186+
.pipe(svgstore({inlineSvg: true}))
187+
.pipe(cheerio({
188+
run: function($, file) {
189+
$('svg').attr('style', 'display: none');
190+
$('[fill]').removeAttr('fill');
191+
$('path').removeAttr('class');
192+
},
193+
parserOptions: {xmlMode: true}
194+
}))
195+
.pipe(gulp.dest('assets/icons'))
196+
})
197+
198+
gulp.task( 'icons', [ 'svg' ] );
199+
```
200+

‎_component/tabs/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Fields:
2020

2121
## Markup
2222

23-
{% include partials/tabs.md %}
23+
{% include partials/markup.md %}
2424

2525
## Styles
2626

‎_includes/partials/tabs.md renamed to ‎_includes/partials/markup.md

File renamed without changes.

‎_site/component/blogpost/component.html

Whitespace-only changes.

‎_site/component/blogpost/component.php

Whitespace-only changes.

‎_site/component/blogpost/component.twig

Whitespace-only changes.

‎_site/component/blogpost/index.html

+16-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,22 @@ <h4>Twig</h4>
144144
<h1>Blog Post</h1>
145145

146146

147-
<h2 id="blog-post">Blog Post</h2>
147+
<iframe class="h-medium" src="/component-library/component/blogpost/example.html"></iframe>
148+
149+
<h2 id="markup">Markup</h2>
150+
151+
<h3>HTML</h3>
152+
<div class="language-html highlighter-rouge"><pre class="highlight"><code>
153+
</code></pre>
154+
</div>
155+
<h3>PHP</h3>
156+
<div class="language-php highlighter-rouge"><pre class="highlight"><code>
157+
</code></pre>
158+
</div>
159+
<h3>Twig</h3>
160+
<div class="language-twig highlighter-rouge"><pre class="highlight"><code>
161+
</code></pre>
162+
</div>
148163

149164
</div>
150165

0 commit comments

Comments
 (0)