Skip to content

Commit 8804b24

Browse files
wesleycolewesleycole
committed
adding blog post component
1 parent b5d0afc commit 8804b24

File tree

22 files changed

+493
-262
lines changed

22 files changed

+493
-262
lines changed

‎_component/blogpost/component.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<article class="Post" id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
<!-- thanks to 10up for this -->
5+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
6+
<img src="https://placekitten.com/g/400/150" srcset="https://placekitten.com/g/400/150 1x, https://placekitten.com/g/800/300 2x" alt="header image" />
7+
<meta itemprop="url" content="https://placekitten.com/g/400/150" />
8+
<meta itemprop="width" content="400" />
9+
<meta itemprop="height" content="150" />
10+
</div><!--/itemprop=image-->
11+
<h1 class="Post-title" itemprop="headline">Article Title</h1>
12+
<div class="PostMeta">
13+
<p><strong>Author</strong>:
14+
<span itemprop="author">Author Name</span>
15+
</p>
16+
<p><strong>Publish Date</strong>:
17+
<time datetime="2017-01-04">January 4, 2017</time>
18+
</p>
19+
</div>
20+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
21+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
22+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
23+
<meta itemprop="width" content="100" />
24+
<meta itemprop="height" content="100" />
25+
</div>
26+
<meta itemprop="name" content="Company Name" />
27+
</div>
28+
</header>
29+
<div class="Post-body" itemprop="articleBody">
30+
<p>
31+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non rhoncus tortor. Nam odio risus, blandit auctor gravida et, vulputate in dui. Ut quis tellus sed lorem dignissim sagittis. Duis pharetra at leo a viverra. Maecenas sagittis aliquam tellus, eget faucibus arcu blandit vel. Duis vestibulum viverra orci, sed rutrum augue congue sit amet. Curabitur arcu enim, interdum consectetur maximus in, ornare nec elit.
32+
</p>
33+
</div>
34+
</section>
35+
</article>

‎_component/blogpost/component.php

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<article class="Post" id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
<!-- thanks to 10up for this -->
5+
<?php if ( has_post_thumbnail() ) : ?>
6+
<?php
7+
$meta = wp_get_attachment_metadata( get_post_thumbnail_id( get_the_ID() ) );
8+
$width = $meta['width'];
9+
$height = $meta['height'];
10+
?>
11+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
12+
<?php the_post_thumbnail(); ?>
13+
<meta itemprop="url" content="<?php echo esc_url( the_post_thumbnail_url() ); ?>" />
14+
<meta itemprop="width" content="<?php echo esc_attr( $width ); ?>" />
15+
<meta itemprop="height" content="<?php echo esc_attr( $height ); ?>" />
16+
</div><!--/itemprop=image-->
17+
<?php endif; ?>
18+
<h1 class="Post-title" itemprop="headline"><?php the_title(); ?></h1>
19+
<div class="PostMeta">
20+
<p><strong>Author</strong>:
21+
<span itemprop="author"><?php the_author_link(); ?></span>
22+
</p>
23+
<p><strong>Publish Date</strong>:
24+
<time datetime="<?php echo esc_attr( get_the_time( 'Y-m-d' ) ); ?>"><?php the_date(); ?></time>
25+
</p>
26+
</div>
27+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
28+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
29+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
30+
<meta itemprop="width" content="100" />
31+
<meta itemprop="height" content="100" />
32+
</div>
33+
<meta itemprop="name" content="<?php bloginfo( 'name' ); ?>" />
34+
</div>
35+
</header>
36+
<div class="Post-body" itemprop="articleBody">
37+
<?php the_content(); ?>
38+
</div>
39+
</section>
40+
</article>

‎_component/blogpost/component.twig

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% raw %}<article class="Post post-type-{{post.post_type}}" id="post-{{post.ID}}" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
{% if post.thumbnail %}
5+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
6+
{% import '_macros/_img.twig' as m_img %}
7+
{{m_img.responsive(post.thumbnail.id, {alt: 'Post-thumbnail', class: 'responsive'})}}
8+
<meta itemprop="url" content="{{post.thumbnail.src}}" />
9+
<meta itemprop="width" content="{{post.thumbnail.width}}" />
10+
<meta itemprop="height" content="{{post.thumbnail.height}}" />
11+
</div>
12+
{% endif %}
13+
<h1 class="Post-title" itemprop="headline">{{post.title}}</h1>
14+
<div class="PostMeta">
15+
<p><strong>Author</strong>:
16+
<span itemprop="author">{{post.author.name}}</span>
17+
</p>
18+
<p><strong>Publish Date</strong>:
19+
<time datetime="{{post.date("Y-m-d")}}">{{post.date}}</time>
20+
</p>
21+
</div>
22+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
23+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
24+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
25+
<meta itemprop="width" content="100" />
26+
<meta itemprop="height" content="100" />
27+
</div>
28+
<meta itemprop="name" content="{{site.title}}" />
29+
</div>
30+
</header>
31+
<div class="Post-body" itemprop="articleBody">
32+
{{post.content}}
33+
</div>
34+
</section>
35+
</article>{% endraw %}

