Merge pull request #280 from openzim/add-banner-overlay

Add an overlay image for the channel banner

CHANGELOG

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove `--no-zim`, `--keep` CLI arguments
 - Add support to index content from `zimui` JSON files in the ZIM using custom `IndexData` (#224)
 - Add integration tests to check the content of the ZIM created by the scraper (#268)
+- Add an overlay image for the channel banner (#279)
 
 ## [2.3.0] - 2024-05-22
 

zimui/src/assets/main.css

@@ -20,6 +20,10 @@ a {
  -webkit-text-size-adjust: 100%;
 }
 
+.banner-bg .v-img__img--preload {
+ filter: none;
+}
+
 /* roboto-latin-100-normal */
 @font-face {
  font-family: 'Roboto';

zimui/src/components/channel/ChannelHeader.vue

@@ -6,6 +6,7 @@ import AboutDialogButton from '@/components/channel/AboutDialogButton.vue'
 import { useMainStore } from '@/stores/main'
 
 import profilePlaceholder from '@/assets/images/profile-placeholder.jpg'
+import bannerOverlay from '@/assets/images/banner-overlay.png'
 
 const { mdAndDown } = useDisplay()
 
@@ -46,6 +47,7 @@ const tab = ref<number>(tabs[0].id)
  :scale="1"
  height="120"
  class="banner-bg rounded-lg rounded-t-0"
+ :lazy-src="bannerOverlay"
  :src="main.channel?.bannerPath"
  ></v-parallax>