it-swarm.com.de

Zufälliges Bild in einem Artikel

Ich habe meine eigene Vorlage erstellt, sodass beim Erstellen eines Artikels das Bild oben (wie ein Intro-Bild) eine width von 100% und eine eigene height hat (könnte 200px Oder was auch immer). Jetzt hat sich jemand entschieden, einen neuen Artikel zu erstellen und mehr als nur ein Bild mit eigener Breite, Position usw. in den Artikel einzufügen. Aber aufgrund meines Intro-Images haben sie alle eine Breite von 100%.

Mein erster Gedanke war, eine module für diese Bilder zu erstellen, aber ich kann nicht immer einen Artikel für jemanden erstellen und ein Modul darum legen, weil er sein Bild zum Beispiel mit 29,97% links haben möchte width (oder 65% ist es egal).

Kennt jemand eine Lösung dafür?

Ich schätze all die Hilfe und Kommentare!

EDIT: Vielen Dank, dass Sie mir geholfen haben! Leider kann ich nur eine Antwort akzeptieren, deshalb habe ich mich für @FFrewin entschieden, da in seiner Antwort einige weitere Möglichkeiten aufgeführt sind, um dieses Problem zu lösen, aber die anderen Antworten haben mir auch geholfen!

4
thissven

Dies ist möglicherweise nicht die genaue Antwort, die Sie suchen. Wenn Sie jedoch eine vollständige Website entwickeln und nicht nur eine Vorlage, die Sie verteilen möchten, verwenden möchten, sind die folgenden Ideen möglicherweise hilfreich.

Was Johanpw vorschlägt, ist im Allgemeinen die schnellste Lösung und kann leicht angewendet werden. Persönlich hätte ich wahrscheinlich Dinge aus all den anderen Antworten kombiniert und wäre vielleicht noch weiter gegangen.

Einige der verschiedenen Möglichkeiten, die zur Verfügung stehen:

Eine Vorlagenüberschreibung ist eine meiner bevorzugten Methoden, da ich für die Elemente eigene Markierungen, Bedingungen und Klassen verwenden kann.

Zusätzlich und abhängig von den Anforderungen könnte ich Folgendes implementieren:

  • Zusätzliche benutzerdefinierte Felder im Artikel für Bilder oder Diashows. Das Aixeena CCK ist eine einfach zu implementierende und flexible Lösung für solche Aufgaben.

  • Zusätzliche benutzerdefinierte Editor-Schaltflächen zum Einfügen zusätzlicher Bilder in vordefinierten Größen. Es gibt Erweiterungen für Diashows/Bilder, die solche Schaltflächen zum Einfügen von Bildern enthalten.

  • Es gibt auch Erweiterungen, mit denen Codeausschnitte mit vordefiniertem Markup in den Artikelkörper eingefügt werden können. Zum Beispiel ist Content Templater von regulären Labors ein praktisches Werkzeug, oder RokCandy von rockettheme. Mit ihnen können Sie vorgefertigte Codeblöcke erstellen, die der Endbenutzer problemlos einfügen kann. Ihr vorgefertigter Code kann Markierungen und Klassen enthalten, die Sie im Frontend auf eine bestimmte Weise anzeigen.

  • Auch im JCE-Editor können Sie bestimmte Klassen/Stile erstellen, so dass der Endbenutzer leicht von einer Dropdown-Liste abholen kann. Feld runter und wende es auf bestimmte Elemente seines Inhalts an. Sie können ein paar Stile erstellen, z. B. "Small-Left", "Small-Right", "Medium-Left" und "Full-Width".

2
FFrewin

Sie müssen einen spezifischeren CSS-Selektor verwenden, um nur das Hauptbild als Ziel festzulegen, und nicht alle Bilder, die einem Artikel hinzugefügt wurden.

Das Hauptbild des Artikels (hinzugefügt über die Registerkarte "Bilder und Links" im Artikel-Editor) wird normalerweise in einem <div class="item-image">, so dass Sie Ihr CSS einfach so ändern können, dass es nur auf dieses Bild abzielt:

.item-image img {
    width: 100%;
    height: auto;
    /* Add your styles here */
}
4
johanpw

Einige Ideen:

  • Verwenden Sie den n-ten oder den ersten Selektor in CSS, sodass nur das erste Bild in diesem Bereich 100% ist.
  • Fügen Sie neue Stile/Stile hinzu, die sie über das WYWIWYG mithilfe der Datei editor.css in Ihrer Vorlage auswählen können. Sie können dann mithilfe dieser Option festlegen, wie breit ein Bild sein soll.
  • Verwenden Sie das vollständige Artikelbild für Ihr oberstes Bild und wenden Sie einen Stil an, der nur für diesen Bereich gilt. Ich denke, das wäre standardmäßig ein .item-img-Bild, aber Sie können das Artikellayout in den Außerkraftsetzungen Ihrer Vorlage jederzeit aktualisieren, damit dies nach Ihren Wünschen funktioniert.
  • Verwenden Sie max-width anstelle von width und teilen Sie ihnen mit, dass sie immer das Hauptbild mit X Pixeln oder mehr erstellen sollen. Bilder über ihre natürliche Größe hinaus zu dehnen, ist ohnehin keine gute Idee, da sie pixelig sind.
1
Richard B

Wenn Sie das Design aller Artikel erzwingen möchten, können Sie eine Vorlagenüberschreibung für Artikel erstellen, die alle Bilder aus dem Artikel entfernen, das erste Bild wie gewünscht platzieren (100%) und eine Galerie für die anderen Bilder erstellen. Dieser Weg erfordert einige PHP-Codierung.