Version 5.0.6

static/templates/gallery_front_browse.php

@@ -229,7 +229,7 @@ $return .= <<<IPSCONTENT
  
 IPSCONTENT;
 
-$val = ( $album->last_img_date instanceof \IPS\DateTime ) ? $album->last_img_date : \IPS\DateTime::ts( $album->last_img_date );$return .= $val->html();
+$val = ( $album->last_img_date instanceof \IPS\DateTime ) ? $album->last_img_date : \IPS\DateTime::ts( $album->last_img_date );$return .= $val->html(useTitle: true);
 $return .= <<<IPSCONTENT
 
 				
@@ -324,7 +324,17 @@ $return .= <<<IPSCONTENT
 
 	<div class="ipsPageHeader__row ipsPageHeader__row--footer">
 		<div class="ipsPageHeader__primary">
-			<ul class="ipsList ipsList--inline ipsList--icons i-link-color_inherit">
+			
+IPSCONTENT;
+
+$return .= \IPS\Theme\CustomTemplate::getCustomTemplatesForHookPoint( "gallery/front/browse/album", "iconsList:before", [ $album,$table,$commentsAndReviews ] );
+$return .= <<<IPSCONTENT
+<ul class="ipsList ipsList--inline ipsList--icons i-link-color_inherit" data-ips-hook="iconsList">
+IPSCONTENT;
+
+$return .= \IPS\Theme\CustomTemplate::getCustomTemplatesForHookPoint( "gallery/front/browse/album", "iconsList:inside-start", [ $album,$table,$commentsAndReviews ] );
+$return .= <<<IPSCONTENT
+
 				<li><i class="fa-solid fa-photo-film"></i> 
 IPSCONTENT;
 
@@ -373,7 +383,7 @@ IPSCONTENT;
 if ( $album->use_reviews && $album->reviews > 0 ):
 $return .= <<<IPSCONTENT
 
-                    <li><i class="fa-regular fa-pen-to-square"></i> 
+                    <li><i class="fa-solid fa-pen-to-square"></i> 
 IPSCONTENT;
 
 $pluralize = array( $album->reviews ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'gallery_album_num_reviews_lc', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
@@ -450,7 +460,17 @@ IPSCONTENT;
 endif;
 $return .= <<<IPSCONTENT
 
-			</ul>
+			
+IPSCONTENT;
+
+$return .= \IPS\Theme\CustomTemplate::getCustomTemplatesForHookPoint( "gallery/front/browse/album", "iconsList:inside-end", [ $album,$table,$commentsAndReviews ] );
+$return .= <<<IPSCONTENT
+</ul>
+IPSCONTENT;
+
+$return .= \IPS\Theme\CustomTemplate::getCustomTemplatesForHookPoint( "gallery/front/browse/album", "iconsList:after", [ $album,$table,$commentsAndReviews ] );
+$return .= <<<IPSCONTENT
+
 		</div>
 	</div>
 </header>
@@ -668,7 +688,11 @@ $return .= <<<IPSCONTENT
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $album->feedId, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-' id='comments'>
+' id='comments' data-follow-area-id="album-
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $album->id, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+">
 		<div>
 			<h2 class='ipsBox__header' hidden data-role="comment_count" data-commentCountString="js_gallery_album_num_comments_uc">
 IPSCONTENT;
@@ -956,7 +980,11 @@ $return .= <<<IPSCONTENT
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $album->reviewFeedId, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-' id='reviews'>
+' id='reviews' data-follow-area-id="album-
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $album->id, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+">
 	
 IPSCONTENT;
 
@@ -1441,7 +1469,7 @@ $return .= <<<IPSCONTENT
  
 IPSCONTENT;
 
-$val = ( $album->last_img_date instanceof \IPS\DateTime ) ? $album->last_img_date : \IPS\DateTime::ts( $album->last_img_date );$return .= $val->html();
+$val = ( $album->last_img_date instanceof \IPS\DateTime ) ? $album->last_img_date : \IPS\DateTime::ts( $album->last_img_date );$return .= $val->html(useTitle: true);
 $return .= <<<IPSCONTENT
 </li>
 						
@@ -2564,7 +2592,13 @@ IPSCONTENT;
 foreach ( $categories as $category ):
 $return .= <<<IPSCONTENT
 
-		<li class="
+		
+IPSCONTENT;
+
+if ( $category->can('view') ):
+$return .= <<<IPSCONTENT
+
+			<li class="ipsData__item 
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $category->ui( 'css' ), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
@@ -2573,12 +2607,36 @@ IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $category->ui( 'dataAttributes' ), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
 >
-			<figure class='ipsFigure i-margin-bottom_2'>
 				<a href='
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-' class='ipsFigure__main i-aspect-ratio_7'>
+' class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>
+IPSCONTENT;
+
+if ( \IPS\Settings::i()->club_nodes_in_apps and $club = $category->club() ):
+$return .= <<<IPSCONTENT
+
+IPSCONTENT;
+
+$sprintf = array($club->name, $category->_title); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'club_node', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'sprintf' => $sprintf ) );
+$return .= <<<IPSCONTENT
+
+IPSCONTENT;
+
+else:
+$return .= <<<IPSCONTENT
+
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+</span></a>
+				<figure class='ipsData__image'>
 					
 IPSCONTENT;
 
