From d41b6e113584ed59cf92939be5de41ec1aafaf26 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Wed, 4 Mar 2020 09:49:51 +0000
Subject: [PATCH] Reduce duplicated code and automate more things

Also change styling for article captions (author/when published)
---
 _includes/article-heading.html                  |  9 +++++++++
 _includes/image.html                            |  4 ++++
 _includes/mdc-card.html                         | 16 ++++++++++++++++
 _layouts/image-article.html                     | 10 +---------
 _layouts/sound-article.html                     | 11 +----------
 _layouts/video-article.html                     | 11 +----------
 _layouts/year.html                              | 17 +----------------
 ...-been-found-so-what-are-we-doing-about-it.md |  3 ++-
 ...he-roads-around-your-home-and-school-safe.md | 13 ++++---------
 ...eek-real-life-issues-inspire-sarah-govett.md |  8 +++-----
 _posts/2019-03-06-finished-product.md           |  1 +
 ...sa-parks-is-most-inspirational-woman-ever.md |  8 +++-----
 ...ate-as-redevelopment-plans-are-called-out.md |  8 +++-----
 ...games-virtual-fantasy-or-a-virtual-prison.md |  8 +++-----
 ...-06-what-is-in-the-patients-best-interest.md |  3 ++-
 .../2019-03-06-whats-next-for-reading-prison.md |  8 +++-----
 ...019-03-06-young-reporter-team-ready-to-go.md |  3 ++-
 index.md                                        | 17 +----------------
 18 files changed, 60 insertions(+), 98 deletions(-)
 create mode 100644 _includes/article-heading.html
 create mode 100644 _includes/image.html
 create mode 100644 _includes/mdc-card.html

diff --git a/_includes/article-heading.html b/_includes/article-heading.html
new file mode 100644
index 0000000..3aeae19
--- /dev/null
+++ b/_includes/article-heading.html
@@ -0,0 +1,9 @@
+<div class="parallax-section article-title-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');">
+    <h2 class="mdc-typography--headline3">{{ page.title }}</h2>
+</div>
+<figcaption class="mdc-typography--caption-text">{{ page.image-caption }} &bull; &copy; {{ page.copyright }}</figcaption>
+
+<h3 class="mdc-typography--subtitle1">
+    <time class="timeago" datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
+     &bull; by {{ page.authors }}
+</h3>
\ No newline at end of file
diff --git a/_includes/image.html b/_includes/image.html
new file mode 100644
index 0000000..f3f63e1
--- /dev/null
+++ b/_includes/image.html
@@ -0,0 +1,4 @@
+<figure>
+    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-{{ include.id }}.jpg" style="width:100%;">
+    <figcaption class="mdc-typography--caption-text">{{ include.caption }} &bull; &copy; {{ include.copyright }}</figcaption>
+</figure>
\ No newline at end of file
diff --git a/_includes/mdc-card.html b/_includes/mdc-card.html
new file mode 100644
index 0000000..d8412bd
--- /dev/null
+++ b/_includes/mdc-card.html
@@ -0,0 +1,16 @@
+<div class="mdc-card" onclick="window.location='{{ include.article.url | relative_url }}';">
+    <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ include.article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div>
+    <div class="mdc-card-content">
+        <h2 class="mdc-typography--headline6">{{ include.article.title }}</h2>
+        <h3 class="mdc-typography--subtitle2">
+            <time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ include.article.date | date: '%A %e %B %Y' }}</time>
+            &bull; by {{ include.article.authors }}
+        </h3>
+        <div class="mdc-typography--body2 article-description">{{ include.article.description }}</div>
+    </div>
+    <div class="mdc-card__actions">
+        <div class="mdc-card__action-buttons">
+            <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ include.article.url | relative_url }}';">Read</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/_layouts/image-article.html b/_layouts/image-article.html
index b1608e0..e24ae2a 100644
--- a/_layouts/image-article.html
+++ b/_layouts/image-article.html
@@ -14,15 +14,7 @@
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--short-fixed-adjust">
-                    <div class="parallax-section article-title-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');">
-                        <h2 class="mdc-typography--headline3">{{ page.title }}</h2>
-                    </div>
-                    <figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
-
-                    <h3 class="mdc-typography--subtitle1">
-                        <time class="timeago" datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
-                         | by {{ page.authors }}
-                    </h3>
+                    {% include article-heading.html %}
                     <div class="article-content">
                         {{ content }}
                     </div>
