[FEATURE] Provide dedicated featured image

The new featured image field will now be the preferred way to set an article image. Since the media field could contain any asset the new featured image field is dedicated to images. You can configure the width and hight through typoscript constants. plugin.tx_blog.settings.post.featuredImage.width = 1140 plugin.tx_blog.settings.post.featuredImage.height= 400c plugin.tx_blog.settings.lists.featuredImage.width = 1140 plugin.tx_blog.settings.lists.featuredImage.height= 400c
TYPO3GmbH · Aug 25, 2019 · b7c1e6f · b7c1e6f
1 parent b4e4ac4
commit b7c1e6f
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 2 deletions.
diff --git a/Classes/Domain/Model/Post.php b/Classes/Domain/Model/Post.php
@@ -14,6 +14,7 @@
 use T3G\AgencyPack\Blog\Domain\Repository\CommentRepository;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Annotation as Extbase;
+use TYPO3\CMS\Extbase\Domain\Model\FileReference;
 use TYPO3\CMS\Extbase\DomainObject\AbstractEntity;
 use TYPO3\CMS\Extbase\Mvc\Web\Routing\UriBuilder;
 use TYPO3\CMS\Extbase\Object\ObjectManager;
@@ -100,6 +101,11 @@ class Post extends AbstractEntity
      */
     protected $media;
 
+    /**
+     * @var \TYPO3\CMS\Extbase\Domain\Model\FileReference
+     */
+    protected $featuredImage;
+
     /**
      * @var int
      */
@@ -447,6 +453,22 @@ public function setMedia(ObjectStorage $media): self
         return $this;
     }
 
+    public function getFeaturedImage(): ?FileReference
+    {
+        $featuredImage = $this->featuredImage;
+        if (!empty($featuredImage) && $featuredImage !== 0) {
+            return $featuredImage;
+        } else {
+            return null;
+        }
+    }
+
+    public function setFeaturedImage(?FileReference $featuredImage): self
+    {
+        $this->featuredImage = $featuredImage ?? 0;
+        return $this;
+    }
+
     /**
      * @return int
      */

diff --git a/Configuration/TCA/Overrides/pages.php b/Configuration/TCA/Overrides/pages.php
@@ -174,6 +174,18 @@
                 ]
             ],
         ],
+        'featured_image' => [
+            'exclude' => true,
+            'label' => $ll . 'pages.featured_image',
+            'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
+                'featured_image',
+                [
+                    'minitems' => 0,
+                    'maxitems' => 1,
+                ],
+                $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
+            ),
+        ],
     ]
 );
 
@@ -191,7 +203,7 @@
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
     'pages',
     '--div--;' . $ll . 'pages.tabs.blog,
-    --palette--;' . $ll . 'pages.palettes.publish_date;publish_date, archive_date, tags, authors, comments_active, comments',
+    --palette--;' . $ll . 'pages.palettes.publish_date;publish_date, featured_image, archive_date, tags, authors, comments_active, comments',
     (string) \T3G\AgencyPack\Blog\Constants::DOKTYPE_BLOG_POST
 );
 

diff --git a/Configuration/TypoScript/Static/constants.typoscript b/Configuration/TypoScript/Static/constants.typoscript
@@ -16,10 +16,12 @@
 
 # customcategory=blog_post=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customcategory.post
 # customsubcategory=100_blog_post=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.post
+# customsubcategory=101_blog_post_featuredImage=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.post.featuredimage
 # customsubcategory=110_blog_post_header=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.post.header
 # customsubcategory=120_blog_post_footer=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.post.footer
 
 # customcategory=blog_list=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customcategory.list
+# customsubcategory=100_blog_list_featuredimage=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.list.featuredimage
 # customsubcategory=200_blog_list_element=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.list.element
 # customsubcategory=210_blog_list_element_header=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.list.element.header
 # customsubcategory=220_blog_list_element_footer=LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.customsubcategory.list.element.footer
@@ -181,7 +183,22 @@ plugin {
                 }
             }
 