@@ -2622,7 +2680,6 @@ $return .= \IPS\Theme\Template::htmlspecialchars( $category->lastImage()->file_t
 $return .= <<<IPSCONTENT
 ' />
 						</video>
-						<i class="ipsFigure__play"></i>
 					
 IPSCONTENT;
 
@@ -2640,108 +2697,206 @@ IPSCONTENT;
 else:
 $return .= <<<IPSCONTENT
 
-						<i class="ipsFigure__icon"></i>
+						<i></i>
 					
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-					<span class='ipsInvisible'>
-IPSCONTENT;
-
-if ( \IPS\Settings::i()->club_nodes_in_apps and $club = $category->club() ):
-$return .= <<<IPSCONTENT
-
-IPSCONTENT;
-
-$sprintf = array($club->name, $category->_title); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'club_node', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'sprintf' => $sprintf ) );
-$return .= <<<IPSCONTENT
-
-IPSCONTENT;
-
-else:
-$return .= <<<IPSCONTENT
-
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-
-IPSCONTENT;
-
-endif;
-$return .= <<<IPSCONTENT
-</span>
-				</a>
-				
+					
 IPSCONTENT;
 
 if ( $category->lastImage() && $category->lastImage()->media && !$category->cover_img_id ):
 $return .= <<<IPSCONTENT
 
-					
+						
 IPSCONTENT;
 
 $return .= \IPS\Theme::i()->getTemplate( "global", "gallery", 'front' )->nsfwOverlay( $category->lastImage() );
 $return .= <<<IPSCONTENT
 
-				
+					
 IPSCONTENT;
 
 elseif ( $category->coverPhoto('small') !== NULL ):
 $return .= <<<IPSCONTENT
 
-	                
+						
 IPSCONTENT;
 
 $return .= \IPS\Theme::i()->getTemplate( "global", "gallery", 'front' )->nsfwOverlay( $category->coverPhotoObject() );
 $return .= <<<IPSCONTENT
 
-				
+					
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-			</figure>
-			<h3 class='ipsTitle ipsTitle--h5'>
-				<a href='
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-'>
-					
+				</figure>
+				<div class="ipsData__content">
+					<div class="ipsData__main">
+						
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->club_nodes_in_apps and $club = $category->club() ):
 $return .= <<<IPSCONTENT
 
+							<div class="ipsData__club"><a href="
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+">
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->name, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+</a></div>
 						
