From 886f7f29d735bea55b8aa2d20b8927d645f1a8e0 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 21 Mar 2019 23:36:36 +0100 Subject: [PATCH] Wrapper for cover photos with a fallback mechanism --- .../cover/photo/CoverPhotoImage.class.php | 111 ++++++++++++++++++ .../cover/photo/ICoverPhotoImage.class.php | 34 ++++++ wcfsetup/install/files/style/ui/article.scss | 6 +- .../install/files/style/ui/contentItem.scss | 13 +- 4 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 wcfsetup/install/files/lib/system/image/cover/photo/CoverPhotoImage.class.php create mode 100644 wcfsetup/install/files/lib/system/image/cover/photo/ICoverPhotoImage.class.php diff --git a/wcfsetup/install/files/lib/system/image/cover/photo/CoverPhotoImage.class.php b/wcfsetup/install/files/lib/system/image/cover/photo/CoverPhotoImage.class.php new file mode 100644 index 0000000000..f76b5c219c --- /dev/null +++ b/wcfsetup/install/files/lib/system/image/cover/photo/CoverPhotoImage.class.php @@ -0,0 +1,111 @@ + + * @package WoltLabSuite\Core\System\Image\Cover\Photo + * @since 5.2 + */ +class CoverPhotoImage { + /** + * @var ICoverPhotoImage + */ + protected $coverPhotoImage; + + /** + * @var int[] + */ + protected $dimensions; + + /** + * @var ICoverPhotoImage + */ + protected static $defaultCoverPhotoImage; + + /** + * @param ICoverPhotoImage|null $coverPhotoImage + */ + public function __construct(ICoverPhotoImage $coverPhotoImage = null) { + $this->coverPhotoImage = $coverPhotoImage ?: self::getDefaultCoverPhoto(); + } + + /** + * @return string + */ + public function getCaption() { + return $this->coverPhotoImage->getCoverPhotoCaption(); + } + + /** + * @return int + */ + public function getHeight() { + return $this->getDimensions()['height']; + } + + /** + * @return string + */ + public function getLocation() { + return $this->coverPhotoImage->getCoverPhotoLocation(); + } + + /** + * @return string + */ + public function getUrl() { + return $this->coverPhotoImage->getCoverPhotoUrl(); + } + + /** + * @return int + */ + public function getWidth() { + return $this->getDimensions()['width']; + } + + /** + * @return int[] + */ + protected function getDimensions() { + if ($this->dimensions === null) { + $this->dimensions = ['height' => 0, 'width' => 0]; + $dimensions = @getimagesize($this->getLocation()); + if (is_array($dimensions)) { + $this->dimensions['width'] = $dimensions[0]; + $this->dimensions['height'] = $dimensions[1]; + } + } + + return $this->dimensions; + } + + /** + * @return ICoverPhotoImage + */ + protected static function getDefaultCoverPhoto() { + if (self::$defaultCoverPhotoImage === null) { + self::$defaultCoverPhotoImage = new class implements ICoverPhotoImage { + public function getCoverPhotoCaption() { + return ''; + } + + public function getCoverPhotoLocation() { + return StyleHandler::getInstance()->getStyle()->getCoverPhotoLocation(); + } + + public function getCoverPhotoUrl() { + return StyleHandler::getInstance()->getStyle()->getCoverPhotoUrl(); + } + + }; + } + + return self::$defaultCoverPhotoImage; + } +} diff --git a/wcfsetup/install/files/lib/system/image/cover/photo/ICoverPhotoImage.class.php b/wcfsetup/install/files/lib/system/image/cover/photo/ICoverPhotoImage.class.php new file mode 100644 index 0000000000..ae426ab07f --- /dev/null +++ b/wcfsetup/install/files/lib/system/image/cover/photo/ICoverPhotoImage.class.php @@ -0,0 +1,34 @@ + + * @package WoltLabSuite\Core\System\Image\Cover\Photo + * @since 5.2 + */ +interface ICoverPhotoImage { + /** + * Returns the optional caption that should be displayed below the photo. + * + * @return string + */ + public function getCoverPhotoCaption(); + + /** + * Returns the absolute path to the physical location of the image. + * + * @return string + */ + public function getCoverPhotoLocation(); + + /** + * Returns the full url of the image. + * + * @return string + */ + public function getCoverPhotoUrl(); +} diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss index 77fd840a77..53ba8d59cb 100644 --- a/wcfsetup/install/files/style/ui/article.scss +++ b/wcfsetup/install/files/style/ui/article.scss @@ -7,12 +7,14 @@ margin-top: 20px !important; } -.articleImage { +.articleImage, +.contentCoverPhotoImage { /* work-around for IE 11 to properly align the image if overflowing */ display: flex; flex-wrap: wrap; - .articleImageWrapper { + .articleImageWrapper, + .contentCoverPhotoImageWrapper { align-items: center; border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss index dd2c35bba4..3315a679e8 100644 --- a/wcfsetup/install/files/style/ui/contentItem.scss +++ b/wcfsetup/install/files/style/ui/contentItem.scss @@ -57,15 +57,16 @@ background-position: center; background-repeat: no-repeat; background-size: cover; + padding: 10px; position: relative; } .contentItemImageSmall { - height: 75px; + min-height: 75px; } .contentItemImageLarge { - height: 150px; + min-height: 150px; } .contentItemBadges, @@ -73,16 +74,12 @@ align-items: flex-start; display: flex; flex-direction: column; - position: absolute; - top: 10px; -} - -.contentItemBadges { - left: 10px; } .contentItemOptions { + position: absolute; right: 10px; + top: 10px; z-index: 1; } -- 2.20.1