diff --git a/_layouts/sound-article.html b/_layouts/sound-article.html
index 05bcd41..e56674e 100644
--- a/_layouts/sound-article.html
+++ b/_layouts/sound-article.html
@@ -14,16 +14,7 @@
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--short-fixed-adjust">
-                    <div class="parallax-section article-title-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');">
-                        <h2 class="mdc-typography--headline3">{{ page.title }}</h2>
-                    </div>
-                    <figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
-                    
-                    <h3 class="mdc-typography--subtitle1">
-                        <time class="timeago"
-                            datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
-                        | by {{ page.authors }}
-                    </h3>
+                    {% include article-heading.html %}
                     <div class="article-content">
                         <audio controls>
                             <source src="{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.ogg" type="audio/ogg">
diff --git a/_layouts/video-article.html b/_layouts/video-article.html
index d5b1e83..13c4be1 100644
--- a/_layouts/video-article.html
+++ b/_layouts/video-article.html
@@ -14,16 +14,7 @@
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--short-fixed-adjust">
-                    <div class="parallax-section article-title-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');">
-                        <h2 class="mdc-typography--headline3">{{ page.title }}</h2>
-                    </div>
-                    <figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
-                    
-                    <h3 class="mdc-typography--subtitle1">
-                        <time class="timeago"
-                            datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
-                        | by {{ page.authors }}
-                    </h3>
+                    {% include article-heading.html %}
                     <div class="article-content">
                         <iframe src="https://www.youtube.com/embed/{{ page.video-id }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                         <figcaption class="mdc-typography--caption-text">{{ page.video-caption }}</figcaption>
diff --git a/_layouts/year.html b/_layouts/year.html
index 4992169..3b9385a 100644
--- a/_layouts/year.html
+++ b/_layouts/year.html
@@ -30,22 +30,7 @@
                             {% for article in articles %}
                             {% assign articleyear = article.date | date: "%Y" %}
                             {% if pageyear == articleyear %}
-                                <div class="mdc-card" onclick="window.location='{{ article.url | relative_url }}';">
-                                    <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div>
-                                    <div class="mdc-card-content">
-                                        <h2 class="mdc-typography--headline6">{{ article.title }}</h2>
-                                        <h3 class="mdc-typography--subtitle2">
-                                            <time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
-                                            | by {{ article.authors }}
-                                        </h3>
-                                        <div class="mdc-typography--body2 article-description">{{ article.description }}</div>
-                                    </div>
-                                    <div class="mdc-card__actions">
-                                        <div class="mdc-card__action-buttons">
-                                            <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
-                                        </div>
-                                    </div>
-                                </div>
+                                {% include mdc-card.html article=article %}
                             {% endif %}
                             {% endfor %}
                         </div>
diff --git a/_posts/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.md b/_posts/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.md
index afa8f06..e47fcf5 100644
--- a/_posts/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.md
+++ b/_posts/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.md
@@ -2,7 +2,8 @@
 title: A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?
 date: 2019-03-06 13:38
 authors: Luke H
-image-caption: An anorexic girl | &copy; Getty
+image-caption: An anorexic girl
+copyright: Getty
 description: On the 27 February 2019, a possible link between autism and anorexia was discovered by Autistica, a charity devoted to making autistic people happy and healthy. They stated findings that suggested one in five women with anorexia may also have autism. Their Head of Science, Dr James Cusack, has pushed for the National Institute for Health and Clinical Excellence (NICE) to change their guidance to reflect this.
 ---
 
diff --git a/_posts/2019-03-06-are-the-roads-around-your-home-and-school-safe.md b/_posts/2019-03-06-are-the-roads-around-your-home-and-school-safe.md
index 83081da..4edc4b3 100644
--- a/_posts/2019-03-06-are-the-roads-around-your-home-and-school-safe.md
+++ b/_posts/2019-03-06-are-the-roads-around-your-home-and-school-safe.md
@@ -2,7 +2,8 @@
 title: Are The Roads Around Your Home And School Safe?
 date: 2019-03-06 14:46
 authors: Riley C, Oliver C