-IPSCONTENT;
-
-$sprintf = array($club->name, $category->_title); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'club_node', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'sprintf' => $sprintf ) );
-$return .= <<<IPSCONTENT
-
-					
-IPSCONTENT;
-
-else:
-$return .= <<<IPSCONTENT
-
-						
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-
-					
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-				</a>
-			</h3>
-		</li>
+						<h2 class='ipsData__title'><a href='
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+'>
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+</a></h2>
+					</div>
+					<div class="ipsData__extra">
+						
+IPSCONTENT;
+
+if ( $category->lastImage() !== NULL ):
+$return .= <<<IPSCONTENT
+
+							<div class="ipsData__last">
+								
+IPSCONTENT;
+
+$val = ( $category->lastImage()->date instanceof \IPS\DateTime ) ? $category->lastImage()->date : \IPS\DateTime::ts( $category->lastImage()->date );$return .= $val->html(useTitle: true);
+$return .= <<<IPSCONTENT
+
+							</div>
+						
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+
+						<ul class='ipsData__stats'>
+							
+IPSCONTENT;
+
+if ( $category->allow_comments and $category->_commentsForDisplay ):
+$return .= <<<IPSCONTENT
+
+								<li data-statType='comments'>
+									<span class='ipsData__stats-icon' data-stat-value="
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->_commentsForDisplay, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+" aria-hidden="true" data-ipstooltip title='
+IPSCONTENT;
+
+$pluralize = array( $category->_commentsForDisplay ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_comment_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+'></span>
+									<span class='ipsData__stats-label'>
+IPSCONTENT;
+
+$pluralize = array( $category->_commentsForDisplay ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_comment_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+</span>
+								</li>
+							
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+
+							
+IPSCONTENT;
+
+if ( $category->allow_albums and $category->public_albums ):
+$return .= <<<IPSCONTENT
+
+								<li data-statType='albums'>
+									<span class='ipsData__stats-icon' data-stat-value="
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->public_albums, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+" aria-hidden="true" data-ipstooltip title='
+IPSCONTENT;
+
+$pluralize = array( $category->public_albums ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_album_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+'></span>
+									<span class='ipsData__stats-label'>
+IPSCONTENT;
+
+$pluralize = array( $category->public_albums ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_album_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+</span>
+								</li>
+							
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+
+							
+IPSCONTENT;
+
+$count = \IPS\gallery\Image::contentCount( $category );
+$return .= <<<IPSCONTENT
+
+							
+IPSCONTENT;
+
+if ( $count ):
+$return .= <<<IPSCONTENT
+
+								<li data-statType='images'>
+									<span class='ipsData__stats-icon' data-stat-value="
+IPSCONTENT;
+
+$return .= \IPS\Member::loggedIn()->language()->formatNumber( $count );
+$return .= <<<IPSCONTENT
+" aria-hidden="true" data-ipstooltip title='
+IPSCONTENT;
+
+$pluralize = array( $count ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_img_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+'></span>
+									<span class='ipsData__stats-label'>
+IPSCONTENT;
+
+$pluralize = array( $count ); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'cat_img_count', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'pluralize' => $pluralize ) );
+$return .= <<<IPSCONTENT
+</span>
+								</li>
+							
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+
+						</ul>
+					</div>
+				</div>
+			</li>
+		
+IPSCONTENT;
+
+endif;
+$return .= <<<IPSCONTENT
+
 	
 IPSCONTENT;
 
@@ -2914,37 +3069,32 @@ IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
 '>
-						
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+</a>
+				</h2>
+				
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->club_nodes_in_apps and $club = $category->club() ):
 $return .= <<<IPSCONTENT
 
-							
+					<div class='i-color_soft'><a href='
 IPSCONTENT;
-
-$sprintf = array($club->name, $category->_title); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'club_node', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'sprintf' => $sprintf ) );
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-
-						
+'>
 IPSCONTENT;
-
-else:
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->name, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-
-							
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-
-						
+</a></div>
+				
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-					</a>
-				</h2>
 				<ul class='ipsList ipsList--inline i-color_soft i-justify-content_center i-font-size_-1'>
 					
 IPSCONTENT;
@@ -2954,7 +3104,7 @@ $return .= <<<IPSCONTENT
 <li><i class='fa-regular fa-clock'></i> 
 IPSCONTENT;
 
-$val = ( $category->lastImage()->date instanceof \IPS\DateTime ) ? $category->lastImage()->date : \IPS\DateTime::ts( $category->lastImage()->date );$return .= $val->html();
+$val = ( $category->lastImage()->date instanceof \IPS\DateTime ) ? $category->lastImage()->date : \IPS\DateTime::ts( $category->lastImage()->date );$return .= $val->html(useTitle: true);
 $return .= <<<IPSCONTENT
 </li>
 IPSCONTENT;
@@ -3170,7 +3320,7 @@ IPSCONTENT;
 else:
 $return .= <<<IPSCONTENT
 
-					<i></i>
+					<span class='ipsIcon ipsIcon--fa' aria-hidden="true"><i class="fa-ips"></i></span>
 				
 IPSCONTENT;
 
@@ -3210,43 +3360,36 @@ $return .= <<<IPSCONTENT
 			</figure>
 			<div class="ipsData__content">
 				<div class="ipsData__main">
-					<h2 class='ipsData__title'>
-						<a href='
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-'>
-							
+					
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->club_nodes_in_apps and $club = $category->club() ):
 $return .= <<<IPSCONTENT
 
-								
+						<div class="ipsData__club"><a href="
 IPSCONTENT;
