Beschreibung:

PHPWCMS News-Template default mit Layout über Bootstrap 5.3 und weiteren Funktionen

Das Sortiermenü über ein eigenes link-list Template. Fehlermeldung wird bei "kein Ergebins gefunden"  angezeigt.

News-Teaser:

  • News Teaser - Kopfbereich zeigt Erstellungsdatum und Verfasser
  • Großes Bild mit Zoom (wenn im Artikel ausgewählt)
  • kleine Bilder (bisher nicht kompatibel mit Modal)
  • Im Fußbereich des News-Teaser "News-Tags" wenn vorhanden sowie der "weiter lesen" Link

News-Details:

  • auf Mobilgeräten (< 992 Pixel) wird oben Links ein weiterer "Zurück-Button" gezeigt 
  • News Details - Kopfbereich zeigt Erstellungsdatum und Verfasser sowie einem Share-Button. 
  • Großes Bild mit Zoom über Fancybox-Galerie  (wenn im Artikel ausgewählt)
  • Bildergalerie mit Zoom über Fancybox-Galerie (wenn im Artikel ausgewählt)
  • News Details - Fußbereich zeigt links und rechts einen "Zurück-Button", rechts "News-Tags"

Bildergalerie: Fancybox 3.5  Sortierfunktion:  ISOTOPE 

News Template Bootstrap Version 03

Bild zum 964 Video
vom: 16.01.2026 ● Verfasser: nicht bekannt

Video direkt im News Text

Ein Video direkt in den News platzieren. Auch das ist möglich, wie man hier sieht. Das Ganze auch noch mit Fließtext. Sieht allerdings nur bei entsprechend angepasstem Template gut aus :-) Ein Video direkt in den News platzieren. Auch das. . .

weiter lesen
16.01.2026 ● unbekannt

Video direkt im News Text

Bild zum 964 Video

Vorschaubild im Teaser (C) Dieter Bahr - FotografierBahr.de

Ein Video direkt in den News platzieren. Auch das ist möglich, wie man hier sieht. Das Ganze auch noch mit Fließtext. Nun muß das nicht mehr umständlich via {SHOW_CONTENT) mit extra Artikeln realisiert werden.
Um der "DSGVO" (ich hasse diese DSGVO langsam!) gerecht zu werden, habe ich für Videos eine Doppelklick-Methode eingeführt. Es wird ein Bild passend zum Video mit Play Button angezeit, erst nach Klick auf das Bild wird dann der Youtube-Inhalt geladen.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 

Beispielbild für ein Modal
vom: 09.01.2026 ● Verfasser: Dieter Bahr

1. Modal, eine praktische Lösung

News-Artikel Untertitel

Ein Modal (oder Modalfenster) ist ein Dialogfeld, das sich über die Hauptseite legt und die Aufmerksamkeit des Nutzers verlangt, bevor er weitermachen kann.

Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
Bild: Musterbilder Flamingos [ALT]({ALT})[/ALT]
Bild: Musterbilder Schwangere Auster Berlin [ALT]({ALT})[/ALT]
Modal,Muster,Schlagwort,Tag
weiter lesen
09.01.2026 ● Dieter Bahr

1. Modal, eine praktische Lösung

News-Artikel Untertitel

Beispielbild für ein Modal

Beispielbild für ein Modal (C) Dieter Bahr - FotografierBahr.de

Ein Modal (oder Modalfenster) ist ein Dialogfeld, das sich über die Hauptseite legt und die Aufmerksamkeit des Nutzers verlangt, bevor er weitermachen kann.
Beispiel:

  • Wenn du auf einer Website auf „Löschen“ klickst, kann ein Modal erscheinen mit der Frage:
  • „Bist du sicher, dass du das löschen möchtest?“
  • und den Buttons Ja / Nein.

Merkmale:

  • Es überdeckt den Rest der Seite (oft mit einem halbtransparenten Hintergrund).
  • Der Benutzer muss das Modal schließen oder bestätigen, bevor er wieder mit der Seite interagieren kann.
  • Wird häufig für Bestätigungen, Formulare oder wichtige Hinweise verwendet.

Noch etwas Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea

Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
Bild: Musterbilder Flamingos [ALT]({ALT})[/ALT]
Bild: Musterbilder Schwangere Auster Berlin [ALT]({ALT})[/ALT]
Modal,Muster,Schlagwort,Tag
Musterbilder Soussusvlei
vom: 10.12.2025 ● Verfasser: M. Mustermann

2. News in einem Ticker

News in einem Ticker. die Details fürs "weiter lesen" öffnen in einem Modal

Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
Bild: Musterbilder Flamingos [ALT]({ALT})[/ALT]
Bild: Musterbilder Schwangere Auster Berlin [ALT]({ALT})[/ALT]
Bild: Musterbilder Budda [ALT]({ALT})[/ALT]
Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
news, Schlagwort in News,Newsticker,Muster
weiter lesen
10.12.2025 ● M. Mustermann

2. News in einem Ticker

Musterbilder Soussusvlei

Unterzeile (C) Dieter Bahr - FotografierBahr.de

News in einem Ticker. die Details fürs weiter lesen öffnen in einem Modal. 


Noch etwas Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea

Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
Bild: Musterbilder Flamingos [ALT]({ALT})[/ALT]
Bild: Musterbilder Schwangere Auster Berlin [ALT]({ALT})[/ALT]
Bild: Musterbilder Budda [ALT]({ALT})[/ALT]
Bild: Musterbilder Soussusvlei [ALT]({ALT})[/ALT]
Bild: Gnus Kalahari (Dateitentrale) [ALT]({ALT})[/ALT]
Bild: Musterbilder Audi A6 [ALT]({ALT})[/ALT]
Bild: Musterbilder Gephard [ALT]({ALT})[/ALT]
Bild: Musterbilder Robbe [ALT]({ALT})[/ALT]
Bild: Musterbilder Makro Blume [ALT]({ALT})[/ALT]
news, Schlagwort in News,Newsticker,Muster
A6-05.webp
vom: 06.11.2025 ● Verfasser: nicht bekannt

3. News steuern über Schlagworte

Über Schlagworte kann man so verschiedene News-Inhalte erstellen und auch getrennt anzeigen.

Bild: Musterbilder Budda [ALT]({ALT})[/ALT]
weiter lesen
06.11.2025 ● unbekannt

3. News steuern über Schlagworte

A6-05.webp

Über Schlagworte kann man verschiedene News-Inhalte getrennt anzeigen. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer

Bild: Musterbilder Budda [ALT]({ALT})[/ALT]
vom: 27.01.2024 ● Verfasser: Max Mustermann

Rechtsschreibfehler?

wer welche findet, . . . .

weiter lesen
27.01.2024 ● Max Mustermann

Rechtsschreibfehler?

wer Rechtsschreibfehler findet, der darf sie gerne behalten :-).