Vorschaubild Grösse (Fallback) oder Infos mit Bild verlinken

Bitte in den Beiträgen keine externe Bilder einbinden, sondern nur die Dateianhänge verwenden.
Vielen dank.

    Hallo,


    auf dem Testserver experimentiere ich mit der Darstellung «Flex» und der Vorschaubild Grösse «Klein». Je nach Browser werden mit dieser Einstellung, die Bilder durch die Informationen verdeckt, sobald man mit der Maus auf das Bild geht. Die nächst grössere Einstellung «Normal» ist zu wuchtig für unsere Zwecke, die Bilder sind zu gross.


    Wäre es eventuell möglich, die Informationen «klickbar» zu machen, auch wenn sie das Bild überdecken?


    Alternativ würde eine weitere Vorschaugrösse das Problem beheben. Die könnte dann «Mittel» heissen und 300 × 216 px gross sein.


    Zusatzinfos:

    Mit Firefox gibt es keinerlei Probleme mit der Darstellung. Chrome, Opera und Edge hingegen überdecken manche Bilder oder Videos.

    Zitat von Eisu

    Wäre es eventuell möglich, die Informationen «klickbar» zu machen, auch wenn sie das Bild überdecken?

    Das ist leider technisch nicht möglich. Aus dem Grund, weil die andren Informationen so zusagen vor dem Bild liegen. Ansonsten könnte man die anderen Informationen garnicht sehen, weil das Bild vor diesen ist und dann natürlich immer nur das Bild anklickbar ist.

    Zitat von Eisu

    Alternativ würde eine weitere Vorschaugrösse das Problem beheben. Die könnte dann «Mittel» heissen und 300 × 216 px gross sein.

    Eine weitere Vorschau Größe werde ich nicht einbauen, Selbst die aktuell verwendeten sind eigentlich viel zu klein.

    Du kannst aber mit Hilfe von CSS das Flex verändern und auch anpassen.


    CSS
    .easymediaItemList{
    &.flex{
        > div {
            //damit kannst du einstellen, welche Min größe die Einträge haben, unabhängig von dem Vorschaubild
            min-width: 120px;
            min-height: 120px;
        }
    }
}

    Je nach Browser sieht das anders aus. Im Beispiel unten ist Flex auf «Normal» konfiguriert.Vermutlich hängt dies auch ein wenig vom Stil ab, mit dem Standard-Stil ist die Darstellung okay. Nur Chrome stellt die Vorschaubilder vernünftig dar (zweiter Browser von links).


    Das CSS hilft, danke Dir!


    Es wäre möglich, dass andere User ähnliche Probleme haben und dankbar über eine zusätzliche Grösse wären.


    Das ganze kommt ganz stark auf die Größe des Browser Fensters an. Das System passt sich automatisch an die verfügbare Größe an. Ich habe das gerade im Firefox, Edge und Safari getestet. Die machen genau das was sie sollen.

    Ich vermute, dass das Browser Fenster bei den anderen zu klein ist und entsprechend nicht genügend Platz ist. Und alles dazustellen.

    Ansonsten, gibt es eventuell irgendwelche Plugins oder Custom CSS welche die Browser laden? Dies könnte diese Änderungen verursachen.


    Edit:

    Du kannst auch die maximale breite der Container bestimmten per CSS

    CSS
    .easymediaItemList{
    &.flex{
        > div {
            //damit kannst du einstellen, welche max breite die Einträge haben, unabhängig von dem Vorschaubild
            max-width: 1024px;
        }
    }
}

    Ich vermute das vieles vom Design kommt und da durch komische Ergebnisse erscheinen. In meinem Test-Forum kann ich dieses verhalten in verschieden Browsern, im Standard Design, jedoch nicht reproduzieren.

    Zitat von Eisu

    Gibt es ein CSS, welches dafür sorgt, dass mindestens 3 Vorschaubilder pro Zeile angezeigt werden?

    Mindestens gibt es nicht. Es wird versucht so viele Einträge in eine Reihe zu bekommen wie nur möglich. Und hängt von der eingestellten Breite ab.

    Wenn du wirklich 3 haben willst, solltest du Grid als Darstellung verwenden oder Masonry. Die garantieren das 3 in einer Reihe sind.

    Wir haben uns für die Darstellung „Flex“ entschieden, mit dem CSS-Code von Cyperghost. Der Code stellt sicher, dass die Vorschaubilder eine minimale Grösse haben, dadurch nicht von den Bildinformationen verdeckt werden. Ein Wermutstropfen bleibt jedoch, „Flex“ beschneidet die Bilder, wir sind uns halt anderes gewöhnt. :(



    Vielleicht werden wir live „Masonry“ einsetzen, wir sind bislang nicht ganz sicher.


    Dennoch unser Fazit: „So langsam denken wir daran, EasyMedia 5.5.x auch live einzusetzen, es nimmt tolle Formen an. Ein Lob an Cyperghost und danke, dass Du EasyMedia rettest!“ :thumbup:

    Zitat von Eisu

    Ein Wermutstropfen bleibt jedoch, „Flex“ beschneidet die Bilder, wir sind uns halt anderes gewöhnt. :(

    Das muss leider gemacht werden, ansonsten müsste das Bild gestreckt werden in eine Richtung, was dazu führt dass das Bild nicht schon aussehen kann.

    Solltest du dies gerne haben wollen gibt es die Möglichkeit dies wie folgt per CSS zu machen.

    Du hast sicherlich alles Mögliche versucht, die «alte» Darstellung zu erreichen und festgestellt, dass sie zu wartungsaufwendig ist? Wir können damit leben und werden uns an „Flex“ gewöhnen oder eventuell „Masonry“ nutzen, je nachdem, wie die Community reagieren wird.


    Danke, für mich ist das Thema erledigt. :)

  • Cyperghost

    Hat das Thema geschlossen.