-
-$sprintf = array($club->name, $category->_title); $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'club_node', ENT_DISALLOWED, 'UTF-8', FALSE ), FALSE, array( 'sprintf' => $sprintf ) );
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-
-							
+">
 IPSCONTENT;
-
-else:
+$return .= \IPS\Theme\Template::htmlspecialchars( $club->name, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
 $return .= <<<IPSCONTENT
-
-								
-IPSCONTENT;
-$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
-$return .= <<<IPSCONTENT
-
-							
+</a></div>
+					
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-						</a>
-					</h2>
+					<h2 class='ipsData__title'><a href='
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+'>
+IPSCONTENT;
+$return .= \IPS\Theme\Template::htmlspecialchars( $category->_title, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
+$return .= <<<IPSCONTENT
+</a></h2>
 				</div>
 				<div class="ipsData__extra">
 					
@@ -3259,7 +3402,7 @@ $return .= <<<IPSCONTENT
 							
 IPSCONTENT;
 
-$val = ( $category->lastImage()->date instanceof \IPS\DateTime ) ? $category->lastImage()->date : \IPS\DateTime::ts( $category->lastImage()->date );$return .= $val->html();
+$val = ( $category->lastImage()->date instanceof \IPS\DateTime ) ? $category->lastImage()->date : \IPS\DateTime::ts( $category->lastImage()->date );$return .= $val->html(useTitle: true);
 $return .= <<<IPSCONTENT
 
 						</div>
@@ -3276,7 +3419,7 @@ IPSCONTENT;
 if ( $category->allow_comments and $category->_commentsForDisplay ):
 $return .= <<<IPSCONTENT
 
-							<li data-statType='album_comments'>
+							<li data-statType='comments'>
 								<span class='ipsData__stats-icon' data-stat-value="
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $category->_commentsForDisplay, ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
@@ -3342,7 +3485,7 @@ IPSCONTENT;
 if ( $count ):
 $return .= <<<IPSCONTENT
 
-							<li data-statType='albums'>
+							<li data-statType='images'>
 								<span class='ipsData__stats-icon' data-stat-value="
 IPSCONTENT;
 
@@ -4377,7 +4520,7 @@ IPSCONTENT;
 		$return = '';
 		$return .= <<<IPSCONTENT
 
-<header class="ipsPageHeader">
+<header class="ipsPageHeader ipsPageHeader--galleryIndex">
     <div class="ipsPageHeader__row">
         
 IPSCONTENT;
@@ -4482,30 +4625,34 @@ IPSCONTENT;
 $clubNodes = \IPS\Settings::i()->club_nodes_in_apps ? \IPS\gallery\Category::clubNodes() : array();
 $return .= <<<IPSCONTENT
 
-    <section class="ipsBox ipsPull">
+    <section class="ipsBox ipsBox--galleryCategories ipsPull">
         <header class="ipsBox__header">
             <h2>
 IPSCONTENT;
 
 $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'gallery_categories', ENT_DISALLOWED, 'UTF-8', FALSE ), TRUE, array(  ) );
 $return .= <<<IPSCONTENT
-</h2>
-            <span class="ipsBox__header-secondary">
-                <a href="
+ · <a href="
 IPSCONTENT;
 
 $return .= htmlspecialchars( \IPS\Http\Url::internal( "app=gallery&module=gallery&controller=browse&do=categories", null, "gallery_categories", array(), 0 ), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', TRUE );
 $return .= <<<IPSCONTENT
-">
+" class="i-color_soft">
 IPSCONTENT;
 
 $return .= \IPS\Member::loggedIn()->language()->addToStack( htmlspecialchars( 'gallery_view_all_categories', ENT_DISALLOWED, 'UTF-8', FALSE ), TRUE, array(  ) );
 $return .= <<<IPSCONTENT
-</a>
-            </span>
+</a></h2>
+            
+IPSCONTENT;
+
+$return .= \IPS\Theme::i()->getTemplate( "global", "core" )->carouselNavigation( 'gallery-categories' );
+$return .= <<<IPSCONTENT
+
         </header>
         <div class="ipsBox__content">
-            <ul class="ipsCarousel ipsCarousel--padding i-basis_240 i-text-align_center" 
+            <i-data>
+                <ul class="ipsData ipsData--wallpaper ipsData--carousel ipsData--galleryCategories" 
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->gallery_nsfw ):
@@ -4516,50 +4663,45 @@ IPSCONTENT;
 endif;
 $return .= <<<IPSCONTENT
  id="gallery-categories" tabindex="0">
