Skip to content

Commit 6d33efb

Browse files
author
dylansheils
committed
Carousel Update
1 parent a699e4a commit 6d33efb

22 files changed

+1523
-8
lines changed

‎.build

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Mon 14 Mar 2022 09:12:28 PM EDT

‎changes.zip

9.95 KB
Binary file not shown.

‎changes/core/core/article_page.html

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
{% extends "base.html" %}
2+
3+
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags rich_text cache %}
4+
{% cache 60 page request.is_preview %}
5+
6+
{% block extra_head %}
7+
<link rel="canonical" href="{{ page.full_url }}">
8+
{% for tag, val in page.get_meta_tags.items %}
9+
<meta property="{{tag}}" content="{{val}}">
10+
{% endfor %}
11+
{% endblock %}
12+
13+
{% block body_class %}template-articlepage{% endblock %}
14+
15+
{% block content %}
16+
<article>
17+
<div class="container narrow">
18+
{% if page.kicker %}
19+
<strong class="text-primary text-uppercase text-kicker">{{ page.kicker }}</strong>
20+
{% endif %}
21+
<h1 class="article-headline mb-3">{{ page.headline|richtext_unwrapped }}</h1>
22+
{% if page.subdeck %}
23+
<h4 class="article-subdeck mb-4">{{ page.subdeck|richtext_unwrapped }}</h4>
24+
{% endif %}
25+
</div>
26+
{% if page.featured_image %}
27+
<div class="featured-photo mt-4 mb-4 d-flex flex-column align-items-center">
28+
{% image page.featured_image width-1200 as photo %}
29+
<div class="img-container">
30+
<img class="" src="{{ photo.url }}">
31+
32+
</div>
33+
{% if page.featured_caption or photo.image.photographer %}
34+
<div class="meta container mt-1 mb-2">
35+
{% if page.featured_caption %}
36+
<span class="caption text-dark">{{ page.featured_caption|richtext_unwrapped }}</span>
37+
{% endif %}
38+
{% if page.featured_image.photographer %}
39+
<span class="small text-muted text-nowrap">
40+
{{ page.featured_image.get_attribution_html }}
41+
</span>
42+
{% endif %}
43+
</div>
44+
{% endif %}
45+
</div>
46+
{% endif %}
47+
<div class="container narrow mb-4">
48+
{% if authors %}
49+
<span class="authors mr-1">
50+
By {% for author in authors %}
51+
{% if forloop.last and authors|length > 1 %} and {% endif %}
52+
{% if author.staff_page %}
53+
<a class="author-name" href="{% pageurl author.staff_page %}">{{ author.staff_page.name }}</a>{% if not forloop.last and authors|length > 2 %}, {% endif %}
54+
{% else %}
55+
<span class="author-name">{% firstof author.rich_name|richtext_unwrapped author.name %}</span>{% if not forloop.last and authors|length > 2 %}, {% endif %}
56+
{% endif %}
57+
{% endfor %}
58+
</span>
59+
{% endif %}
60+
<a class="text-muted small published-date text-nowrap" href="{% pageurl page %}">
61+
{{ page.get_published_date|date:"F j, Y" }}
62+
</a>
63+
</div>
64+
65+
<div class="body">
66+
{% for block in page.body %}
67+
{% if block.block_type == 'photo' %}
68+
<div class="photo-block d-flex flex-column align-items-center {{ block.value.size }}">
69+
{% if block.value.size == 'small' %}
70+
{% image block.value.image width-1000 as photo %}
71+
{% elif block.value.size == 'medium' %}
72+
{% image block.value.image width-1400 as photo %}
73+
{% else %}
74+
{% image block.value.image width-2000 as photo %}
75+
{% endif %}
76+
77+
<img class="" src="{{ photo.url }}">
78+
{% if block.value.caption or photo.image.photographer %}
79+
<div class="meta container mt-1">
80+
{% if block.value.caption %}
81+
<span class="caption text-dark">{{ block.value.caption.source|richtext_unwrapped }}</span>
82+
{% endif %}
83+
{% if photo.image.photographer %}
84+
<span class="small text-muted">
85+
{{ photo.image.get_attribution_html }}
86+
</span>
87+
{% endif %}
88+
</div>
89+
{% endif %}
90+
</div>
91+
{% elif block.block_type == 'photo_gallery' %}
92+
<div class="photo-gallery" data-controller="photo-gallery">
93+
<div class="large-photo flex-column" data-target="photo-gallery.largePhoto" data-action="click->photo-gallery#dismissPhoto">
94+
<div class="wrapper">
95+
<div class="img-container d-flex align-items-center justify-content-center">
96+
<img data-target="photo-gallery.largePhotoImg">
97+
</div>
98+
<p>
99+
<span data-target="photo-gallery.largePhotoCaption" class="text-dark"></span>
100+
<span data-target="photo-gallery.largePhotoPhotographer" class="small text-muted"></span>
101+
</p>
102+
</div>
103+
</div>
104+
<div class="container d-flex flex-row justify-content-center flex-wrap mb-n4">
105+
{% for gallery_photo in block.value %}
106+
<div class="photo col-6 col-lg-4 mb-4">
107+
{% image gallery_photo.image fill-600x600 as small_photo %}
108+
{% image gallery_photo.image max-2000x1500 as large_photo %}
109+
<a data-action="photo-gallery#showPhoto mouseover->photo-gallery#hoverPhoto">
110+
<img class="" src="{{ small_photo.url }}" data-target="photo-gallery.photo" data-large-src="{{ large_photo.url }}" data-caption="{{ gallery_photo.caption.source|richtext_unwrapped }}" data-photographer='{{ gallery_photo.image.get_attribution_html }}'>
111+
</a>
112+
</div>
113+
{% endfor %}
114+
</div>
115+
</div>
116+
{% elif block.block_type == 'embed' %}
117+
<div class="embed d-flex flex-column align-items-center {{ block.value.size }}">
118+
{% if block.value.type == 'video' %}
119+
<div class="container-fluid embed video embed-responsive embed-responsive-16by9">
120+
{% embed block.value.embed.url %}
121+
</div>
122+
{% else %}
123+
<div class="container embed narrow embed-responsive embed-responsive-21by9">
124+
{% embed block.value.embed.url %}
125+
</div>
126+
{% endif %}
127+
</div>
128+
{% else %}
129+
<div class="container narrow">
130+
{% include_block block %}
131+
</div>
132+
{% endif %}
133+
{% endfor %}
134+
</div>
135+
136+
</article>
137+
138+
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
139+
<div class="carousel-inner">
140+
{% for loop_cycle in self.carousel_images.all %}
141+
{% image loop_cycle.carousel_image fill-600x600 as img %}
142+
<div class="carousel-item{% if forloop.counter == 1 %} active{% endif %}">
143+
<img src="{{ img.url }}" class="d-block w-100" alt="{{ img.alt }}">
144+
</div>
145+
{% endfor %}
146+
</div>
147+
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
148+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
149+
<span class="sr-only">Previous</span>
150+
</a>
151+
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
152+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
153+
<span class="sr-only">Next</span>
154+
</a>
155+
</div>
156+
157+
{% if page.get_related_articles %}
158+
<div class="container related-articles">
159+
<h4>Related articles</h4>
160+
<hr>
161+
<div class="row">
162+
{% for article in page.get_related_articles %}
163+
<a href="{% pageurl article %}" class="related-article col col-sm-6 col-md-4 col-lg-3 flex-column align-items-start mb-4 mb-sm-0 {% if forloop.counter > 3 %}d-none d-lg-flex{% elif forloop.counter > 2 %}d-none d-md-flex{% else %}d-flex{% endif %}">
164+
{% if article.featured_image %}
165+
{% image article.featured_image width-1200 as photo %}
166+
<img class="img-fluid mb-3" src="{{ photo.url }}">
167+
{% endif %}
168+
{% if article.kicker %}
169+
<strong class="d-inline-block mb-0 text-primary text-uppercase text-kicker">{{ article.kicker }}</strong>
170+
{% endif %}
171+
<h3 class="mb-2 headline text-dark">{{ article.headline|richtext_unwrapped }}</h3>
172+
</a>
173+
{% endfor %}
174+
</div>
175+
</div>
176+
{% endif %}
177+
{% endblock %}
178+
{% endcache %}
179+

0 commit comments

Comments
 (0)