Merge pull request #1549 from ubyssey/article-image-fixes

Article image fixes, and other minor fixes
ubyssey · Oct 2, 2024 · 6e69e85 · 6e69e85
2 parents c780df9 + 5ff05ef
commit 6e69e85
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 63 deletions.
diff --git a/article/templates/article/objects/author_card.html b/article/templates/article/objects/author_card.html
@@ -27,6 +27,8 @@
  {% if author.author.short_bio_description != "" %}
  <p>{{ author.author.short_bio_description }}</p>
  {% endif %}
- <li><a href="{{ author.author.full_url }}">See more from {{ author.author.full_name|safe }}</a></li> 
+ <ul>
+ <li><a href="{{ author.author.full_url }}">See more from {{ author.author.full_name|safe }}</a></li> 
+ <ul>
  </div>
 </div> 
diff --git a/article/templates/article/objects/fw_article_featured_media.html b/article/templates/article/objects/fw_article_featured_media.html
@@ -9,6 +9,8 @@
  {% image featured_image_object.image width-1500 format-webp as featured_image %}
  <img
  class="article-attachment"
+ width="{{ featured_image_object.width }}"
+ height="{{ featured_image_object.height }}"
  data-id="{{ featured_image_object.image.id }}"
  data-caption="{{ featured_image_object.caption }}"
  data-url="{{ featured_image.url }}"

diff --git a/authors/models.py b/authors/models.py
@@ -233,7 +233,7 @@ def organize_media(self, media_type, request, context):
 
  def get_context(self, request, *args, **kwargs):
  context = super().get_context(request, *args, **kwargs)
-
+ context["self"].featured_media = self.image
  media_types = []
  if VideoSnippet.objects.all().count() > 0:
  media_types.append("videos")

diff --git a/images/templates/images/stream_blocks/image_block.html b/images/templates/images/stream_blocks/image_block.html
@@ -2,15 +2,16 @@
 {% load wagtailimages_tags %}
 
 <div class="image-attachment attachment {{ self.style }} {{ self.width }} {% if self.click_to_enlarge %}setup-modal image-modal{% endif %}" >
- {% image self.image original as image %}
- <img class="article-attachment" data-id="{{ image.id }}" data-caption="{{ self.caption }}" data-credit="{{ self.credit }}" data-url="{{ image.url }}" src="{{ image.url }}" alt="{% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %}" />
+ {% image self.image width-1000 format-webp as image %}
+ {% image self.image original as ogImage %}
+ <img class="article-attachment" width="{{image.width}}" height="{{image.height}}" decoding="async" data-id="{{ image.id }}" data-caption="{{ self.caption }}" data-credit="{{ self.credit }}" data-url="{{ image.url }}" src="{{ image.url }}" alt="{% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %}" />
 
  {% if self.click_to_enlarge %}
- <a class="open-modal" href="#enlarge"></a>
+ <button class="open-modal" aria-label="Enlarge image"></button>
  <dialog class="modal close-modal hide js-dropdown-container">
  <div class="u-container u-container--large modal-contents">
- <div class="image-modal-image" style="background-image: url('{{image.url}}')"></div>
- <a class="close-modal focus-on" href="#close"><ion-icon name="close-circle"></ion-icon></a>
+ <div class="image-modal-image" style="background-image: url('{{ogImage.url}}')"></div>
+ <button class="close-modal focus-on" aria-label="Minimize image"><ion-icon name="close-circle"></ion-icon></button>
  </div>
  </dialog>
  {% endif %}

diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html
@@ -4,7 +4,7 @@
  <h3 class="issueText">{{ self.date }}</h3>
  {% if self.show_image and self.image %}
  {% image self.image width-700 format-webp as mag %}
- <img class="issue_img" src="{{mag.url}}" loading='lazy' alt="{{self.date}} Issue">
+ <img class="issue_img" src="{{mag.url}}" width="{{mag.width}}" height="{{mag.height}}" loading='lazy' alt="{{self.date}} Issue">
  {% endif %}
  </a>
 </li>
diff --git a/ubyssey/static_src/src/js/article.jsx b/ubyssey/static_src/src/js/article.jsx
@@ -1,30 +1,32 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Search from './components/Search.jsx';
-import { AdblockSplash, CookieDisclaimer } from './components/Cookies'
-import { Galleries } from './components/Gallery'
+//import Search from './components/Search.jsx';
+//import { AdblockSplash, CookieDisclaimer } from './components/Cookies'
+import { CookieDisclaimer } from './components/Cookies'
+//import { Galleries } from './components/Gallery'
 
 
 
-window.articleHeader = false;
+//window.articleHeader = false;
 
-const BOX_HEIGHT = 274
-const SKYSCRAPER_HEIGHT = 624
+//const BOX_HEIGHT = 274
+//const SKYSCRAPER_HEIGHT = 624
 
 $(function () {
-
+ /*
  ReactDOM.render(
  <AdblockSplash />,
  document.getElementById('adblock-splash')
  )
+ */
+
  ReactDOM.render(
  <CookieDisclaimer />,
  document.getElementById('cookie-disclaimer')
  )
-
-
+
 });