-                
+                    
 IPSCONTENT;
 
 if ( $rootCategories = \IPS\gallery\Category::roots() ):
 $return .= <<<IPSCONTENT
 
-                    
+                        
 IPSCONTENT;
 
 $return .= \IPS\Theme::i()->getTemplate( "browse", "gallery" )->categoryCarousel( $rootCategories );
 $return .= <<<IPSCONTENT
 
-                
+                    
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
                 
-                
+                    
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->club_nodes_in_apps and $clubNodes = \IPS\gallery\Category::clubNodes() ):
 $return .= <<<IPSCONTENT
 
-                    
+                        
 IPSCONTENT;
 
 $return .= \IPS\Theme::i()->getTemplate( "browse", "gallery" )->categoryCarousel( $clubNodes );
 $return .= <<<IPSCONTENT
 
-                
+                    
 IPSCONTENT;
 
 endif;
 $return .= <<<IPSCONTENT
 
-            </ul>
-			
-IPSCONTENT;
-
-$return .= \IPS\Theme::i()->getTemplate( "global", "core" )->carouselNavigation( 'gallery-categories' );
-$return .= <<<IPSCONTENT
-
+                </ul>
+            </i-data>
         </div>
     </section>    
 
@@ -4575,7 +4717,7 @@ IPSCONTENT;
 if ( !empty( $featured ) ):
 $return .= <<<IPSCONTENT
 
-    <section class="ipsBox ipsPull" 
+    <section class="ipsBox ipsBox--galleryFeatured ipsPull" 
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->gallery_nsfw ):
@@ -4827,7 +4969,7 @@ IPSCONTENT;
 if ( !empty( $new ) ):
 $return .= <<<IPSCONTENT
 
-    <section class="ipsBox ipsPull" 
+    <section class="ipsBox ipsBox--newImages ipsPull" 
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->gallery_nsfw ):
@@ -5064,7 +5206,7 @@ IPSCONTENT;
 if ( \count( $recentlyUpdatedAlbums ) ):
 $return .= <<<IPSCONTENT
 
-	<section class="ipsBox ipsPull" 
+	<section class="ipsBox ipsBox--updatedAlbums ipsPull" 
 IPSCONTENT;
 
 if ( \IPS\Settings::i()->gallery_nsfw ):
@@ -5089,7 +5231,7 @@ IPSCONTENT;
 foreach ( $recentlyUpdatedAlbums as $album ):
 $return .= <<<IPSCONTENT
 
-	                <li class="i-_margin-block_2">
+	                <li>
 	                	<figure class="ipsFigure">
 							<a href="
 IPSCONTENT;
@@ -5133,7 +5275,7 @@ $return .= \IPS\Theme::i()->getTemplate( "global", "gallery", 'front' )->nsfwOve
 $return .= <<<IPSCONTENT
 
 						</figure>
-						<h2 class="ipsTitle ipsTitle--h5">
+						<h2 class="ipsTitle ipsTitle--h5 i-margin-top_2">
 							<a href="
 IPSCONTENT;
 $return .= \IPS\Theme\Template::htmlspecialchars( $album->url(), ENT_QUOTES | ENT_DISALLOWED, 'UTF-8', FALSE );
@@ -5144,7 +5286,7 @@ $return .= \IPS\Theme\Template::htmlspecialchars( $album->name, ENT_QUOTES | ENT
 $return .= <<<IPSCONTENT
 </a>
 						</h2>
-						<ul class="ipsList ipsList--inline i-justify-content_center i-font-size_-1 i-color_soft">
+						<ul class="ipsList ipsList--inline i-justify-content_center i-font-size_-1 i-color_soft i-margin-top_2">
 							<li data-ipstooltip title="
 IPSCONTENT;
 
@@ -6258,7 +6400,7 @@ $return .= <<<IPSCONTENT
  
 IPSCONTENT;
 
-$val = ( $image->updated instanceof \IPS\DateTime ) ? $image->updated : \IPS\DateTime::ts( $image->updated );$return .= $val->html();
+$val = ( $image->updated instanceof \IPS\DateTime ) ? $image->updated : \IPS\DateTime::ts( $image->updated );$return .= $val->html(useTitle: true);
 $return .= <<<IPSCONTENT
 </li>
 					</ul>