feat: move album covers to Glide and make them larger

Should help on mobile devices to prevent you from being able to count the number of pixels. Now that they are a bit larger, it makes sense to move them to Glide to make them smaller 🤯.
GEWIS · Dec 14, 2024 · d4a9f2e · d4a9f2e
1 parent 941cd4b
commit d4a9f2e
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 12 deletions.
diff --git a/config/autoload/global.php b/config/autoload/global.php
@@ -134,8 +134,8 @@
             'height' => 1920,
         ],
         'album_cover' => [
-            'width' => 320,
-            'height' => 180,
+            'width' => 640,
+            'height' => 360,
             'inner_border' => 2,
             'outer_border' => 0,
             'cols' => 2,

diff --git a/module/Photo/src/Controller/AlbumAdminController.php b/module/Photo/src/Controller/AlbumAdminController.php
@@ -104,6 +104,7 @@ public function yearAction(): ViewModel
 
         return new ViewModel([
             'albums' => $this->albumService->getAlbumsByYear($year, false),
+            'config' => $this->photoConfig,
             'years' => $this->albumService->getAlbumYears(false),
             'year' => $year,
         ]);
@@ -122,6 +123,7 @@ public function undatedAction(): ViewModel
 
         return new ViewModel([
             'albums' => $this->albumService->getAlbumsWithoutDate(),
+            'config' => $this->photoConfig,
             'years' => $this->albumService->getAlbumYears(false),
         ]);
     }

diff --git a/module/Photo/src/Controller/PhotoController.php b/module/Photo/src/Controller/PhotoController.php
@@ -69,6 +69,7 @@ public function indexAction(): ViewModel
                 'years' => $years,
                 'year' => $year,
                 'albums' => $this->filterAlbums($this->albumService->getAlbumsByYear($year)),
+                'config' => $this->photoConfig,
             ],
         );
     }
@@ -99,6 +100,7 @@ public function searchAction(): ViewModel
                         'result' => $groupedAlbums,
                         'prompt' => $form->getData()['query'],
                         'form' => $form,
+                        'config' => $this->photoConfig,
                     ],
                 );
             }

diff --git a/module/Photo/view/partial/album-card.phtml b/module/Photo/view/partial/album-card.phtml
@@ -8,8 +8,10 @@ use Photo\Model\Album as AlbumModel;
 
 /**
  * @var PhpRenderer|HelperTrait $this
- * @var bool $admin
+ * @var bool|null $admin
  * @var AlbumModel $album
+ * @var array $config
+ * @var string|null $prompt
  */
 
 $admin = isset($admin) && $admin;
@@ -24,7 +26,13 @@ $lastWeek = (new DateTime('now'))->sub(new DateInterval('P7D'));
 <div class="card">
     <a class="stretched-link" href="<?= $this->url($url, ['album_id' => $album->getId(), 'album_type' => 'album']) ?>"></a>
     <?php if (null !== ($albumCover = $album->getCoverPath())): ?>
-        <img class="card-image" src="<?= $this->fileUrl($albumCover) ?>" alt="">
+        <?php
+        $albumCoverSize = [
+            'w' => $config['album_cover']['width'],
+            'h' => $config['album_cover']['height'],
+        ];
+        ?>
+        <img class="card-image" src="<?= $this->glideUrl()->getUrl($albumCover, $albumCoverSize) ?>" alt="">
     <?php else: ?>
         <img class="card-image" src="/img/missing_cover.svg" alt="">
     <?php endif; ?>

diff --git a/module/Photo/view/partial/albums.phtml b/module/Photo/view/partial/albums.phtml
@@ -10,6 +10,7 @@ use Photo\Model\Album as AlbumModel;
  * @var PhpRenderer|HelperTrait $this
  * @var bool|null $admin
  * @var AlbumModel[] $albums
+ * @var array $config
  * @var string|null $prompt
  */
 
@@ -19,7 +20,7 @@ $prompt = $prompt ?? null;
 <div class="card-grid <?= $admin ? 'admin-grid' : '' ?>">
     <?php foreach ($albums as $album): ?>
         <?php if ($album->getPhotoCount() > 0 || $admin): ?>
-            <?= $this->partial('partial/album-card.phtml', ['album' => $album, 'admin' => $admin, 'prompt' => $prompt]) ?>
+            <?= $this->partial('partial/album-card.phtml', ['album' => $album, 'admin' => $admin, 'config' => $config, 'prompt' => $prompt]) ?>
         <?php endif; ?>
     <?php endforeach; ?>
 </div>
diff --git a/module/Photo/view/photo/album-admin/undated.phtml b/module/Photo/view/photo/album-admin/undated.phtml
@@ -9,6 +9,7 @@ use Photo\Model\Album as AlbumModel;
 /**
  * @var PhpRenderer|HelperTrait $this
  * @var AlbumModel[] $albums
+ * @var array $config
  * @var int[] $years
  */
 