‎_component/blogpost/example.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
<div itemscope itemtype="https://schema.org/Blog">
10+
<article class="Post" id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/BlogPosting">
11+
<section class="Post-content" itemprop="mainEntityOfPage">
12+
<header>
13+
<!-- thanks to 10up for this -->
14+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
15+
<img src="https://placekitten.com/g/400/150" srcset="https://placekitten.com/g/400/150 1x, https://placekitten.com/g/800/300 2x" alt="header image" />
16+
<meta itemprop="url" content="https://placekitten.com/g/400/150" />
17+
<meta itemprop="width" content="400" />
18+
<meta itemprop="height" content="150" />
19+
</div><!--/itemprop=image-->
20+
<h1 class="Post-title" itemprop="headline">Article Title</h1>
21+
<div class="PostMeta">
22+
<p><strong>Author</strong>:
23+
<span itemprop="author">Author Name</span>
24+
</p>
25+
<p><strong>Publish Date</strong>:
26+
<time datetime="2017-01-04">January 4, 2017</time>
27+
</p>
28+
</div>
29+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
30+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
31+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
32+
<meta itemprop="width" content="100" />
33+
<meta itemprop="height" content="100" />
34+
</div>
35+
<meta itemprop="name" content="Company Name" />
36+
</div>
37+
</header>
38+
<div class="Post-body" itemprop="articleBody">
39+
<p>
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non rhoncus tortor. Nam odio risus, blandit auctor gravida et, vulputate in dui. Ut quis tellus sed lorem dignissim sagittis. Duis pharetra at leo a viverra. Maecenas sagittis aliquam tellus, eget faucibus arcu blandit vel. Duis vestibulum viverra orci, sed rutrum augue congue sit amet. Curabitur arcu enim, interdum consectetur maximus in, ornare nec elit.
41+
</p>
42+
</div>
43+
</section>
44+
</article>
45+
</div>
46+
</body>
47+
</html>

‎_component/image/index.md

-8
This file was deleted.

‎_component/macros/index.md

+23-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,29 @@ category: twig
77

88
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.
99