-image-caption: An example of a car parking on a double yellow line | &copy; Getty
+image-caption: An example of a car parking on a double yellow line
+copyright: Getty
 description: The Royal Berkshire Hospital earlier this month released a study revealing that there has been a 45% increase in accidents involving children and vulnerable pedestrians walking in Reading between February 2018 to 2019. Now, many students may not feel safe when walking in Reading.
 ---
 
@@ -20,14 +21,8 @@ The effects of this behaviour can be seen in the morning when commuting motorist
 
 There are three main types of collisions on roads: pedestrian/cyclist collision, a side impact collision and a head-on collision.  The Road Safety Foundation provided our BBC Young Reporter team with evidence that pedestrians and cyclists are more susceptible to injury even at lower speeds.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">A graph showing the probability of fatality for motor accidents | &copy; Getty</figcaption>
-</figure>
+{% include image.html id=1 caption="A graph showing the probability of fatality for motor accidents" copyright="Getty" %}
 
 Reading School’s Head Master Mr Robson has recently given students advice on how to keep themselves safe when walking home, recommending that they do not take out their mobile devices and instead pay attention to their surroundings.  RoSPA also says that young pedestrians should wear reflective clothing during winter months and practice the Green Cross Code.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-2.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">An example of cars blocking the path for disabled and elderly people | &copy; BBC</figcaption>
-</figure>
+{% include image.html id=2 caption="An example of cars blocking the path for disabled and elderly people" copyright="BBC" %}
\ No newline at end of file
diff --git a/_posts/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.md b/_posts/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.md
index 055705f..b20da63 100644
--- a/_posts/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.md
+++ b/_posts/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.md
@@ -2,7 +2,8 @@
 title: Book Week - Real Life Issues Inspire Sarah Govett
 date: 2019-03-06 14:14
 authors: Aadith C, Adit S, Adi V
-image-caption: Sarah Govett visited Reading School as part of Book Week | &copy; Reading School
+image-caption: Sarah Govett visited Reading School as part of Book Week
+copyright: Reading School
 description: Sarah Govett, author of the critically acclaimed ‘Territory’ series, discussed with us writing, life and everything in between.
 ---
 
@@ -18,10 +19,7 @@ Ms Govett also spoke about the real-life issues that the book addresses, stating
 
 Global warming and climate change, as far-fetched as it is in the ‘Territory’ series is a growing issue in real life. Research in 2018 by NASA scientists shows that the sea level will rise by 1-4 feet by 2100 at the current rate. So, the partial submerging portrayed in the ‘Territory’ books could not be as far off as you imagine.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">Sarah Govett's books are set in a world where global warming has wrecked the planet | &copy; Reading School</figcaption>
-</figure>
+{% include image.html id=1 caption="Sarah Govett's books are set in a world where global warming has wrecked the planet" copyright="Reading School" %}
 
 She also said, “I don’t like dystopia where people are evil for the sake of being evil. I like to have the people doing wrong things to have a reason. The ‘Territory’ series shows how global warming can do this.”
 
diff --git a/_posts/2019-03-06-finished-product.md b/_posts/2019-03-06-finished-product.md
index cb09120..9229d34 100644
--- a/_posts/2019-03-06-finished-product.md
+++ b/_posts/2019-03-06-finished-product.md
@@ -3,4 +3,5 @@ title: The Finished Product
 date: 2019-03-06 15:52
 authors: Mr Baldock
 image-caption: Reading School's 2019 BBC Young Reporter team at the end of the day
+copyright: Reading School
 ---
diff --git a/_posts/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.md b/_posts/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.md
index eab4cb6..f7bebfd 100644
--- a/_posts/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.md
+++ b/_posts/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.md
@@ -2,7 +2,8 @@
 title: Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever
 date: 2019-03-06 14:38
 authors: Tom S-R, Ben S-R
-image-caption: Rosa Parks - who topped the poll | &copy; BBC
+image-caption: Rosa Parks - who topped the poll
+copyright: BBC
 description: Tomorrow is International Women’s Day (7th March 2019) and we went around our school finding out who people in the school environment thought was the most inspirational woman ever. 90 students and staff took part in the survey which crowned Rosa Parks as the winner.
 ---
 
@@ -20,7 +21,4 @@ The response from teachers was extremely diverse; each of the thirteen teachers
 
 What is clear from our poll is that there are is really diverse range of women who have inspired this generation. With the English Women’s football team winning the ‘SheBelives’ cup against Japan in the USA last night, that there are many more women inspiring others every day.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">The results from our student survey | &copy; Reading School</figcaption>
