Skip to content

Commit 33d278b

Browse files
aboyleaboyle
committed
news post layout update
1 parent 8892432 commit 33d278b

2 files changed

Lines changed: 890 additions & 48 deletions

File tree

‎_layouts/post.html‎

Lines changed: 282 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,289 @@
11
{% include header.html %}
22

33
{% include nav.html %}
4-
5-
<!--<div id="banner-wrap">
6-
<div class="container">
7-
<div id="banner">
8-
<div class="wsite-header"></div>
9-
<div style="clear:both;"></div>
10-
</div><!-- end banner -->
11-
</div><!-- end container -->
12-
</div><!-- end banner-wrap -->
13-
4+
5+
{% assign primary_category = page.categories | first | default: "News" %}
6+
{% assign external_url = page["external-url"] %}
7+
{% if external_url == nil or external_url == blank %}
8+
{% assign external_url = page.external_url %}
9+
{% endif %}
10+
11+
{% assign hero_image = page.hero_image %}
12+
{% if hero_image == nil or hero_image == blank %}
13+
{% assign hero_image = page["hero-image"] %}
14+
{% endif %}
15+
{% if hero_image == nil or hero_image == blank %}
16+
{% assign hero_image = page.teaser %}
17+
{% endif %}
18+
19+
{% assign hero_src = nil %}
20+
{% if hero_image and hero_image != blank %}
21+
{% assign hero_first_character = hero_image | slice: 0, 1 %}
22+
{% if hero_image contains "://" or hero_first_character == "/" %}
23+
{% assign hero_src = hero_image %}
24+
{% else %}
25+
{% assign hero_src = "/assets/news_graphics/" | append: hero_image %}
26+
{% endif %}
27+
{% endif %}
28+
29+
{% assign hide_hero = page.hide_hero %}
30+
{% if hide_hero == nil %}
31+
{% assign hide_hero = page["hide-hero"] %}
32+
{% endif %}
33+
34+
{% assign hero_fit = page.hero_fit %}
35+
{% if hero_fit == nil or hero_fit == blank %}
36+
{% assign hero_fit = page["hero-fit"] %}
37+
{% endif %}
38+
{% if hero_fit != "cover" and hero_fit != "contain" %}
39+
{% if primary_category == "Papers" or primary_category == "Grants" or primary_category == "Awards" %}
40+
{% assign hero_fit = "contain" %}
41+
{% else %}
42+
{% assign hero_fit = "cover" %}
43+
{% endif %}
44+
{% endif %}
45+
46+
{% assign hero_alt = page.hero_alt %}
47+
{% if hero_alt == nil or hero_alt == blank %}
48+
{% assign hero_alt = page["hero-alt"] %}
49+
{% endif %}
50+
{% if hero_alt == nil or hero_alt == blank %}
51+
{% assign hero_alt = page.title %}
52+
{% endif %}
53+
54+
{% assign hero_caption = page.hero_caption %}
55+
{% if hero_caption == nil or hero_caption == blank %}
56+
{% assign hero_caption = page["hero-caption"] %}
57+
{% endif %}
58+
59+
{% assign cta_label = page.cta_label %}
60+
{% if cta_label == nil or cta_label == blank %}
61+
{% assign cta_label = page["cta-label"] %}
62+
{% endif %}
63+
{% if cta_label == nil or cta_label == blank %}
64+
{% if primary_category == "Papers" %}
65+
{% assign cta_label = "Read the paper" %}
66+
{% elsif primary_category == "Grants" %}
67+
{% assign cta_label = "View project information" %}
68+
{% elsif primary_category == "Awards" %}
69+
{% assign cta_label = "View award information" %}
70+
{% else %}
71+
{% assign cta_label = "Visit the external page" %}
72+
{% endif %}
73+
{% endif %}
74+
75+
{% assign related_publication_key = page.related_publication %}
76+
{% if related_publication_key == nil or related_publication_key == blank %}
77+
{% assign related_publication_key = page["related-publication"] %}
78+
{% endif %}
79+
{% assign related_paper = nil %}
80+
{% if related_publication_key and related_publication_key != blank %}
81+
{% assign related_paper_matches = site.papers | where: "bibkey", related_publication_key %}
82+
{% assign related_paper = related_paper_matches | first %}
83+
{% endif %}
84+
1485
<div id="main-wrap">
15-
<div class="container">
16-
<div class="wsite-content">
17-
18-
<center><h3 class="title">{{ page.title }}</h3></center>
19-
<h2 class="postdate">{{ page.date | date: "%B %d, %Y" }}</h2>
20-
<h2 class="categories">
21-
{% for cat in page.categories %}
22-
{{cat}}&nbsp;
23-
{% endfor %}
24-
</h2>
25-
26-
<div class="entry-content">
27-
<center>
28-
{{ content }}
29-
30-
{% assign external_url = page["external-url"] %}
31-
{% if external_url and external_url != blank %}
32-
<p style="margin-top: 20px;">
33-
<a href="{{ external_url | escape }}" target="_blank" rel="noopener noreferrer">
34-
Read this paper here.
35-
</a>
36-
</p>
37-
{% endif %}
38-
</center>
39-
</div>
40-
41-
42-
</div>
43-
</div><!-- end container -->
86+
<div class="container">
87+
<div class="wsite-content">
88+
<main class="site-page news-article-page">
89+
<nav class="news-article-breadcrumb" aria-label="Breadcrumb">
90+
<a href="/news/">News</a>
91+
<span aria-hidden="true">/</span>
92+
<span>{{ primary_category | escape }}</span>
93+
</nav>
94+
95+
<article class="news-article">
96+
<header class="news-article-header">
97+
<div class="news-article-meta">
98+
<span class="news-article-category">{{ primary_category | escape }}</span>
99+
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
100+
</div>
101+
<h1>{{ page.title | escape }}</h1>
102+
<span class="news-article-title-rule" aria-hidden="true"></span>
103+
{% if page.summary %}
104+
<p class="news-article-deck">{{ page.summary | escape }}</p>
105+
{% endif %}
106+
</header>
107+
108+
{% if hero_src and hide_hero != true %}
109+
<figure class="news-article-hero news-article-hero--{{ hero_fit }}">
110+
<div class="news-article-hero-frame">
111+
<img src="{{ hero_src | escape }}" alt="{{ hero_alt | escape }}">
112+
</div>
113+
{% if hero_caption %}<figcaption>{{ hero_caption | escape }}</figcaption>{% endif %}
114+
</figure>
115+
{% endif %}
116+
117+
<div class="news-article-body">
118+
{{ content }}
119+
</div>
120+
121+
{% assign external_cta_rendered = false %}
122+
{% if page.award %}
123+
<section class="news-information-panel" aria-labelledby="news-project-information-heading">
124+
<p class="section-eyebrow">Award details</p>
125+
<h2 id="news-project-information-heading">Project information</h2>
126+
<dl>
127+
{% if page.award.agency %}
128+
<div><dt>Agency</dt><dd>{{ page.award.agency | escape }}</dd></div>
129+
{% endif %}
130+
{% if page.award.mechanism %}
131+
<div><dt>Mechanism</dt><dd>{{ page.award.mechanism | escape }}</dd></div>
132+
{% endif %}
133+
{% if page.award.project %}
134+
<div><dt>Project</dt><dd>{{ page.award.project | escape }}</dd></div>
135+
{% endif %}
136+
{% if page.award.collaborators %}
137+
<div>
138+
<dt>Collaborators</dt>
139+
<dd>{{ page.award.collaborators | join: ", " | escape }}</dd>
140+
</div>
141+
{% endif %}
142+
</dl>
143+
{% if external_url and external_url != blank %}
144+
<div class="resource-links news-information-links">
145+
<a href="{{ external_url | escape }}" target="_blank" rel="noopener noreferrer">{{ cta_label | escape }}</a>
146+
</div>
147+
{% assign external_cta_rendered = true %}
148+
{% endif %}
149+
</section>
150+
{% endif %}
151+
152+
{% if page.gallery %}
153+
<section class="news-article-section news-article-gallery" aria-labelledby="news-gallery-heading">
154+
<div class="section-heading section-heading--bordered">
155+
<p class="section-eyebrow">Images</p>
156+
<h2 id="news-gallery-heading">Gallery</h2>
157+
</div>
158+
<div class="news-gallery-grid">
159+
{% for gallery_item in page.gallery %}
160+
{% assign gallery_src = gallery_item.src | default: gallery_item %}
161+
{% assign gallery_first_character = gallery_src | slice: 0, 1 %}
162+
{% if gallery_src contains "://" or gallery_first_character == "/" %}
163+
{% assign resolved_gallery_src = gallery_src %}
164+
{% else %}
165+
{% assign resolved_gallery_src = "/assets/news_graphics/" | append: gallery_src %}
166+
{% endif %}
167+
{% assign gallery_alt = gallery_item.alt | default: page.title %}
168+
<figure class="news-gallery-item">
169+
<a href="{{ resolved_gallery_src | escape }}">
170+
<img src="{{ resolved_gallery_src | escape }}" alt="{{ gallery_alt | escape }}" loading="lazy">
171+
</a>
172+
{% if gallery_item.caption %}<figcaption>{{ gallery_item.caption | escape }}</figcaption>{% endif %}
173+
</figure>
174+
{% endfor %}
175+
</div>
176+
</section>
177+
{% endif %}
178+
179+
{% if related_paper %}
180+
<section class="news-article-section news-related-publication" aria-labelledby="news-related-publication-heading">
181+
<div class="section-heading section-heading--bordered">
182+
<p class="section-eyebrow">Research output</p>
183+
<h2 id="news-related-publication-heading">Related publication</h2>
184+
</div>
185+
{% include publication_citation.html paper=related_paper compact=true show_consortium=true %}
186+
</section>
187+
{% endif %}
188+
189+
{% assign related_people_count = page.people | size %}
190+
{% if related_people_count > 0 %}
191+
<section class="news-article-section news-related-people" aria-labelledby="news-related-people-heading">
192+
<div class="section-heading section-heading--bordered">
193+
<p class="section-eyebrow">People</p>
194+
<h2 id="news-related-people-heading">Boyle Lab members</h2>
195+
</div>
196+
<div class="news-people-grid">
197+
{% for person_id in page.people %}
198+
{% assign person_matches = site.people | where: "umid", person_id %}
199+
{% assign person = person_matches | first %}
200+
{% if person %}
201+
<a class="news-person-card" href="{{ person.url }}">
202+
{% if person.picture %}
203+
<img src="/assets/people/{{ person.picture | escape }}" alt="" loading="lazy">
204+
{% endif %}
205+
<span>
206+
<strong>{{ person.name | escape }}</strong>
207+
{% if person.title %}
208+
<small>{{ person.title | escape }}</small>
209+
{% elsif person.position %}
210+
<small>{{ person.position | escape }}</small>
211+
{% endif %}
212+
</span>
213+
</a>
214+
{% endif %}
215+
{% endfor %}
216+
</div>
217+
</section>
218+
{% endif %}
219+
220+
{% if external_url and external_url != blank and external_cta_rendered != true and related_paper == nil %}
221+
<div class="news-article-cta">
222+
<a href="{{ external_url | escape }}" target="_blank" rel="noopener noreferrer">{{ cta_label | escape }} <span aria-hidden="true">&rarr;</span></a>
223+
</div>
224+
{% endif %}
225+
226+
<nav class="news-post-navigation" aria-label="News story navigation">
227+
<div class="news-post-navigation-item news-post-navigation-previous">
228+
{% if page.previous %}
229+
<a href="{{ page.previous.url }}">
230+
<span>Previous story</span>
231+
<strong>{{ page.previous.title | escape }}</strong>
232+
</a>
233+
{% endif %}
234+
</div>
235+
<a class="news-post-navigation-index" href="/news/">All News</a>
236+
<div class="news-post-navigation-item news-post-navigation-next">
237+
{% if page.next %}
238+
<a href="{{ page.next.url }}">
239+
<span>Next story</span>
240+
<strong>{{ page.next.title | escape }}</strong>
241+
</a>
242+
{% endif %}
243+
</div>
244+
</nav>
245+
246+
{% capture related_news_cards %}
247+
{% assign related_news_count = 0 %}
248+
{% for related_post in site.posts %}
249+
{% if related_post.url != page.url and related_post.categories contains primary_category %}
250+
{% assign related_teaser = related_post.teaser | default: "default_teaser.png" %}
251+
{% assign related_teaser_first_character = related_teaser | slice: 0, 1 %}
252+
{% if related_teaser contains "://" or related_teaser_first_character == "/" %}
253+
{% assign related_teaser_src = related_teaser %}
254+
{% else %}
255+
{% assign related_teaser_src = "/assets/news_graphics/" | append: related_teaser %}
256+
{% endif %}
257+
<article class="news-related-card">
258+
<a class="news-related-card-image" href="{{ related_post.url }}" aria-hidden="true" tabindex="-1">
259+
<img src="{{ related_teaser_src | escape }}" alt="" loading="lazy">
260+
</a>
261+
<div class="news-related-card-content">
262+
<time datetime="{{ related_post.date | date_to_xmlschema }}">{{ related_post.date | date: "%B %-d, %Y" }}</time>
263+
<h3><a href="{{ related_post.url }}">{{ related_post.title | escape }}</a></h3>
264+
</div>
265+
</article>
266+
{% assign related_news_count = related_news_count | plus: 1 %}
267+
{% if related_news_count == 3 %}{% break %}{% endif %}
268+
{% endif %}
269+
{% endfor %}
270+
{% endcapture %}
271+
272+
{% if related_news_cards contains "news-related-card" %}
273+
<section class="news-article-section news-related-stories" aria-labelledby="news-related-stories-heading">
274+
<div class="section-heading section-heading--bordered">
275+
<p class="section-eyebrow">More from the lab</p>
276+
<h2 id="news-related-stories-heading">Related news</h2>
277+
</div>
278+
<div class="news-related-grid">
279+
{{ related_news_cards }}
280+
</div>
281+
</section>
282+
{% endif %}
283+
</article>
284+
</main>
285+
</div>
286+
</div><!-- end container -->
44287
</div><!-- end main-wrap -->
45288

46289
{% include footer.html %}

0 commit comments

Comments
 (0)