10-
[Responsive Images](#responsive-images) [SVG Icons](#svg-icons)
10+
By the way, all of this is built into the [starter theme](https://github.com/Objectivco/objectiv-starter-theme) already.
11+
12+
<nav class="PageNav">
13+
<a href="#responsive-images">Responsive Images</a>
14+
<a href="#svg-icons">SVG Icons</a>
15+
</nav>
16+
17+
## Classes
18+
We utilize this Macro within the Image and SVG Icons Macros. It takes an array of classes and outputs them appropriately in the Macros.
19+
20+
```twig
21+
{% raw %}{% import '_macros/_classAttr.twig' as m_classAttr %}
22+
{{m_classAttr.classAttr('className')}}{% endraw %}
23+
```
24+
25+
#### Macro
26+
```twig
27+
{% raw %}{% macro classAttr(classes) %}
28+
{%- if (classes|length) -%}
29+
class="{{ classes|join(' ') }}"
30+
{%- endif -%}
31+
{% endmacro %}{% endraw %}
32+
```
1133

1234
## Responsive Images
1335
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.

‎_site/assets/css/main.css

+3
Original file line numberDiff line numberDiff line change
@@ -424,3 +424,6 @@ iframe.h-medium { height: 350px; }
424424
iframe.h-large { height: 550px; }
425425
iframe.w-iframe__small { width: 400px; }
426426
iframe.w-iframe__medium { width: 700px; }
427+
428+
.PageNav a { background: #eee; border-radius: 3px; font-size: 14px; padding: 5px 10px; text-decoration: none; transition: all 0.3s ease-in-out; }
429+
.PageNav a:hover { background: #ff4247; color: #fff; }

‎_site/component/accordion/index.html

-10
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ <h4>UI</h4>
4545

4646

4747

48-
49-
5048
<li class="ComponentList-item"><a href="/component-library/component/tabs/index.html">Tabs</a></li>
5149

5250

@@ -73,8 +71,6 @@ <h4>Navigation</h4>
7371

7472

7573

76-
77-
7874
</ul>
7975
</div>
8076

@@ -93,10 +89,6 @@ <h4>Content</h4>
9389

9490

9591

96-
<li class="ComponentList-item"><a href="/component-library/component/image/index.html">Image</a></li>
97-
98-
99-
10092
<li class="ComponentList-item"><a href="/component-library/component/logo/index.html">Logo</a></li>
10193

10294

@@ -124,8 +116,6 @@ <h4>Twig</h4>
124116

125117

126118

127-
128-
129119
<li class="ComponentList-item"><a href="/component-library/component/macros/index.html">Macros</a></li>
130120

131121

‎_site/component/blogpost/component.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<article class="Post" id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
<!-- thanks to 10up for this -->
5+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
6+
<img src="https://placekitten.com/g/400/150" srcset="https://placekitten.com/g/400/150 1x, https://placekitten.com/g/800/300 2x" alt="header image" />
7+
<meta itemprop="url" content="https://placekitten.com/g/400/150" />
8+
<meta itemprop="width" content="400" />
9+
<meta itemprop="height" content="150" />
10+
</div><!--/itemprop=image-->
11+
<h1 class="Post-title" itemprop="headline">Article Title</h1>
12+
<div class="PostMeta">
13+
<p><strong>Author</strong>:
14+
<span itemprop="author">Author Name</span>
15+
</p>
16+
<p><strong>Publish Date</strong>:
17+
<time datetime="2017-01-04">January 4, 2017</time>
18+
</p>
19+
</div>
20+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
21+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
22+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
23+
<meta itemprop="width" content="100" />
24+
<meta itemprop="height" content="100" />
25+
</div>
26+
<meta itemprop="name" content="Company Name" />
27+
</div>
28+
</header>
29+
<div class="Post-body" itemprop="articleBody">
30+
<p>
31+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non rhoncus tortor. Nam odio risus, blandit auctor gravida et, vulputate in dui. Ut quis tellus sed lorem dignissim sagittis. Duis pharetra at leo a viverra. Maecenas sagittis aliquam tellus, eget faucibus arcu blandit vel. Duis vestibulum viverra orci, sed rutrum augue congue sit amet. Curabitur arcu enim, interdum consectetur maximus in, ornare nec elit.
32+
</p>
33+
</div>
34+
</section>
35+
</article>

‎_site/component/blogpost/component.php

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<article class="Post" id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
<!-- thanks to 10up for this -->
5+
<?php if ( has_post_thumbnail() ) : ?>
6+
<?php
7+
$meta = wp_get_attachment_metadata( get_post_thumbnail_id( get_the_ID() ) );
8+
$width = $meta['width'];
9+
$height = $meta['height'];
10+
?>
11+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
12+
<?php the_post_thumbnail(); ?>
13+
<meta itemprop="url" content="<?php echo esc_url( the_post_thumbnail_url() ); ?>" />
14+
<meta itemprop="width" content="<?php echo esc_attr( $width ); ?>" />
15+
<meta itemprop="height" content="<?php echo esc_attr( $height ); ?>" />
16+
</div><!--/itemprop=image-->
17+
<?php endif; ?>
18+
<h1 class="Post-title" itemprop="headline"><?php the_title(); ?></h1>
19+
<div class="PostMeta">
20+
<p><strong>Author</strong>:
21+
<span itemprop="author"><?php the_author_link(); ?></span>
22+
</p>
23+
<p><strong>Publish Date</strong>:
24+
<time datetime="<?php echo esc_attr( get_the_time( 'Y-m-d' ) ); ?>"><?php the_date(); ?></time>
25+
</p>
26+
</div>
27+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
28+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
29+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
30+
<meta itemprop="width" content="100" />
31+
<meta itemprop="height" content="100" />
32+
</div>
33+
<meta itemprop="name" content="<?php bloginfo( 'name' ); ?>" />
34+
</div>
35+
</header>
36+
<div class="Post-body" itemprop="articleBody">
37+
<?php the_content(); ?>
38+
</div>
39+
</section>
40+
</article>

‎_site/component/blogpost/component.twig

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% raw %}<article class="Post post-type-{{post.post_type}}" id="post-{{post.ID}}" itemscope itemtype="https://schema.org/BlogPosting">
2+
<section class="Post-content" itemprop="mainEntityOfPage">
3+
<header>
4+
{% if post.thumbnail %}
5+
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
6+
{% import '_macros/_img.twig' as m_img %}
7+
{{m_img.responsive(post.thumbnail.id, {alt: 'Post-thumbnail', class: 'responsive'})}}
8+
<meta itemprop="url" content="{{post.thumbnail.src}}" />
9+
<meta itemprop="width" content="{{post.thumbnail.width}}" />
10+
<meta itemprop="height" content="{{post.thumbnail.height}}" />
11+
</div>
12+
{% endif %}
13+
<h1 class="Post-title" itemprop="headline">{{post.title}}</h1>
14+
<div class="PostMeta">
15+
<p><strong>Author</strong>:
16+
<span itemprop="author">{{post.author.name}}</span>
17+
</p>
18+
<p><strong>Publish Date</strong>:
19+
<time datetime="{{post.date("Y-m-d")}}">{{post.date}}</time>
20+
</p>
21+
</div>
22+
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
23+
<div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
24+
<meta itemprop="url" content="https://placekitten.com/g/100/100" />
25+
<meta itemprop="width" content="100" />
26+
<meta itemprop="height" content="100" />
27+
</div>
28+
<meta itemprop="name" content="{{site.title}}" />
29+
</div>
30+
</header>
31+
<div class="Post-body" itemprop="articleBody">
32+
{{post.content}}
33+
</div>
34+
</section>
35+
</article>{% endraw %}

0 commit comments

Comments
 (0)