-</figure>
+{% include image.html id=1 caption="The results from our student survey" copyright="Reading School" %}
diff --git a/_posts/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.md b/_posts/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.md
index d4f16e4..d5efadc 100644
--- a/_posts/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.md
+++ b/_posts/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.md
@@ -2,7 +2,8 @@
 title: Tennis Club Needs To Relocate As Redevelopment Plans Are Called ‘Out’
 date: 2019-03-06 12:32
 authors: Hal R-D
-image-caption: A rainy winters day at Caversham lawn tennis club | &copy; Reading School
+image-caption: A rainy winters day at Caversham lawn tennis club
+copyright: Reading School
 description: A ninety-nine year old sports institution is looking for a new home; club member and BBC Young Reporter Hal investigates.
 ---
 
@@ -23,10 +24,7 @@ Others objected to the planning application by expressing fears of the damaging
 
 Whilst Vivien Jameson, also a close neighbour to the club, said she felt: “sad, I’d much prefer the area to stay as a tennis club, people need exercise”. She explained that some of her next-door neighbours felt the same although others obviously have different views.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">An excellent view of 4 courts at Caversham Lawn Tennis Club | &copy; Reading School</figcaption>
-</figure>
+{% include image.html id=1 caption="An excellent view of 4 courts at Caversham Lawn Tennis Club" copyright="Reading School" %}
 
 **Now the club was faced with a big question.**
 
diff --git a/_posts/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.md b/_posts/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.md
index 9f7d4da..4a86d84 100644
--- a/_posts/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.md
+++ b/_posts/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.md
@@ -2,7 +2,8 @@
 title: Video Games - Virtual Fantasy Or A Virtual Prison?
 date: 2019-03-06 12:19
 authors: Kamran S
-image-caption: Fortnite - one of the world's biggest video games | &copy; Getty
+image-caption: Fortnite - one of the world's biggest video games
+copyright: Getty
 description: "With Fortnite Season 8 unveiled last week, Tom Clancy’s Rainbow 6 Siege Year 4 beginning yesterday and two of the world’s most anticipated games, Red Dead Redemption 2 and Call of Duty: Black Ops 4, just released, there’s no better time for young people to be educated on how to stay safe while gaming. Xbox player and Rainbow 6 enthusiast Kamran S reports on the issues to do with bullying in video games."
 ---
 
@@ -20,10 +21,7 @@ Firstly, why does bullying occur in video games?   Experienced gamers in the Rea
 
 In competitive game modes, where players are pitted against the best of the best in order to improve their rank to show how good they are (such as Tom Clancy’s Rainbow Six Siege, Call of Duty and FIFA), players can be led astray from the actual enjoyment of the game into being the best at it out of their friend group. Ben says: “one of the main reasons bullying whilst gaming takes place is because someone is better than the bully but the bully wants to be the best at the game, so he goes against the player he is playing with.” They may go about this in many ways in order to get the player angry or upset making them play worse, forcing them to do something in retaliation in order to make them look worse than the person doing it in the first place or making them quit the game and stop playing video games altogether.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">Competitive e-sports competitions are beginning to attract thousands of competitors and millions of viewers | &copy; Getty</figcaption>
-</figure>
+{% include image.html id=1 caption="Competitive e-sports competitions are beginning to attract thousands of competitors and millions of viewers" copyright="Getty" %}
 
 Gamers we spoke to also said that in more casual situations, where the players are looking for an escape from the competitive category just looking for a game situation where no one is judged to be better or worse than anyone else, the reasons to bully may be more minor and possibly even pettier. “Maybe the bully’s favourite character was picked by someone else and now since they can’t play as him/her or maybe there was a situation in the last round where a player may have not used simple game logic and the bully may just be angry at them and wants them to feel bad about that last round,” explained Tom.
 
diff --git a/_posts/2019-03-06-what-is-in-the-patients-best-interest.md b/_posts/2019-03-06-what-is-in-the-patients-best-interest.md
index 1b86799..2125537 100644
--- a/_posts/2019-03-06-what-is-in-the-patients-best-interest.md
+++ b/_posts/2019-03-06-what-is-in-the-patients-best-interest.md
@@ -2,7 +2,8 @@
 title: What Is 'In The Patient's Best Interest’?
 date: 2019-03-06 11:46
 authors: Aadith C
