Repository: LycheeOrg/Lychee (language: php)

Issue:
[Enhancement] Hide Album Name and Time Overlay
I would like to know , can i hide public album name and time/date ? 
We have created photos for as album cover which represents the Album name itself.

If these settings are not available in UI then can i do it via custom CSS?


Discussion / hints:
1. all public album name & time date or just some? 
2. If it is all of them, it is easily doable with custom css.
Hi @ildyria,

All public album name and time date.

Can you help me with Custom CSS?
Probably something like that.
```css
div.album div.overlay {
	display:none !important;
}
```

@ildyria,

Not working. 
It is on my side which means that you are either not up to date or you did not do a full refresh of the page.
@ildyria : I will update the version and check one my time from my side.
@ildyria : it's working now.

Thanks a ton.
Reopening because it might be a nice to have setting.

Fix patch:
diff --git a/app/Enum/ThumbOverlayVisibilityType.php b/app/Enum/ThumbOverlayVisibilityType.php
new file mode 100644
index 00000000000..cd71b124a25
--- /dev/null
+++ b/app/Enum/ThumbOverlayVisibilityType.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Enum;
+
+/**
+ * Enum ThumbOverlayVisibilityType.
+ *
+ * All the allowed display possibilities of the overlay on thumbs
+ */
+enum ThumbOverlayVisibilityType: string
+{
+	case NEVER = 'never';
+	case ALWAYS = 'always';
+	case HOVER = 'hover';
+}
diff --git a/app/View/Components/Gallery/Album/Thumbs/Album.php b/app/View/Components/Gallery/Album/Thumbs/Album.php
index 3f1d42f0919..bb520cf4b10 100644
--- a/app/View/Components/Gallery/Album/Thumbs/Album.php
+++ b/app/View/Components/Gallery/Album/Thumbs/Album.php
@@ -5,6 +5,7 @@
 use App\Contracts\Models\AbstractAlbum;
 use App\DTO\AlbumProtectionPolicy;
 use App\Enum\ThumbAlbumSubtitleType;
+use App\Enum\ThumbOverlayVisibilityType;
 use App\Models\Album as AlbumModel;
 use App\Models\Configs;
 use App\Models\Extensions\BaseAlbum;
@@ -30,6 +31,8 @@ class Album extends Component
 	public bool $is_cover_id;
 	public bool $has_subalbum;
 
+	public string $css_overlay;
+
 	public string $created_at = '';
 	public ?string $min_taken_at = null;
 	public ?string $max_taken_at = null;
@@ -38,6 +41,7 @@ public function __construct(AbstractAlbum $data)
 	{
 		$date_format = Configs::getValueAsString('date_format_album_thumb');
 
+		$displayOverlay = Configs::getValueAsEnum('display_thumb_album_overlay', ThumbOverlayVisibilityType::class);
 		$this->subType = Configs::getValueAsEnum('album_subtitle_type', ThumbAlbumSubtitleType::class)->value;
 
 		$this->id = $data->id;
@@ -54,6 +58,12 @@ public function __construct(AbstractAlbum $data)
 			$policy = AlbumProtectionPolicy::ofBaseAlbum($data);
 		}
 
+		$this->css_overlay = match ($displayOverlay) {
+			ThumbOverlayVisibilityType::NEVER => 'hidden',
+			ThumbOverlayVisibilityType::HOVER => 'opacity-0 group-hover:opacity-100 transition-all ease-out',
+			default => '',
+		};
+
 		$this->is_nsfw = $policy->is_nsfw;
 		$this->is_nsfw_blurred = $this->is_nsfw && Configs::getValueAsBool('nsfw_blur');
 		$this->is_public = $policy->is_public;
diff --git a/app/View/Components/Gallery/Album/Thumbs/Photo.php b/app/View/Components/Gallery/Album/Thumbs/Photo.php
index 549bc318d41..c22690e0d78 100644
--- a/app/View/Components/Gallery/Album/Thumbs/Photo.php
+++ b/app/View/Components/Gallery/Album/Thumbs/Photo.php
@@ -3,6 +3,7 @@
 namespace App\View\Components\Gallery\Album\Thumbs;
 
 use App\Enum\SizeVariantType;
+use App\Enum\ThumbOverlayVisibilityType;
 use App\Exceptions\ConfigurationKeyMissingException;
 use App\Exceptions\Internal\InvalidSizeVariantException;
 use App\Models\Configs;
@@ -28,6 +29,8 @@ class Photo extends Component
 	public string $created_at;
 	public bool $is_cover_id = false;
 
+	public string $css_overlay;
+
 	public string $src = '';
 	public string $srcset = '';
 	public string $srcset2x = '';
