Beiträge von Syntafin

Zitat von evarioo

Wozu ist die zusätzliche image_id

Die image_id ist aus dem File-Model, damit man weiß zu welchem "Bild" es gehört (grundlegend kann ein Bild mehrere Dateien haben)

Zitat von Cheety

Vielleicht mal so ausprobieren.

Code

public function getImageUrlAttribute(): string
    {
        $file = $this->files()->first();

        return $file ? Storage::disk('public')->url('files/show/' . $file->filename . '.webp') : $this->defaultImage();
    }

Das ändert nichts am Problem.

Da es faktisch unmöglich ist das filename nichts hat (NOT NULL), und wie man sieht Zeile 18 ist der Dateiname vorhanden.

Eine Änderung des Ternary Operators auf !is_null ($this->files->first()->filename ändert da bisher nichts.

Hallöchen,

das Problem begleitet mich jetzt schon länger, eine Lösung finde ich jedoch nicht dafür.
Es kommt immer wieder vor das einige (vor allem durch Migration übertragene) Einträge in meiner App einen Fehler auslösen: Attempt to read property "filename" on null

Wo das ganze passiert, ist auch recht einfach herausgefunden:

<?php

namespace App\Traits;

trait HasImage
{
	public function getImageUrlAttribute(): string
    {
        return $this->files
            ? Storage::disk('public')->url('files/show/'.$this->files()->first()->filename.'.webp')
            : $this->defaultImage();
    }
}

Würde hier ja tatsächlich aber schon das zuvorgehende Property files leer sein, müsste er mir das Standard-Bild ausgeben.
Daran hab ich natürlich auch gedacht, und einfach mal einen der betroffenen Einträge via Tinker mir angeschaut:

App\Models\Image#2439 ▼
  id: 325
  shortkey: "dDJE1"
  description: "{"de": "Ob der Grebuloff genau wie ich über die Zukunft nachdenkt? Das neue Leben das auf Elysium entsteht überrascht mich immer wieder aufs neue."}"
  status: 1
  watermark: 1
  promoted: 0
  user_id: 1
  folder_id: 1
  created_at: "2022-10-25 22:40:58"
  updated_at: "2024-08-04 12:52:34"
  deleted_at: null
  user: App\Models\User {#3419 ▶}
  files: Illuminate\Database\Eloquent\Collection {#3416 ▶
    all: array:5 [▼
      0 => App\Models\File {#3423 ▼
        id: 367
        filename: "nLyYSZxJKP9IxjBvBEHgQOlQyFlae8Y4KQBO3fM0kHnxRsiHguKQVVpfudQqLDYu"
        extension: "webp"
        mime: "image/webp"
        filesize: 342248
        width: 2560
        height: 1440
        user_id: 1
        image_id: 325
        created_at: "2022-10-25 22:41:00"
        updated_at: "2024-08-04 12:52:36"
        deleted_at: null
      }
      1 => App\Models\File {#3422 ▶}
      2 => App\Models\File {#2431 ▶}
      3 => App\Models\File {#3426 ▶}
      4 => App\Models\File {#3427 ▶}
    ]
  }
  folder: App\Models\Folder {#3448 ▶}
  +image_url: "https://syntafin.de/storage/files/show/nLyYSZxJKP9IxjBvBEHgQOlQyFlae8Y4KQBO3fM0kHnxRsiHguKQVVpfudQqLDYu.webp"
  +folder_url: "https://syntafin.de/storage/files/folder/nLyYSZxJKP9IxjBvBEHgQOlQyFlae8Y4KQBO3fM0kHnxRsiHguKQVVpfudQqLDYu.webp"
  +image_contact: "https://syntafin.de/storage/files/contact/nLyYSZxJKP9IxjBvBEHgQOlQyFlae8Y4KQBO3fM0kHnxRsiHguKQVVpfudQqLDYu.webp"

Auffällig für mich ist, das es hier nun scheinbar keine Probleme gibt mir letztendlich image_url zu erzeugen. Die gesuchte Datei ist ja auch vorhanden .
Und lasse ich in besagter Funktion mir zuvor files in den Log schreiben... ja dann steht das sogar im Log das es da ist.

Jemand eine Idee diesbezüglich?

Bei mir bleibt es wie bisher.... sauber und leer

Ich möchte mal noch anmerken das es auch Inkscape gibt, das ebenfalls SVG kann war da glaube ich sogar das Standardformat statt eine Insellösung.

Das würde solche Angebote wenn sie beworben werden auch seriöser machen.

Klar, das ist eine Standardfunktion von Chromium. Keine Ahnung aber ob Gecko/Firefox das ebenfalls kann, also VAPID meine ich

Du meinst das da?

Das geht völlig von alleine wenn man Benachrichtigungen zulässt, auch ohne die PWA zu installieren.

Zitat von Blacksonny

Viel Wasser trinken, Dunkelheit und lüften ist meine Medizin bei Kopfschmerzen

Hab da so meine Methoden, hab das ja öfter .

Zitat von Blacksonny

Hat jemand ein Android und kann etwas für mich im Forum etwas testen? Sollte auch relativ flott gehen

Was denn?

Welcher CSS hack? Die drei CSS Anweisungen die das Flex Layout anpassen?

Dazu weiß ich nicht ob das auch mobil gut ist so.

Frohes neues Jahr ich beginne meines mit Kopfschmerzen, hoffentlich bin ich damit alleine.

So ganz ohne Code kann ich dir dazu nix sagen, Backpack selbst auch noch nie verwendet (bin ja beim LIST/VIST Stack)

Zitat von Maximilian Rupp

Oben rechts haben wir einen Style Wechsler eingebaut, damit man mit einem Mausklick zwischen Light und Dark wählen kann

Der Überschreibt übrigens was der Nutzer einstellt:

Dein Code hilft zumindest schon mal beim Problem mit dem Hintergrund

Grundlegend mein Plan hier mal besser erklärt:

Aktuell unterstützt meine Seite nur den Darkmode, es gibt kein "Light", dürfte auch klar sein weshalb:

Da ist nix "Hell", also will ich da grundsätzlich mal auch an etwas hellerem Arbeiten, nicht jedem gefällt es "dunkel" ja. Aber Grundlegend habe ich auch die Idee mehr Farbvariationen anzubieten. Aktuell ist alles in meinem Lieblingsfarben gehalten, ganz offensichtlich viel Lila und Pink...
Aber was spricht zB etwas mehr Rot, Blau, Orange, Grün, etc? Nichts! Und wenn wir dabei sind, wieso nicht gleich ein AMOLED Modus, mit so viel Schwarz wie nur möglich?

Aktuell sieht zB eine Karte so aus:

<template>
    <div class="h-auto bg-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter">
        <slot />
    </div>
</template>

<script setup>
import { usePage } from '@inertiajs/vue3';
import { computed } from 'vue';

const style = usePage().props.featureFlags.cardGradient;

const classes = computed(() => {
    return style ? 'h-auto rounded bg-white/20 bg-gradient-to-b to-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter' : 'h-auto rounded bg-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter';
});
</script>

Man sieht hier eindeutig das Karten recht einfach gehalten sind ja.

Grundvorstellung also:

Dark: bg-white/10
Light: bg-black/10
AMOLED: bg-black

Sähe dann zB so in gänze aus: h-auto bg-black/10 dark:bg-white/10 amoled:bg-black bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter

Normalerweise arbeitet Tailwind einfach nach dem was prefers-color-scheme vom Browser vorgibt, man kann das aber auf die Selektor-Strategie ändern, wo durch setzten von dark im HTML-Tag als Klasse dies getoggelt wird (bspw. via JS ja).
Dazu gibts auch ganz gut eine Erklärung in den Docs:

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

Mein Ziel ist also, Tailwind so zu erweitern, das wenn ich zB das hier habe:

<!-- AMOLED Mode -->
<html class="amoled">
<body>
	<!-- Will be AMOLED Mode -->
	<div class="bg-white dark:bg-gray-900 amoled:bg-black">
		<!-- ... -->
	</div>
</body
</html>

Das eben die AMOLED-Klassen gewählt werden, entsprechend erweitert für weitere Selektoren wie red etc.

Fast richtig!

Man kann ja via dark steuern was je nach Präferenz des Nutzers gezeigt wird, ändert man das aber in dein Tailwind Settings auf Selektor Modus, kann man das ja "selbst toggeln", mein Plan ist es neben dem vermeitlichen Light-Mode vlt. auch einen AMOLED-Modus zu bringen, das würde ich dann halt gerne damit steuern.

Zitat von evarioo

Hab leider kein wbb ..

Brauchts nicht für ne Sache vom Core .

Ansonsten, mal eben auf meiner Test-Instanz für das sehr gut gepflegte Plugin herumgespielt, wenn es so passt wie beim ersten Post:

.contentItemList {
	flex-direction: column;
}

.contentItemLink {
	display: flex;
}

.contentItemImage {
	width: 30%;
}

.contentItemContent {
	width: 70%;
}

Live hier zu sehen:

Artikel - WSC Test Instanz

Default Ansicht -> WSC Standard Stil auswählen

Zitat von evarioo

Zeig mir nur einen bei hetzner der auf Grund deiner repos Hilfestellung zur Technik am Webspace geben kann bzw die Einstellungen für dich vornimmt.

Damit der Hoster-Thread OT frei bleibt:

Dafür muss ich nur ins Erdgeschoss da wohnt ein MA von Hetzner der in der passenden Abteilung arbeitet.

Aber da ich meine Server nicht administrativ pflege (warum sollte ich... dafür gibts entsprechende Tools), sind die eh von Anfang an korrekt eingestellt und mit allem versorgt was ich brauche.

(Die API von diesem Dienst wird übrigens auch verwendet für die automatische Bereitstellung)

Es wird hier grundsätzlich falsch verstanden was ich meine.

Das einbringen solcher Möglichkeiten wäre mMn etwas was ihm helfen würde gegen die großen Player gleichzuziehen, denn was Hetzner da anbietet haben Amazon, Google, DigitalOcean und viele andere auch und auch Firmen suchen sich ihre Hoster nach diesem Prinzip aus.

Woltlab verwendet das normale Artikelsystem auf ihrer Seite.

Aber ohne das jetzt Mal zu sehen wie es normalerweise aussieht und wie du es etwa haben willst, kann man schlecht jetzt schauen.

Außer du meinst das das mit dem Bild links und Rest rechts immer so sein sollte.