FilePond ins Design anpassen

  • Hallöchen!

    Aktuell arbeite ich ja noch am Design des Reworks meiner persönlichen Seite.

    Etwas an dem ich gefallen gefunden habe, ist es Dinge wie zum Beispiel das "Formular" zum erstellen eines Blog Beitrages oder zum Hochladen eines Bildes/Bilder so aussehen zu lassen, wie sie nach der veröffentlichung aussehen würden.

    Nun, bei Bildern klappt das so "semi" bei Beiträgen fällt mir da einfach die Art und weiße wie FilePond im Standard aussieht in den Rücken:

    Live kann man das da sehen: https://new.syntafin.de/posts/create

    (Bitte kein "aber ich kann da einfach zugreifen ohne anmelden?!?! nun bitte... Design Demo bedeutet Design Demo)

    Gerne hätte ich, das Filepond sich da anpasst um auszusehen wie das Ergebnis, vor allem nach dem Einfügen eines Bildes:

    Ich hab zwar in den Docs das hier gefunden:

    Easy File Uploading With JavaScript | FilePond
    A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user…
    pqina.nl

    Das ignoriert FilePond aber gekonnt (typisch JS würd ich jetzt mal behaupten...), also zweite Möglichkeit: Über CSS dazu zwingen!

    Nun... da hapert es aber, da in meinen Tests ein wenig schräges verhalten auftritt.

    Habe es mit folgendem Hardcoded CSS erstmal probiert, jedoch... sieht das Ergebnis nicht aus wie man es sich vorstellt:

    CSS
    .filepond--image-bitmap canvas {
        width: 1552px;
        height: 400px;
        object-fit: cover;
    }


    So wirklich weiß ich also aktuell nicht mehr weiter und hoffe hier hat jemand Ideen und Vorschläge wie man es lösen kann :)

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • Syntafin 23. April 2023 um 12:50

    Hat das Label HTML & CSS hinzugefügt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!