-image-caption: Disagreements, difficult decisions and assisted dying. What is 'in the patient's best interest'? | &copy; BBC
+image-caption: Disagreements, difficult decisions and assisted dying. What is 'in the patient's best interest'?
+copyright: BBC
 description: The Royal College of Physicians (RCP) has announced they are polling their fellows and members on their stance on assisted dying. The poll opened on the 5th of February and it closed on the 1st of March. The RCP is yet to release the results. The debate has been reignited by a public push to look into what the patient’s ‘best interest’ is in many different scenarios.
 ---
 
diff --git a/_posts/2019-03-06-whats-next-for-reading-prison.md b/_posts/2019-03-06-whats-next-for-reading-prison.md
index 64deb94..b1cb3b6 100644
--- a/_posts/2019-03-06-whats-next-for-reading-prison.md
+++ b/_posts/2019-03-06-whats-next-for-reading-prison.md
@@ -2,7 +2,8 @@
 title: What's Next For Reading Prison?
 date: 2019-03-06 10:38
 authors: Tom S-R, Ben S-R
-image-caption: A view of one of the prison buildings | &copy; BBC
+image-caption: A view of one of the prison buildings
+copyright: BBC
 description: After being shut 63 months ago, Reading Gaol has remained unused. Reading East MP Matt Rodda says, during this time, "The government has spent over one million pounds on just maintaining the site … whilst homelessness has increased in our borough [Reading East] by 700%." Currently a feasibility study is being undertaken by Theatre and Arts Reading (TAR) and is nearing completion. Mrs Scott, the TAR Executive Secretary said TAR hopes "to have some sort of public announcement in March which will update everyone on what is happening."
 ---
 
@@ -46,7 +47,4 @@ Matt Rodda MP suggests that members of the public who want to support the projec
 
 In addition to the many educational and cultural benefits of this theatre and arts venue vision, many in the local community and beyond feel that it would be a fitting conclusion to the story of Oscar Wilde and Reading Gaol.
 
-<figure>
-    <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--extra-1.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">An inside view of the prison | &copy; BBC</figcaption>
-</figure>
+{% include image.html id=1 caption="An inside view of the prison" copyright="BBC" %}
diff --git a/_posts/2019-03-06-young-reporter-team-ready-to-go.md b/_posts/2019-03-06-young-reporter-team-ready-to-go.md
index 71db5a7..fe94b51 100644
--- a/_posts/2019-03-06-young-reporter-team-ready-to-go.md
+++ b/_posts/2019-03-06-young-reporter-team-ready-to-go.md
@@ -2,7 +2,8 @@
 title: Reading School's BBC Young Reporter Team… Ready To Go!
 date: 2019-03-06 9:36
 authors: Mr Baldock
-image-caption: Reading School's 2019 BBC Young Reporter team | &copy; Reading School
+image-caption: Reading School's 2019 BBC Young Reporter team
+copyright: Reading School
 description: Here are our intrepid Young Reporters, chomping at the bit to bring you lots of terrific stories about Reading School, our local area and the amazing things happening here.  And rest assured, this will be a Brexit-free zone.
 ---
 
diff --git a/index.md b/index.md
index b9466b7..ef22d79 100644
--- a/index.md
+++ b/index.md
@@ -26,22 +26,7 @@ layout: home
 {% endif %}
 {% if currentdate_count < 3 %}
 {% assign currentdate_count = currentdate_count | plus: 1 %}
-<div class="mdc-card" onclick="window.location='{{ article.url | relative_url }}';">
-    <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div>
-    <div class="mdc-card-content">
-        <h2 class="mdc-typography--headline6">{{ article.title }}</h2>
-        <h3 class="mdc-typography--subtitle2">
-            <time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
-            | by {{ article.authors }}
-        </h3>
-        <div class="mdc-typography--body2 article-description">{{ article.description }}</div>
-    </div>
-    <div class="mdc-card__actions">
-        <div class="mdc-card__action-buttons">
-            <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
-        </div>
-    </div>
-</div>
+    {% include mdc-card.html article=article %}
 {% endif %}
 {% if currentdate != date %}
 {% endif %}