+            post {
+                featuredImage {
+                    # cat=blog_post/101_blog_post_featuredImage; type=string; label= LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.lists.featuredImage.width
+                    width = 1140
+                    # cat=blog_post/101_blog_post_featuredImage; type=string; label= LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.lists.featuredImage.height
+                    height = 400c
+                }
+            }
+
             lists {
+                featuredImage {
+                    # cat=blog_list/100_blog_list_featuredimage; type=string; label= LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.lists.featuredImage.width
+                    width = 1140
+                    # cat=blog_list/100_blog_list_featuredimage; type=string; label= LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.lists.featuredImage.height
+                    height = 400c
+                }
                 pagination {
                     # cat=blog/blog_120_lists; type=int+; label= LLL:EXT:blog/Resources/Private/Language/locallang.xlf:constantEditor.lists.pagination.itemsPerPage
                     itemsPerPage = 10

diff --git a/Configuration/TypoScript/Static/setup.typoscript b/Configuration/TypoScript/Static/setup.typoscript
@@ -132,8 +132,20 @@ plugin.tx_blog {
             default < .listheader
         }
 
+        # Single post related settings
+        post {
+            featuredImage {
+                width = {$plugin.tx_blog.settings.post.featuredImage.height}
+                height = {$plugin.tx_blog.settings.post.featuredImage.height}
+            }
+        }
+
         # Lists related settings
         lists {
+            featuredImage {
+                width = {$plugin.tx_blog.settings.lists.featuredImage.height}
+                height = {$plugin.tx_blog.settings.lists.featuredImage.height}
+            }
             pagination {
                 itemsPerPage = {$plugin.tx_blog.settings.lists.pagination.itemsPerPage}
                 insertAbove = {$plugin.tx_blog.settings.lists.pagination.insertAbove}

diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -302,12 +302,18 @@
             <trans-unit id="constantEditor.customsubcategory.post" xml:space="preserve">
                 <source>Post</source>
             </trans-unit>
+            <trans-unit id="constantEditor.customsubcategory.post.featuredimage" xml:space="preserve">
+                <source>Featured Image</source>
+            </trans-unit>
             <trans-unit id="constantEditor.customsubcategory.post.header" xml:space="preserve">
                 <source>Post Header</source>
             </trans-unit>
             <trans-unit id="constantEditor.customsubcategory.post.footer" xml:space="preserve">
                 <source>Post Footer</source>
             </trans-unit>
+            <trans-unit id="constantEditor.customsubcategory.list.featuredimage" xml:space="preserve">
+                <source>Featured Image</source>
+            </trans-unit>
             <trans-unit id="constantEditor.customsubcategory.list.element" xml:space="preserve">
                 <source>Element</source>
             </trans-unit>
@@ -425,6 +431,18 @@
             <trans-unit id="constantEditor.CommentAddedNotification.admin.email" xml:space="preserve">
                 <source>Admin mail:Global admin (receiver) email address for notifications</source>
             </trans-unit>
+            <trans-unit id="constantEditor.post.featuredImage.width" xml:space="preserve">
+                <source>Width</source>
+            </trans-unit>
+            <trans-unit id="constantEditor.post.featuredImage.height" xml:space="preserve">
+                <source>Height</source>
+            </trans-unit>
+            <trans-unit id="constantEditor.lists.featuredImage.width" xml:space="preserve">
+                <source>Width</source>
+            </trans-unit>
+            <trans-unit id="constantEditor.lists.featuredImage.height" xml:space="preserve">
+                <source>Height</source>
+            </trans-unit>
             <trans-unit id="constantEditor.lists.pagination.itemsPerPage" xml:space="preserve">
                 <source>Number of post that should be displayed per page</source>
             </trans-unit>

diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf
@@ -90,6 +90,9 @@
                 <source>Based on the categories and tags of the current post, it will show a list of related posts. This overview should only be placed on a Blog detail page.</source>
             </trans-unit>
 
+            <trans-unit id="pages.featured_image" xml:space="preserve">
+                <source>Featured Image</source>
+            </trans-unit>
             <trans-unit id="pages.comments_active" xml:space="preserve">
                 <source>Comments enabled</source>
             </trans-unit>

diff --git a/Resources/Private/Partials/General/FeaturedImage.html b/Resources/Private/Partials/General/FeaturedImage.html
@@ -0,0 +1,7 @@
+<f:if condition="{image}">
+    <f:variable name="height" value="{f:if(condition: settings.height, then: settings.height, else: '1140')}" />
+    <f:variable name="width" value="{f:if(condition: settings.width, then: settings.width, else: '400c')}" />
+    <figure class="blogimage blogimage--featured">
+        <f:image image="{image}" alt="{image.alternative}" title="{image.title}" height="{height}" width="{width}" />
+    </figure>
+</f:if>
diff --git a/Resources/Private/Partials/List/Post.html b/Resources/Private/Partials/List/Post.html
@@ -1,4 +1,9 @@
 <article class="postlist__post">
+    <f:if condition="{post.featuredImage}">
+        <blogvh:link.post post="{post}" class="postlist__featuredimage" additionalAttributes="{aria-hidden: 'true'}" tabindex="-1">
+            <f:render partial="General/FeaturedImage" arguments="{image: post.featuredImage, settings: settings.lists.featuredImage}" />
+        </blogvh:link.post>
+    </f:if>
     <h2 class="postlist__posttitle" itemprop="name"><blogvh:link.post post="{post}" /></h2>
     <f:render partial="Meta/ListHeader" arguments="{_all}" />
     <f:if condition="{post.abstract}">

diff --git a/Resources/Private/Scss/frontend/components/_image.scss b/Resources/Private/Scss/frontend/components/_image.scss
@@ -0,0 +1,9 @@
+/**
+ * Image
+ */
+.blogimage {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
diff --git a/Resources/Private/Scss/frontend/frontend.scss b/Resources/Private/Scss/frontend/frontend.scss
@@ -6,6 +6,7 @@
 @import "components/author";
 @import "components/badge";
 @import "components/icons";
+@import "components/image";
 @import "components/comment";
 @import "components/list";
 @import "components/pagination";

diff --git a/Resources/Private/Templates/Post/Header.html b/Resources/Private/Templates/Post/Header.html
@@ -2,6 +2,11 @@
 <f:section name="Content">
 
     <header class="postheader">
+        <f:if condition="{post.featuredImage}">
+            <div class="postheader__featuredimage">
+                <f:render partial="General/FeaturedImage" arguments="{image: post.featuredImage, settings: settings.post.featuredImage}" />
+            </div>
+        </f:if>
         <h1 class="postheader__title">{post.title}</h1>
         <f:if condition="{settings.meta.postheader.enable}">
             <div class="postheader__meta">