@@ -46,6 +49,7 @@ public function __construct(ModelsPhoto $data, string $albumId, int $idx)
 	{
 		$this->idx = $idx;
 		$date_format = Configs::getValueAsString('date_format_photo_thumb');
+		$displayOverlay = Configs::getValueAsEnum('display_thumb_photo_overlay', ThumbOverlayVisibilityType::class);
 
 		$this->album_id = $albumId;
 		$this->photo_id = $data->id;
@@ -57,6 +61,12 @@ public function __construct(ModelsPhoto $data, string $albumId, int $idx)
 		$this->is_livephoto = $data->live_photo_url !== null;
 		$this->is_cover_id = $data->album?->cover_id === $data->id;
 
+		$this->css_overlay = match ($displayOverlay) {
+			ThumbOverlayVisibilityType::NEVER => 'hidden',
+			ThumbOverlayVisibilityType::HOVER => 'opacity-0 group-hover:opacity-100 transition-all ease-out',
+			default => '',
+		};
+
 		$thumb = $data->size_variants->getSizeVariant(SizeVariantType::THUMB);
 		$thumb2x = $data->size_variants->getSizeVariant(SizeVariantType::THUMB2X);
 
diff --git a/database/migrations/2023_12_25_115454_add_setting_display_thumb_overlay.php b/database/migrations/2023_12_25_115454_add_setting_display_thumb_overlay.php
new file mode 100644
index 00000000000..8faecdf1dbf
--- /dev/null
+++ b/database/migrations/2023_12_25_115454_add_setting_display_thumb_overlay.php
@@ -0,0 +1,31 @@
+<?php
+
+use App\Models\Extensions\BaseConfigMigration;
+
+return new class() extends BaseConfigMigration {
+	public const GALLERY = 'Gallery';
+	public const POSITIVE = 'positive';
+	public const BOOL = 'bool';
+
+	public function getConfigs(): array
+	{
+		return [
+			[
+				'key' => 'display_thumb_album_overlay',
+				'value' => 'always',
+				'confidentiality' => '0',
+				'cat' => self::GALLERY,
+				'type_range' => 'always|hover|never',
+				'description' => 'Display the title and metadata on album thumbs (always|hover|never)',
+			],
+			[
+				'key' => 'display_thumb_photo_overlay',
+				'value' => 'hover',
+				'confidentiality' => '0',
+				'cat' => self::GALLERY,
+				'type_range' => 'always|hover|never',
+				'description' => 'Display the title and metadata on album thumbs (always|hover|never)',
+			],
+		];
+	}
+};
diff --git a/resources/views/components/gallery/album/thumbs/album.blade.php b/resources/views/components/gallery/album/thumbs/album.blade.php
index df7b6d5a54c..a4b8a232739 100644
--- a/resources/views/components/gallery/album/thumbs/album.blade.php
+++ b/resources/views/components/gallery/album/thumbs/album.blade.php
@@ -25,8 +25,9 @@
 		type="{{ $thumb?->type ?? '' }}" thumb="{{ $thumb?->thumbUrl ?? '' }}" thumb2x="{{ $thumb?->thumb2xUrl ?? '' }}" />
 	<x-gallery.album.thumbs.album-thumb class="group-hover:border-primary-500"
 		type="{{ $thumb?->type ?? '' }}" thumb="{{ $thumb?->thumbUrl ?? '' }}" thumb2x="{{ $thumb?->thumb2xUrl ?? '' }}" />
-	<div class='overlay absolute mb-[1px] mx-[1px] p-0 border-0 w-[calc(100%-2px)] bottom-0 bg-gradient-to-t from-[#00000099] text-shadow-sm'>
-		<h1 class="w-full pt-3 pb-1 pr-1 pl-4 text-sm text-text-main-0 font-bold text-ellipsis whitespace-nowrap overflow-x-hidden" title='{{ $title }}'>{{ $title }}</h1>
+	<div class="overlay absolute mb-[1px] mx-[1px] p-0 border-0 w-[calc(100%-2px)] bottom-0 bg-gradient-to-t from-[#00000099] text-shadow-sm {{ $css_overlay }}">
+		<h1 class="w-full pt-3 pb-1 pr-1 pl-4 text-sm text-text-main-0 font-bold text-ellipsis whitespace-nowrap overflow-x-hidden"
+			title='{{ $title }}'>{{ $title }}</h1>
 		<span class="block mt-0 mr-0 mb-3 ml-4 text-2xs text-neutral-300">
 			@switch($subType)
 				@case('description')
diff --git a/resources/views/components/gallery/album/thumbs/photo.blade.php b/resources/views/components/gallery/album/thumbs/photo.blade.php
index 2525ea218b8..6a973c305ba 100644
--- a/resources/views/components/gallery/album/thumbs/photo.blade.php
+++ b/resources/views/components/gallery/album/thumbs/photo.blade.php
@@ -20,8 +20,8 @@ class="h-full w-full border-none object-cover object-center {{ $is_lazyload ? 'l
 			draggable='false'
 		/>
 	</span>
-	<div class='overlay w-full absolute bottom-0 m-0 opacity-0 bg-gradient-to-t from-[#00000066] group-hover:opacity-100 transition-opacity ease-out
-	text-shadow-sm'>
+	<div class='overlay w-full absolute bottom-0 m-0 bg-gradient-to-t from-[#00000066]
+	{{ $css_overlay }} text-shadow-sm'>
 		<h1 class=" min-h-[19px] mt-3 mb-1 ml-3 text-text-main-0 text-base font-bold overflow-hidden whitespace-nowrap text-ellipsis">{{ $title }}</h1>
 		<span class="block mt-0 mr-0 mb-2 ml-3 text-2xs text-neutral-300">
 			@if($taken_at !== "")
diff --git a/tailwind.config.js b/tailwind.config.js
index a8870f17656..f657934a98f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  safelist: [
+    'opacity-0',
+    'group-hover:opacity-100',
+    'transition-all',
+    'ease-out',
+    'hidden',
+    
+  ],
   content: [
     "./resources/**/*.blade.php",
     "./resources/**/*.js",


Test patch: