[FEATURE] Add avatars to author listing

TYPO3GmbH · Nov 19, 2020 · 2ed0cf9 · 2ed0cf9
1 parent b4c2e8b
commit 2ed0cf9
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 18 deletions.
diff --git a/Resources/Private/Partials/Comments/Comment.html b/Resources/Private/Partials/Comments/Comment.html
@@ -1,7 +1,7 @@
 <f:spaceless>
     <article id="comment-{comment.uid}" class="postcomment" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
         <div class="postcomment__avatar">
-            <blogvh:gravatar class="postcomment__avatarimage" email="{comment.email}" />
+            <blogvh:gravatar class="postcomment__avatarimage blogavatar" email="{comment.email}" />
         </div>
         <div class="postcomment__body">
             <div class="postcomment__author" itemprop="author" itemscope itemtype="http://schema.org/Person">

diff --git a/Resources/Private/Partials/List/Author.html b/Resources/Private/Partials/List/Author.html
@@ -1,4 +1,9 @@
 <div class="bloglist__item bloglist__item--author">
+    <div class="bloglist__image">
+        <f:variable name="avatarsize" value="{settings.authors.avatar.provider.size as integer}" />
+        <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="32" /></f:else></f:if>
+        <img class="bloglist__imageavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
+    </div>
     <h2 class="bloglist__title" itemprop="name">
         <blogvh:link.author author="{author}" />
     </h2>

diff --git a/Resources/Private/Partials/Meta/Elements/Authors.html b/Resources/Private/Partials/Meta/Elements/Authors.html
@@ -14,7 +14,7 @@
                         <f:if condition="{avatarSettings.enable}">
                             <f:variable name="avatarsize" value="{avatarSettings.size as integer}" />
                             <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="24" /></f:else></f:if>
-                            <span class="postmetagroup__listprefix"><img class="postmetagroup__listavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image"></span>
+                            <span class="postmetagroup__listprefix"><img class="postmetagroup__listavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image"></span>
                         </f:if>
                         <span class="postmetagroup__listtext" data-prefix="{f:translate(key:'meta.authors.author')}"><f:render section="ProfileLink" arguments="{author: author}" contentAs="content">{author.name}</f:render></span>
                     </span>

diff --git a/Resources/Private/Partials/Post/Author.html b/Resources/Private/Partials/Post/Author.html
@@ -3,7 +3,7 @@
         <div class="postauthor__avatar">
             <f:variable name="avatarsize" value="{settings.authors.avatar.provider.size as integer}" />
             <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="32" /></f:else></f:if>
-            <img class="postauthor__avatarimage" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
+            <img class="postauthor__avatarimage blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
         </div>
         <div class="postauthor__body">
             <div class="postauthor__intro"><f:translate key="author.aboutTheAuthor"/></div>

diff --git a/Resources/Private/Scss/frontend/components/blog/_avatar.scss b/Resources/Private/Scss/frontend/components/blog/_avatar.scss
@@ -0,0 +1,8 @@
+/**
+ * Avatar
+ */
+.blogavatar {
+    display: block;
+    border-radius: 50%;
+    overflow: hidden;
+}
diff --git a/Resources/Private/Scss/frontend/components/blog/_list.scss b/Resources/Private/Scss/frontend/components/blog/_list.scss
@@ -7,6 +7,13 @@
         margin-top: 0;
     }
 }
+.bloglist__image {
+    margin-bottom: 1rem;
+}
+.bloglist__imageavatar {
+    margin-left: auto;
+    margin-right: auto;
+}
 .bloglist__description {
     margin-top: .5rem;
     margin-bottom: .5rem;

diff --git a/Resources/Private/Scss/frontend/components/post/_author.scss b/Resources/Private/Scss/frontend/components/post/_author.scss
@@ -12,11 +12,6 @@
 .postauthor__avatar {
     margin-right: 1rem;
 }
-.postauthor__avatarimage {
-    display: block;
-    border-radius: 50%;
-    overflow: hidden;
-}
 .postauthor__body {
     flex-grow: 1;
     > *:last-child {

diff --git a/Resources/Private/Scss/frontend/components/post/_comment.scss b/Resources/Private/Scss/frontend/components/post/_comment.scss
@@ -12,11 +12,6 @@
 .postcomment__avatar {
     margin-right: 1rem;
 }
-.postcomment__avatarimage {
-    display: block;
-    border-radius: 50%;
-    overflow: hidden;
-}
 .postcomment__body {
     flex-grow: 1;
     > *:last-child {

diff --git a/Resources/Private/Scss/frontend/components/post/_metagroup.scss b/Resources/Private/Scss/frontend/components/post/_metagroup.scss
@@ -49,10 +49,6 @@
     margin-right: .25rem;
     line-height: 1;
 }
-.postmetagroup__listavatar {
-    display: inline-block;
-    border-radius: 50%;
-}
 
 /**
  * Simple

diff --git a/Resources/Private/Scss/frontend/frontend.scss b/Resources/Private/Scss/frontend/frontend.scss
@@ -3,6 +3,7 @@
  */
 @import "components/blog/container";
 @import "components/blog/list";
+@import "components/blog/avatar";
 @import "components/blog/archive";
 @import "components/blog/badge";
 @import "components/blog/icons";

diff --git a/Resources/Public/Css/frontend.min.css b/Resources/Public/Css/frontend.min.css