Merge pull request #1133 from ubyssey/1123-add-a-short-bio-of-the-aut…

…hor-before-the-article-Akshanjay

1123 add a short bio of the author before the article akshanjay

article/models.py

@@ -44,6 +44,7 @@
  ObjectList,
  TabbedInterface,
 )
+
 from wagtail.core import blocks
 from wagtail.core.fields import StreamField
 from wagtail.core.models import Page, PageManager, Orderable
@@ -55,6 +56,7 @@
 from wagtail.snippets.edit_handlers import SnippetChooserPanel
 from wagtail.snippets.models import register_snippet
 
+
 from wagtailmenus.models import FlatMenu
 
 from wagtailmodelchooser.edit_handlers import ModelChooserPanel
@@ -176,6 +178,18 @@ class ArticleAuthorsOrderable(Orderable):
  ('illustrator','Illustrator'),
  ('photographer','Photographer'),
  ('videographer','Videographer'),
+ ("coordinating editor", "Coordinating Editor"),
+ ("news editor", "News Editor"),
+ ("news producer", "News Producer"),
+ ("features editor", "Features Editor"),
+ ("humour editor", "Humour Editor"),
+ ("culture editor", "Culture Editor"),
+ ("opinion editor", "Opinion Editor"),
+ ("video editor", "Video Editor"),
+ ("photo editor", "Photo Editor"),
+ ("visuals editor", "Visuals Editor"),
+ ("sports editor", "Sports Editor"),
+ ("science editor", "Science Editor"),
  ],
  ),
  ),
@@ -478,7 +492,6 @@ class ArticlePage(SectionablePage, UbysseyMenuMixin):
  ],
  label = "Pull Quote",
  template = 'article/stream_blocks/quote.html',
- icon = "openquote",
  )),
  ('gallery', SnippetChooserBlock(
  target_model = GallerySnippet,
@@ -942,6 +955,7 @@ def get_context(self, request, *args, **kwargs):
 
  return context
 
+
  def get_authors_string(self, links=False, authors_list=[]) -> str:
  """
  Returns html-friendly list of the ArticlePage's authors as a comma-separated string (with 'and' before last author).
@@ -958,6 +972,7 @@ def format_author(article_author):
  authors = list(map(format_author, self.article_authors.all()))
  else:
  authors = list(map(format_author, authors_list))
+
 
  if not authors:
  return ""
@@ -975,6 +990,22 @@ def get_authors_with_urls(self) -> str:
  return self.get_authors_string(links=True)
  authors_with_urls = property(fget=get_authors_with_urls)
 
+ def get_authors_in_order(self):
+ AUTHOR_TYPES = ["author", "photographer", "illustrator", "videographer", "coordinating editor", "news editor", "news producer", "features editor", "humour editor", "culture editor", "opinion editor", "video editor", "photo editor", "visuals editor", "sports editor", "science editor"]
+ authors = self.article_authors.all()
+
+ authors_list = []
+
+ for author_type in AUTHOR_TYPES:
+ for author in authors:
+ if author.author_role == author_type:
+ authors_list.append(author)
+
+
+ return authors_list
+ authors_in_order = property(fget=get_authors_in_order)
+
+
  def get_authors_with_roles(self) -> str:
  """Returns list of authors as a comma-separated string
  sorted by author type (with 'and' before last author)."""
@@ -988,15 +1019,15 @@ def get_authors_with_roles(self) -> str:
  authors = dict((k, list(v)) for k, v in groupby(self.article_authors.all(), lambda a: a.author_role))
  for author in authors:
  if author == 'author':
- string_written += 'Written by ' + self.get_authors_string(links=True, authors_list=authors['author'])
+ authors_with_roles += 'Written by ' + self.get_authors_string(links=True, authors_list=authors['author'])
  if author == 'photographer':
  string_photos += 'Photos by ' + self.get_authors_string(links=True, authors_list=authors['photographer'])
  if author == 'illustrator':
  string_author += 'Illustrations by ' + self.get_authors_string(links=True, authors_list=authors['illustrator'])
  if author == 'videographer':
  string_videos += 'Videos by ' + self.get_authors_string(links=True, authors_list=authors['videographer'])
  if string_written != '':
- authors_with_roles += string_written
+ authors_with_roles += string_written # Unneccessary if statement
  if string_photos != '':
  authors_with_roles += ', ' + string_photos
  if string_author != '':

article/templates/article/article_like_special_page.html

@@ -16,6 +16,7 @@
  <main class="page">
  <div class="u-container u-container--content u-container--padded">
  <h1>{{ page.title }}</h1>
+ {% include "article/objects/author_bio.html" %}
  </div>
  <div class="u-container">
  <div class="row">

article/templates/article/article_page.html

@@ -37,36 +37,48 @@ <h3>BREAKING: {{ breaking.headline|safe }}</h3>
  </a> 
  {% endif %} {% endcomment %}
  </div>
+
  <div class="u-container u-container--content u-container--padded">
  <h1 class="o-headline o-headline--article">{{ self.title|safe }}</h1>
  <div class="c-article__info">
+ {% comment %}
+ {% include 'objects/social-icons.html' with article=article layout='top' %}
+ {% endcomment %}
+
+ <div class="c-authors_info">
+ {% include "article/objects/author_bio.html" %}
+ </div>
+
+ </div>
+
+ <div class="c-authors_bio_meta">
  <div class="c-article__byline">
- <div class="c-article__author">
- {{ self.authors_with_roles|safe }}
- </div>
+
  <div class="c-article__byline__meta">
- <span class="c-article__published-at">{{ self.published_at|date:'N j, Y' }}</span>
- {% comment %} 
- {% if reading_time %}
- <span> &nbsp;&middot;&nbsp; </span>
- <span class="c-article__reading-time">{{ reading_time }} min read</span>
- {% endif %}
- {% endcomment %}
- {% comment %}
- {% if article.subsection %}
- <span> &nbsp;&middot;&nbsp; </span>
- <a href="{{ article.subsection.get_absolute_url }}">
- <span class="c-article__reading-time">{{ article.subsection.name }}</span>
- </a>
- {% endif %}
- {% endcomment %}
+ <span class="c-article__published-at">Published on {{ self.published_at|date:'N j, Y' }}</span>
+
+ {% if reading_time %}
+ <span> &nbsp;&middot;&nbsp; </span>
+ <span class="c-article__reading-time">{{ reading_time }} min read</span>
+ {% endif %}
+
+ {% if article.subsection %}
+ <span> &nbsp;&middot;&nbsp; </span>
+ <a href="{{ article.subsection.get_absolute_url }}">
+ <span class="c-article__reading-time">{{ article.subsection.name }}</span>
+ </a>
+ {% endif %}
+
  </div>
+
  </div>
- {% comment %}
- {% include 'objects/social-icons.html' with article=article layout='top' %}
- {% endcomment %}
  </div>
- </div>
+ <div class="c-article__byline">
+ {% include 'article/objects/share_bar.html' %}
+ <span class="c-article_dark_mode">
+ {% include 'article/objects/darkmode_button.html'%}
+ </span>
+ </div>
  {% endblock %}
  <!-- Below is the container for Article content -->
  <div class="u-container clearfix {% block right_column_class %}{% comment %} This block is used to override the styling of the right column (as in e.g. a full width banner article){% endcomment %}{% endblock %}">
@@ -83,7 +95,7 @@ <h1 class="o-headline o-headline--article">{{ self.title|safe }}</h1>
  {% with self.featured_media.first as featured_image_object %}
  <div class="featured-media">
  {% image featured_image_object.image original as original_image %}
- {% image featured_image_object.image width-700 as featured_image %}
+ {% image featured_image_object.image width-500 as featured_image %}
  <img class="article-attachment" 
  data-id="{{ featured_image_object.id }}"
  data-caption="{% if featured_image_object.caption %}{{ featured_image_object.caption }}{% endif %}"
@@ -134,6 +146,7 @@ <h1 class="o-headline o-headline--article">{{ self.title|safe }}</h1>
  {% endwith %}
  {% endif %}
  {% endif %}
+
  <!-- Article text -->
  {% for block in self.content %}
  {% include_block block %}

article/templates/article/article_page_fw_story.html

@@ -46,6 +46,12 @@ <h1 class="headline">{{ self.title|safe }}</h1>
  <span class="author">By {{ self.get_authors_with_urls|safe }}</span> &nbsp;&middot;&nbsp; <span class="published">{{ self.published_at }}</span>
  </div>
  </div>
+ <div class="c-article__byline c-banner_share_dark_buttons c-article__byline-center">
+ {% include 'article/objects/share_bar.html' %}
+ <span class="c-article_dark_mode">
+ {% include 'article/objects/darkmode_button.html'%}
+ </span>
+ </div>
  {% if featured_image_object.caption or featured_image_object.credit %}
  <div class="caption">
  {% if featured_image_object.caption %}

article/templates/article/article_page_guide_2020.html

@@ -19,6 +19,7 @@
  {{ featured_image_object.credit }}
  {% endif %}
  </div>
+ {% include 'article/objects/share_bar.html' %}
  {% comment %} TODO: address weird field {% endcomment %}
  {% if article.template_fields.banner_quote and article.template_fields.banner_quote != ' ' %}
  {% comment %} TODO address "subsection" context variable use {% endcomment %}

article/templates/article/article_page_magazine_2023.html

@@ -48,15 +48,20 @@
  <main class="c-article">
  <div class="o-container">
  {% block banner %}
+
  <div class="u-container u-container--content u-container--padded">
  <p class="c-article__title">{{ self.title }}</p>
  <div class="c-article__info">
- <div class="c-article__byline">
- <div class="c-article__author">
- {{ self.authors_with_roles|safe }}
- </div>
+ {% comment %}
+ {% include 'objects/social-icons.html' with article=article layout='top' %}
+ {% endcomment %}
+ <div class="c-authors_info">
+ {% include "article/objects/author_bio.html" %}
  </div>
  </div>
+ <div class="c-article__info">
+ {% include 'article/objects/share_bar.html' %}
+ </div>
  {% if self.featured_media.first.image %}
  {% with self.featured_media.first as featured_image_object %}
  <div class="featured-media">

article/templates/article/objects/author_bio.html

@@ -0,0 +1,15 @@
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+
+{% for author in self.authors_in_order %}
+ {% if author.author.image and author.author.display_image %}
+ {% include "article/objects/author_card.html" with author=author %}
+ {% endif %}
+{% endfor %}
+
+
+{% for author in self.authors_in_order %}
+ {% if author.author.image == None or author.author.display_image == False %}
+ {% include "article/objects/author_card.html" with author=author %}
+ {% endif %}
+{% endfor %}

article/templates/article/objects/author_card.html

@@ -0,0 +1,32 @@
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load article_authors %}
+
+<div class="author_card">
+ {% if author.author.image and author.author.display_image %}
+ <div class="author_image_container">
+ {% image author.author.image width-200 class="author_image" %}
+ </div>
+ {% elif self.article_authors.all|all_no_images == True %}
+ <div class="author_image_container"></div>
+ {% else %}
+ <div class="author_image_container no_image"></div>
+ {% endif %}
+
+
+ <div class="authors_info_inner">
+ <div class="author_info">
+ <div class="author_title"><a href="{{ author.author.author.full_url }}">{{ author.author.full_name|safe }}</a></div> <div class="author_role">{{author.author_role}}</div> 
+ </div>
+
+ {% if author.author.short_bio_description != "" %}
+ <div class="author_info">
+ <div class="author_bio">{{ author.author.short_bio_description }}</div>
+ </div>
+ {% else %}
+ <div class="author_info">
+ <div class="author_space"></div> 
+ </div>
+ {% endif %}
+ </div>
+</div>

article/templates/article/objects/darkmode_button.html

@@ -0,0 +1,21 @@
+<meta name="color-scheme" content="light">
+
+<button class="theme-toggle dark-mode-switcher" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
+ <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+ <mask class="moon" id="moon-mask">
+ <rect x="0" y="0" width="100%" height="100%" fill="white" />
+ <circle cx="24" cy="10" r="6" fill="black" />
+ </mask>
+ <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
+ <g class="sun-beams" stroke="currentColor">
+ <line x1="12" y1="1" x2="12" y2="3" />
+ <line x1="12" y1="21" x2="12" y2="23" />
+ <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+ <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+ <line x1="1" y1="12" x2="3" y2="12" />
+ <line x1="21" y1="12" x2="23" y2="12" />
+ <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+ <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+ </g>
+ </svg>
+</button>

article/templates/article/objects/default.html

@@ -7,7 +7,7 @@
  <div class="o-article__left">
  <a class="o-article__image" href={% pageurl article %}>
  {% if article.featured_media.first.image %}
- {% image article.featured_media.first.image fill-680x476-c100 %}
+ {% image article.featured_media.first.image fill-340x238-c100 %}
  {% else %}
  <img src="http://img.youtube.com/vi/{{ article.featured_video.video.url|youtube_embed_id|safe }}/0.jpg" alt=""/>
  {% endif %}

article/templates/article/objects/featured.html

@@ -10,7 +10,7 @@
  {% if article.featured_media.first.image %}
  <div class="o-article__left">
  <a class="o-article__image" href="{% pageurl article %}">
- {% image article.featured_media.first.image fill-680x476-c100 %}
+ {% image article.featured_media.first.image fill-340x238-c100 %}
  </a>
  </div>
  {% elif article.featured_media.first.video %}

article/templates/article/objects/fw_article_headline_container.html

@@ -17,18 +17,45 @@ <h1 class="o-headline o-headline--article">
  {% if self.fw_above_cut_lede %}
  <p class="fw-description">{{ self.fw_above_cut_lede }}</p>
  {% endif %}
- <div class="c-article__byline c-article__byline-center">
- <div class="c-article__author">
- By {{ self.authors_with_urls|safe }} 
+
+ <div class="c-article__info">
+ {% comment %}
+ {% include 'objects/social-icons.html' with article=article layout='top' %}
+ {% endcomment %}
+
+ <div class="c-fw_authors_info">
+ {% include "article/objects/author_bio.html" %}
  </div>
- <div class="c-article__byline__meta">
- <span class="c-article__published-at">
- {{ self.published_at|date:'N j, Y' }}
- </span>
- {% if self.minutes_to_read %}
- <span> &nbsp;&middot;&nbsp; </span>
- <span class="c-article__reading-time">{{ self.minutes_to_read }} min read</span>
- {% endif %}
+
+ </div>
+
+ <div class="c-authors_bio_meta">
+ <div class="c-article__byline">
+
+ <div class="c-article__byline__meta">
+ <span class="c-article__published-at">Published on {{ self.published_at|date:'N j, Y' }}</span>
+
+ {% if reading_time %}
+ <span> &nbsp;&middot;&nbsp; </span>
+ <span class="c-article__reading-time">{{ reading_time }} min read</span>
+ {% endif %}
+
+ {% if article.subsection %}
+ <span> &nbsp;&middot;&nbsp; </span>
+ <a href="{{ article.subsection.get_absolute_url }}">
+ <span class="c-article__reading-time">{{ article.subsection.name }}</span>
+ </a>
+ {% endif %}
+
+ </div>
  </div>
+
  </div>
+ <div class="c-article__byline c-article_byline_fw">
+ {% include 'article/objects/share_bar.html' %}
+ <span class="c-article_dark_mode">
+ {% include 'article/objects/darkmode_button.html'%}
+ </span>
+ </div>
+
 </div>