use new xxlarge size

resources/js/components/SMCarouselSlide.vue

@@ -1,7 +1,5 @@
 <template>
-    <div
+    <div class="sm-carousel-slide" :style="styleObject">
-        class="sm-carousel-slide"
-        :style="{ backgroundImage: `url('${imageUrl}')` }">
         <div
             v-if="image.length > 0 && imageUrl.length == 0"
             class="sm-carousel-slide-loading">
@@ -26,10 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { api } from "../helpers/api";
 import { MediaResponse } from "../helpers/api.types";
-import { imageLoad } from "../helpers/image";
+import { imageLoad, imageXXLarge } from "../helpers/image";
 import SMButton from "./SMButton.vue";
 import SMLoadingIcon from "./SMLoadingIcon.vue";
 
@@ -63,6 +61,11 @@ const props = defineProps({
 
 let imageUrl = ref("");
 
+/**
+ * Carousel slide styles.
+ */
+let styleObject = {};
+
 /**
  * Load the slider data.
  */
@@ -84,6 +87,14 @@ const handleLoad = () => {
         });
 };
 
+watch(
+    () => imageUrl.value,
+    (value) => {
+        const url = imageXXLarge(value);
+        styleObject["backgroundImage"] = `url('${url}')`;
+    }
+);
+
 handleLoad();
 </script>
 

resources/js/views/EventView.vue

@@ -122,7 +122,7 @@ import SMMessage from "../components/SMMessage.vue";
 import { api } from "../helpers/api";
 import { Event, EventResponse, MediaResponse } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
-import { imageLoad } from "../helpers/image";
+import { imageLoad, imageXXLarge } from "../helpers/image";
 import { stringToNumber } from "../helpers/string";
 import { useApplicationStore } from "../store/ApplicationStore";
 
@@ -312,7 +312,7 @@ const handleLoadImage = async () => {
             const data = result.data as MediaResponse;
 
             if (data && data.medium) {
-                imageLoad(data.medium.url, (url) => {
+                imageLoad(imageXXLarge(data.medium.url), (url) => {
                     imageUrl.value = url;
                 });
             }

resources/js/views/PostView.vue

@@ -4,7 +4,9 @@
         full
         class="sm-page-post-view"
         :page-error="pageError">
-        <div class="sm-heading-image" :style="styleObject"></div>
+        <div
+            class="sm-heading-image"
+            :style="{ backgroundImage: `url('${imageUrl}')` }"></div>
         <SMContainer>
             <div class="sm-heading-info">
                 <h1>{{ post.title }}</h1>
@@ -34,6 +36,7 @@ import {
     UserResponse,
 } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
+import { imageLoad, imageXXLarge } from "../helpers/image";
 import { useApplicationStore } from "../store/ApplicationStore";
 
 const applicationStore = useApplicationStore();
@@ -56,14 +59,41 @@ let pageLoading = ref(false);
 /**
  * Post styles.
  */
-let styleObject = {};
+const imageUrl = ref("");
 
 /**
  * Post user.
  */
 let postUser: User | null = null;
 
-const loadData = async () => {
+/**
+ * Load the hero image.
+ */
+const handleLoadImage = async () => {
+    api.get({
+        url: "/media/{medium}",
+        params: {
+            medium: post.value.hero,
+        },
+    })
+        .then((result) => {
+            const data = result.data as MediaResponse;
+
+            if (data && data.medium) {
+                imageLoad(imageXXLarge(data.medium.url), (url) => {
+                    imageUrl.value = url;
+                });
+            }
+        })
+        .catch(() => {
+            /* empty */
+        });
+};
+
+/**
+ * Load the page data.
+ */
+const handleLoad = async () => {
     let slug = useRoute().params.slug || "";
     pageLoading.value = true;
 
@@ -88,6 +118,7 @@ const loadData = async () => {
                 }).format("yyyy/MM/dd HH:mm:ss");
 
                 applicationStore.setDynamicTitle(post.value.title);
+                handleLoadImage();
 
                 // Get hero image
                 try {
@@ -101,9 +132,8 @@ const loadData = async () => {
                     const mediumData = mediumResult.data as MediaResponse;
 
                     if (mediumData && mediumData.medium) {
-                        styleObject[
+                        const url = imageXXLarge(mediumData.medium.url);
-                            "backgroundImage"
+                        styleObject["backgroundImage"] = `url('${url}')`;
-                        ] = `url('${mediumData.medium.url}')`;
                     }
                 } catch {
                     /* empty */
@@ -143,7 +173,7 @@ const formattedPublishAt = (dateStr) => {
     return new SMDate(dateStr, { format: "yMd" }).format("MMMM d, yyyy");
 };
 
-loadData();
+handleLoad();
 </script>
 
 <style lang="scss">