-
+/*
 if ($('main.article').length) {
 
  const $article = $('article');
@@ -43,13 +45,13 @@ if ($('main.article').length) {
  articleIds = articleIds.split(',');
  }
  
- /*
- var firstArticle = {
- id: articleId,
- headline: articleHeadline,
- url: articleURL
- };
- */
+ 
+ //var firstArticle = {
+ // id: articleId,
+ // headline: articleHeadline,
+ // url: articleURL
+ //};
+ 
 
  function stickyAds(scrollTop, stickyElements) {
 
@@ -202,19 +204,19 @@ if ($('main.article').length) {
  ];
 
 
- /*
- const gallery = ReactDOM.render(
- <Galleries galleries={galleries} />,
- document.getElementById('gallery')
- );
- */
+ 
+ //const gallery = ReactDOM.render(
+ // <Galleries galleries={galleries} />,
+ // document.getElementById('gallery')
+ //);
+ 
 
 
 }
 
-/*
-ReactDOM.render(
- <Search />,
- document.getElementById('search-form')
-);
+
+//ReactDOM.render(
+// <Search />,
+// document.getElementById('search-form')
+//);
 */
diff --git a/ubyssey/static_src/src/js/main.js b/ubyssey/static_src/src/js/main.js
@@ -1,5 +1,5 @@
 // import * as mp from './modules/Mixpanel'; //commented out because creepy af
-import upcomingEvents from './widgets/upcoming-events';
+//import upcomingEvents from './widgets/upcoming-events';
 import { initializeDarkModeToggle } from './darkmode';
 
 // self-executing js anonymous function
@@ -418,28 +418,6 @@ function openModal(modal) {
  disableScroll();
 }
 
-/*
-function moveModals() {
- var modalBlocks = document.getElementsByClassName("add-to-modal");
- var modal = document.getElementById("modal");
- var index = 0;
- while (modalBlocks.length > 0) {
- //modalBlocks[i].remove(); 
- var div = document.createElement("div");
- div.classList.add("openModal");
- div.setAttribute("modal", index);
-
- var mod = modalBlocks[0];
- mod.insertAdjacentElement("beforebegin", div);
- mod.classList.remove("add-to-modal");
- modal.appendChild(mod);
-
- modalBlocks = document.getElementsByClassName("add-to-modal");
- index = index + 1;
- } 
-}
-*/
-
 function initializeFilterDropdown() {
  $(document).on('click', 'a.filterDropdown', function (e) {
  e.preventDefault();

diff --git a/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss b/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss
@@ -39,13 +39,17 @@
  .c-button {
  // Structure
  margin: 0;
+ border: none;
+ padding: 0.5em 1em;
 
  // Background
  background-color: white;
 
  // Text
  font-size: 1rem;
  color: $color-accent-blue;
+
+ cursor: pointer;
 
  &:hover {
  // Background

diff --git a/ubyssey/static_src/src/styles/modules/_buttons.scss b/ubyssey/static_src/src/styles/modules/_buttons.scss
@@ -26,7 +26,7 @@ a.button, button {
  }
 
  &:active, &:focus {
- outline: none;
+ //outline: none;
  }
 
  &.large {

diff --git a/ubyssey/static_src/src/styles/modules/_core.scss b/ubyssey/static_src/src/styles/modules/_core.scss
@@ -324,7 +324,7 @@ div.image-inner {
 span.credit {
  margin-left: 0.5em;
  font-style: italic;
- color: #969696;
+ color: #888;
  white-space: pre;
 }
 

diff --git a/ubyssey/static_src/src/styles/modules/article/_author_card.scss b/ubyssey/static_src/src/styles/modules/article/_author_card.scss
@@ -63,6 +63,10 @@ div.article-content .author_card {
  margin-top: 0.5em;
  }
 
+ ul {
+ padding: 0;
+ }
+
  li {
  margin-left: 1em;
  }

diff --git a/ubyssey/static_src/src/styles/modules/article/_embeds.scss b/ubyssey/static_src/src/styles/modules/article/_embeds.scss
@@ -379,6 +379,7 @@ div.article-content {
 .image-attachment {
  img {
  width: 100%;
+ height: auto;
  }
 
  a {

diff --git a/ubyssey/static_src/src/styles/objects/_archive.scss b/ubyssey/static_src/src/styles/objects/_archive.scss
@@ -419,7 +419,11 @@ $search-bar-height: 50px;
 
 .image-modal {
  position: relative;
-
+ button {
+ margin: 0;
+ border: none;
+ background: none;
+ }
  .open-modal {
  position:absolute;
  top: 0;

diff --git a/ubyssey/templates/ubyssey/base.html b/ubyssey/templates/ubyssey/base.html
@@ -224,7 +224,6 @@
 
  {% comment %} <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> {% endcomment %}
 
- <script src="{% static 'ubyssey/js/vendors.js' %}" type="text/javascript"></script>
  <script src="{% static 'ubyssey/js/main.js' %}" type="text/javascript"></script>
  {% block scripts %}
  <script src="{% static 'ubyssey/js/article.js' %}" type="text/javascript"></script>