Nachrichten zwei versch. Teaser-Bilder

[eindruck]

Hallo,

ich möchte aus einer Nachrichtenliste zwei versch. Übersichten befeuern. Allerdings sollen für die
bei versch. Ansichten zwei versch. Teaser-Bilder verwendet werden oder Notfalls das gleich Bild,
dann aber einmal quadratisch und beim zweiten dann in der Höhe auf ein bestimmtes Maß beschnitten.

Hat jemand eine Idee?

Gruß

Stefan

[Spooky]

Also zweiteres geht ja einfach mit zwei verschiedenen Modulen, wo du eben andere Bildeinstellungen verwendest.

[eindruck]

Dann muß ich aber jeden Beitrag doppelt anlegen, gerade das möchte ich ja vermeiden

[Spooky]

Nein, wieso? Du brauchst zwei Module mit verschiedenen Bildeinstellungen.

[Andreas]

Oder in einer Ansicht mit CSS quadratisch machen.

[eindruck]

Das mit dem CSS hört sich ganz gut an, allerdings sollte ich dann quasi vom quadratischen oben und unten gleichmäßig etwas wegschneiden, doch leider
übersteigt das wiederum meine CSS Fähigkeiten Hat jemand einen Beispiel code?

Vielen Dank

[Andreas]

Am besten zeigst du mal einen Link auf die Seite wo das noch fehlt, also ein Portrait u.o. Landscape Image bereits zur Verfügung stehen.

[eindruck]

Hi,

hier der Link http://neu.ein-druck.net/aktuelles.html

Unten links das Schwein soll so werden wie die anderen.
Natürlich später an einer anderen Stelle der Seite.

Gruß

Stefan

[Spooky]

Dann stelle einfach die Ausgabegröße des Newslist Modules auf die gewünschte Größe (bspw. 360x209 mit "Wichtiger Teil" oder "Exaktes Format" bei einem Responsive Image Set).

[eindruck]

Hi,

natürlich...ist ja ganz einfach.

Vielen Dank - Spooky!

[Andreas]

Mit CSS hätte den Vorteil, dass nur ein Bild existiert. Ich gehe davon aus, dass in beiden die gleichen Bilder drin sein sollen. Ansonsten würde ich das auch so machen wie Spooky.

Hier mal ein CSS Beispiel.

.ce_image.square {
  position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.ce_image.square figure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ce_image.square figure,
.ce_image.square img {
  display: block;
  margin: 0;
  /* falls gesetzt überschreiben */
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
} 

Was bei dir schon gesetzt ist brauchst du natürlich nicht nochmal. Und überschreiben auch nur, wenn es was zum Überschreiben gibt.