@@ -19,7 +20,7 @@ $this->breadcrumbs()
 <?= $this->partial('partial/years', ['years' => $years, 'admin' => true]) ?>
 <br>
 <?php if (0 !== count($albums)): ?>
-    <?= $this->partial('partial/albums', ['albums' => $albums, 'admin' => true]) ?>
+    <?= $this->partial('partial/albums', ['albums' => $albums, 'admin' => true, 'config' => $config]) ?>
 <?php else: ?>
     <div class="row">
         <div class="col-md-12">

diff --git a/module/Photo/view/photo/album-admin/view.phtml b/module/Photo/view/photo/album-admin/view.phtml
@@ -135,7 +135,7 @@ $this->breadcrumbs()
 </div>
 <br>
 <?php if (0 !== $album->getChildren()->count()): ?>
-    <?= $this->partial('partial/albums', ['albums' => $album->getChildren(), 'admin' => true]) ?>
+    <?= $this->partial('partial/albums', ['albums' => $album->getChildren(), 'admin' => true, 'config' => $config]) ?>
 <?php endif; ?>
 <div class="row">
     <div class="col-md-12">

diff --git a/module/Photo/view/photo/album-admin/year.phtml b/module/Photo/view/photo/album-admin/year.phtml
@@ -10,6 +10,7 @@ use Photo\Model\Album as AlbumModel;
  * @var PhpRenderer|HelperTrait $this
  * @var AlbumModel[] $albums
  * @var int[] $years
+ * @var array $config
  * @var int $year
  */
 
@@ -20,7 +21,7 @@ $this->breadcrumbs()
 <?= $this->partial('partial/years', ['years' => $years, 'year' => $year, 'admin' => true]) ?>
 <br>
 <?php if (0 !== count($albums)): ?>
-    <?= $this->partial('partial/albums', ['albums' => $albums, 'admin' => true]) ?>
+    <?= $this->partial('partial/albums', ['albums' => $albums, 'admin' => true, 'config' => $config]) ?>
 <?php else: ?>
     <div class="row">
         <div class="col-md-12">

diff --git a/module/Photo/view/photo/album/index.phtml b/module/Photo/view/photo/album/index.phtml
@@ -182,7 +182,7 @@ $this->scriptUrl()->requireUrl('member/search')
                     ):
                         $shownAlbums++;
                     ?>
-                        <?= $this->partial('partial/album-card.phtml', ['album' => $item]) ?>
+                        <?= $this->partial('partial/album-card.phtml', ['album' => $item, 'config' => $config]) ?>
                     <?php endif; ?>
                 <?php endforeach ?>
             </div>

diff --git a/module/Photo/view/photo/photo/index.phtml b/module/Photo/view/photo/photo/index.phtml
@@ -9,6 +9,7 @@ use Photo\Model\Album as AlbumModel;
 /**
  * @var PhpRenderer|HelperTrait $this
  * @var AlbumModel $albums
+ * @var array $config
  * @var array $years
  * @var int $year
  */
@@ -21,7 +22,7 @@ $this->headTitle($this->translate('Photos'));
             <?= $this->partial('partial/years', ['years' => $years, 'year' => $year]) ?>
             <br>
             <?php if (0 !== count($albums)): ?>
-                <?= $this->partial('partial/albums', ['albums' => $albums]) ?>
+                <?= $this->partial('partial/albums', ['albums' => $albums, 'config' => $config]) ?>
             <?php else: ?>
                 <div class="row">
                     <div class="col-md-12">

diff --git a/module/Photo/view/photo/photo/search.phtml b/module/Photo/view/photo/photo/search.phtml
@@ -12,6 +12,7 @@ use Photo\Model\Album as AlbumModel;
  * @var SearchAlbumForm $form
  * @var array<int, AlbumModel[]>|null $result
  * @var string|null $prompt
+ * @var array|null $config
  */
 
 $this->headTitle($this->translate('Search Albums'));
@@ -68,7 +69,7 @@ $this->headTitle($this->translate('Search Albums'));
                             <h3>
                                 <?= sprintf('%d/%d', $year, $year + 1)?>
                             </h3>
-                            <?= $this->partial('partial/albums', ['albums' => $albums, 'prompt' => $prompt]) ?>
+                            <?= $this->partial('partial/albums', ['albums' => $albums, 'prompt' => $prompt, 'config' => $config]) ?>
                             <hr>
                         </div>
                     <?php endforeach; ?>

diff --git a/public/css/gewis-theme.css b/public/css/gewis-theme.css
diff --git a/resources/scss/modules/_photo.scss b/resources/scss/modules/_photo.scss
@@ -147,3 +147,7 @@ Photo
         cursor: pointer;
     }
 }
+
+.cover-preview {
+    max-width: 100%;
+}