From b7c1e6ffe1daac09694135fcbbc164ec7b90475d Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Sun, 25 Aug 2019 15:30:40 +0200 Subject: [PATCH] [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 --- Classes/Domain/Model/Post.php | 22 +++++++++++++++++++ Configuration/TCA/Overrides/pages.php | 14 +++++++++++- .../TypoScript/Static/constants.typoscript | 17 ++++++++++++++ .../TypoScript/Static/setup.typoscript | 12 ++++++++++ Resources/Private/Language/locallang.xlf | 18 +++++++++++++++ Resources/Private/Language/locallang_db.xlf | 3 +++ .../Partials/General/FeaturedImage.html | 7 ++++++ Resources/Private/Partials/List/Post.html | 5 +++++ .../Scss/frontend/components/_image.scss | 9 ++++++++ Resources/Private/Scss/frontend/frontend.scss | 1 + Resources/Private/Templates/Post/Header.html | 5 +++++ Resources/Public/Css/frontend.min.css | 2 +- ext_tables.sql | 1 + 13 files changed, 114 insertions(+), 2 deletions(-) create mode 100644 Resources/Private/Partials/General/FeaturedImage.html create mode 100644 Resources/Private/Scss/frontend/components/_image.scss diff --git a/Classes/Domain/Model/Post.php b/Classes/Domain/Model/Post.php index 209c4055..28bd34ad 100644 --- 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 index 73b904a8..ea5c2561 100644 --- 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 index b702318a..ddd43ca5 100644 --- 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 index f57d8bbf..90c37d70 100644 --- 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 index cbe9cf7f..4b7f0131 100644 --- a/Resources/Private/Language/locallang.xlf +++ b/Resources/Private/Language/locallang.xlf @@ -302,12 +302,18 @@ Post + + Featured Image + Post Header Post Footer + + Featured Image + Element @@ -425,6 +431,18 @@ Admin mail:Global admin (receiver) email address for notifications + + Width + + + Height + + + Width + + + Height + Number of post that should be displayed per page diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf index 3dbfe7a1..e9512131 100644 --- a/Resources/Private/Language/locallang_db.xlf +++ b/Resources/Private/Language/locallang_db.xlf @@ -90,6 +90,9 @@ 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. + + Featured Image + Comments enabled diff --git a/Resources/Private/Partials/General/FeaturedImage.html b/Resources/Private/Partials/General/FeaturedImage.html new file mode 100644 index 00000000..906a9665 --- /dev/null +++ b/Resources/Private/Partials/General/FeaturedImage.html @@ -0,0 +1,7 @@ + + + +
+ +
+ diff --git a/Resources/Private/Partials/List/Post.html b/Resources/Private/Partials/List/Post.html index 3dd6866f..2c44848a 100644 --- a/Resources/Private/Partials/List/Post.html +++ b/Resources/Private/Partials/List/Post.html @@ -1,4 +1,9 @@
+ + + + +

diff --git a/Resources/Private/Scss/frontend/components/_image.scss b/Resources/Private/Scss/frontend/components/_image.scss new file mode 100644 index 00000000..5ba12f1e --- /dev/null +++ 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 index 336c4bd4..22fd4789 100644 --- 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 index f93ca1d8..fc79e255 100644 --- a/Resources/Private/Templates/Post/Header.html +++ b/Resources/Private/Templates/Post/Header.html @@ -2,6 +2,11 @@
+ +
+ +
+

{post.title}

diff --git a/Resources/Public/Css/frontend.min.css b/Resources/Public/Css/frontend.min.css index de9b88d2..529aa27d 100644 --- a/Resources/Public/Css/frontend.min.css +++ b/Resources/Public/Css/frontend.min.css @@ -1 +1 @@ -.page__title{margin-bottom:1.5rem}.page__titletext{margin-right:.5rem}.postmetagroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:-.135rem -.5rem;-ms-flex-wrap:wrap;flex-wrap:wrap}.postmetagroup__item{padding:.135rem .5rem;white-space:nowrap;width:100%}@media (min-width:576px){.postmetagroup__item{width:auto}}.postmetagroup__icon,.postmetagroup__prefix{opacity:.75}.postmetagroup__item{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.postmetagroup__body{margin-left:.25rem}.postmetagroup__content{white-space:normal}.postmetagroup__list{padding:0;margin:0;list-style:none}.postmetagroup__list li{display:inline}.postmetagroup__list li:not(:last-child):after{display:inline;content:", "}.postmetagroup--simple .postmetagroup__prefix{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important}.postmetagroup--condensed .postmetagroup__body{display:-webkit-box;display:-ms-flexbox;display:flex}.postmetagroup--condensed .postmetagroup__prefix:after{display:inline;content:":"}.postmetagroup--condensed .postmetagroup__content{margin-left:.25rem}.postauthor{display:-webkit-box;display:-ms-flexbox;display:flex}.postauthor+.postauthor{border-top:1px solid rgba(0,0,0,.15);padding-top:1.5rem;margin-top:1.5rem}.postauthor__avatar{margin-right:1rem}.postauthor__avatarimage{display:block;border-radius:50%;overflow:hidden}.postauthor__body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.postauthor__body>:last-child{margin-bottom:0}.postauthor__intro{opacity:.75}.postauthor__name{font-weight:700;font-size:1.25rem;line-height:1.5rem}.postauthor__sublinedivider{margin-right:.25rem}.postauthor__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.25rem}.postauthor__social+.postauthor__actions{margin-top:.5rem}.postauthor__sociallink{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5rem}.postauthor__sociallinklabel{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important}.postauthor__bio{margin-top:1rem;margin-bottom:1rem}.postauthor__bio p{margin-bottom:.5rem}.postauthor__bio>:last-child{margin-bottom:0}.postauthor__actions{margin-bottom:1rem}.blogbadge{display:inline-block;padding:.5em;border-radius:2px;border:1px solid;line-height:1em}.blogbadge:hover{text-decoration:none}.blogicon{top:.125em;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.blogicon svg{height:1em;width:1em}.postcomment{display:-webkit-box;display:-ms-flexbox;display:flex}.postcomment+.postcomment{border-top:1px solid rgba(0,0,0,.15);padding-top:1.5rem;margin-top:1.5rem}.postcomment__avatar{margin-right:1rem}.postcomment__avatarimage{display:block;border-radius:50%;overflow:hidden}.postcomment__body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.postcomment__body>:last-child{margin-bottom:0}.postcomment__author{font-weight:700;font-size:1.25rem;line-height:1.5rem;margin-top:.5rem}.postcomment__comment{margin-top:1rem}.postcomment__comment p{margin-bottom:.5rem}.postcomment__comment>:last-child{margin-bottom:0}.postlist__post{margin-top:1.5rem}.postlist__post:first-of-type{margin-top:0}.postlist__postdescription{margin-top:.5rem;margin-bottom:.5rem}.blogpagination__list{margin-top:1.5rem;margin-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;list-style:none}.blogpagination__item:first-child .blogpagination__link{margin-left:0}.blogpagination__item--active{font-weight:700}.blogpagination__link{display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1;border:1px solid}.blogpagination__item--disabled .blogpagination__link{pointer-events:none;cursor:auto}.blogwidget{margin-bottom:1.5rem}.blogwidget:last-child{margin-bottom:0}.blogwidget__content{overflow:hidden}.blogwidget__content>:last-child{margin-bottom:0}.blogwidgetlist{padding:0;margin:0;list-style:none}.blogwidgetlist .blogwidgetlist{padding-left:1rem}.blogwidgetlist__itemcount{margin-left:.25rem}.blogwidgetlist__itemcount:before{content:"("}.blogwidgetlist__itemcount:after{content:")"}.blogwidgetlist__itemauthor{font-weight:700}.blogwidgetlist--tags{margin:-.25rem!important}.blogwidgetlist--tags .blogwidgetlist__item{display:inline-block;vertical-align:middle;margin:.25rem}.blogwidgetlist--recentcomments .blogwidgetlist__item+.blogwidgetlist__item{margin-top:1rem}.blogwidgetlist--recentcomments .blogwidgetlist__itemtext{margin-bottom:.25rem}.blogwidgetlist--recentcomments .blogwidgetlist__itemauthoron{margin-left:.25rem;margin-right:.25rem}.alert__title{font-weight:700}.alert__list{margin:0;padding:0;list-style:none} \ No newline at end of file +.page__title{margin-bottom:1.5rem}.page__titletext{margin-right:.5rem}.postmetagroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:-.135rem -.5rem;-ms-flex-wrap:wrap;flex-wrap:wrap}.postmetagroup__item{padding:.135rem .5rem;white-space:nowrap;width:100%}@media (min-width:576px){.postmetagroup__item{width:auto}}.postmetagroup__icon,.postmetagroup__prefix{opacity:.75}.postmetagroup__item{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.postmetagroup__body{margin-left:.25rem}.postmetagroup__content{white-space:normal}.postmetagroup__list{padding:0;margin:0;list-style:none}.postmetagroup__list li{display:inline}.postmetagroup__list li:not(:last-child):after{display:inline;content:", "}.postmetagroup--simple .postmetagroup__prefix{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important}.postmetagroup--condensed .postmetagroup__body{display:-webkit-box;display:-ms-flexbox;display:flex}.postmetagroup--condensed .postmetagroup__prefix:after{display:inline;content:":"}.postmetagroup--condensed .postmetagroup__content{margin-left:.25rem}.postauthor{display:-webkit-box;display:-ms-flexbox;display:flex}.postauthor+.postauthor{border-top:1px solid rgba(0,0,0,.15);padding-top:1.5rem;margin-top:1.5rem}.postauthor__avatar{margin-right:1rem}.postauthor__avatarimage{display:block;border-radius:50%;overflow:hidden}.postauthor__body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.postauthor__body>:last-child{margin-bottom:0}.postauthor__intro{opacity:.75}.postauthor__name{font-weight:700;font-size:1.25rem;line-height:1.5rem}.postauthor__sublinedivider{margin-right:.25rem}.postauthor__social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.25rem}.postauthor__social+.postauthor__actions{margin-top:.5rem}.postauthor__sociallink{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5rem}.postauthor__sociallinklabel{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important}.postauthor__bio{margin-top:1rem;margin-bottom:1rem}.postauthor__bio p{margin-bottom:.5rem}.postauthor__bio>:last-child{margin-bottom:0}.postauthor__actions{margin-bottom:1rem}.blogbadge{display:inline-block;padding:.5em;border-radius:2px;border:1px solid;line-height:1em}.blogbadge:hover{text-decoration:none}.blogicon{top:.125em;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.blogicon svg{height:1em;width:1em}.blogimage img{max-width:100%;height:auto}.postcomment{display:-webkit-box;display:-ms-flexbox;display:flex}.postcomment+.postcomment{border-top:1px solid rgba(0,0,0,.15);padding-top:1.5rem;margin-top:1.5rem}.postcomment__avatar{margin-right:1rem}.postcomment__avatarimage{display:block;border-radius:50%;overflow:hidden}.postcomment__body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.postcomment__body>:last-child{margin-bottom:0}.postcomment__author{font-weight:700;font-size:1.25rem;line-height:1.5rem;margin-top:.5rem}.postcomment__comment{margin-top:1rem}.postcomment__comment p{margin-bottom:.5rem}.postcomment__comment>:last-child{margin-bottom:0}.postlist__post{margin-top:1.5rem}.postlist__post:first-of-type{margin-top:0}.postlist__postdescription{margin-top:.5rem;margin-bottom:.5rem}.blogpagination__list{margin-top:1.5rem;margin-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:0;list-style:none}.blogpagination__item:first-child .blogpagination__link{margin-left:0}.blogpagination__item--active{font-weight:700}.blogpagination__link{display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1;border:1px solid}.blogpagination__item--disabled .blogpagination__link{pointer-events:none;cursor:auto}.blogwidget{margin-bottom:1.5rem}.blogwidget:last-child{margin-bottom:0}.blogwidget__content{overflow:hidden}.blogwidget__content>:last-child{margin-bottom:0}.blogwidgetlist{padding:0;margin:0;list-style:none}.blogwidgetlist .blogwidgetlist{padding-left:1rem}.blogwidgetlist__itemcount{margin-left:.25rem}.blogwidgetlist__itemcount:before{content:"("}.blogwidgetlist__itemcount:after{content:")"}.blogwidgetlist__itemauthor{font-weight:700}.blogwidgetlist--tags{margin:-.25rem!important}.blogwidgetlist--tags .blogwidgetlist__item{display:inline-block;vertical-align:middle;margin:.25rem}.blogwidgetlist--recentcomments .blogwidgetlist__item+.blogwidgetlist__item{margin-top:1rem}.blogwidgetlist--recentcomments .blogwidgetlist__itemtext{margin-bottom:.25rem}.blogwidgetlist--recentcomments .blogwidgetlist__itemauthoron{margin-left:.25rem;margin-right:.25rem}.alert__title{font-weight:700}.alert__list{margin:0;padding:0;list-style:none} \ No newline at end of file diff --git a/ext_tables.sql b/ext_tables.sql index 2000fb86..beb323b7 100644 --- a/ext_tables.sql +++ b/ext_tables.sql @@ -93,6 +93,7 @@ CREATE TABLE tx_blog_domain_model_comment ( # Table structure for table 'pages' # CREATE TABLE pages ( + featured_image int(11) unsigned DEFAULT '0' NOT NULL, comments_active tinyint(4) DEFAULT '1' NOT NULL, publish_date int(11) DEFAULT '0' NOT NULL, archive_date int(11) DEFAULT '0' NOT NULL,