News Script

[Tommy Herrmann]

Volker,

auch hier (weil ich das gerade zufällig sehe) ist der Iframe-Code falsch angegeben - auch noch vom Syntax falsch:

https://www.niederastroth.de/news1/page1.html

[Nachtfalke]

Hallo Dieter,

das ist dann immer eine individuelle Geschichte. Hier meine Änderung der Buttons oben im Dashboard:

Code: Alles auswählen

    <h2>Dashboard</h2>
    <div class="mb-3">
        <a href="settings.php" class="btn btn-outline-primary btn-sm">⚙️ Einstellungen</a>
        <a href="logout.php" class="btn btn-outline-danger btn-sm">🚪 Abmelden</a><br><br>
	<a href="https://www.mobirise-tutorials.com/News/direkteinbau/Newsscript-Volker.html" class="btn btn-outline-primary mb-3">📑 News Seite öffnen</a>
    </div>
    <a href="admin.php" class="btn btn-outline-primary mb-3">➕ Neuigkeiten hinzufügen</a>

Wie Du sehen kannst, habe ich dort die URL zu meiner Mobirise-Seite eingetragen.

1000 mal ein Dankeschön.

[Tommy Herrmann]

Volker,

ich finde, dass du extrem stolz auf dein erstes Werk nach deinem monatelangen PHP-Kurs sein kannst. Es funktioniert einwandfrei, ist sicher und sehr gut einsetzbar

Ich könnte das nicht, da mir in PHP die nötigen Voraussetzungen fehlen, die ich wohl auch nicht mehr erlangen werde. Zwar verstehe ich vieles, aber es fehlt mir die Routine, das auch umzusetzen.

Da ich weiß, wie viel Arbeit dahintersteckt, möchte ich mich nochmals herzlich bei dir bedanken, dass du uns das zur Verfügung stellst. Es ist auch beruhigend zu wissen, dass der Autor solcher Scripts erreichbar ist, falls es mal brennt.

Vielen Dank auch an Rudy von Zen2cool für seine großartige Unterstützung

Ganz große Klasse

Hier nochmals der Link zum Download der aktuell stabilen Version 1.1 vom 06.08.2025:

https://www.niederastroth.de/news1/page3.php

Hier meine Beispielseite mit Anleitung zum Einbau in Mobirise:

https://www.mobirise-tutorials.com/News ... olker.html

Ich habe auch heute noch einen Link auf Facebook gesetzt

https://www.facebook.com/54385941107578 ... 7573898290


>>>


Volker,

I believe you can be extremely proud of your first project after completing your months-long PHP course. It works flawlessly, is secure, and very practical.

I wouldn’t be able to do that, as I lack the necessary skills in PHP, and I probably won’t acquire them anymore. Although I understand a lot, I’m missing the routine to actually implement it.

Knowing how much work goes into this, I want to sincerely thank you once again for making it available to us. It’s also reassuring to know that the author of such scripts is accessible if any urgent issues arise.

Many thanks also to Rudy from Zen2cool for his outstanding support.

Great performance

[Nachtfalke]

Hallo Volker,

ich finde auch, dass du extrem stolz auf dein Werk sein kannst und schließe mich den Worten von Tommy einfach mal an. Ich bewundere sowas total, wenn einer sowas kann... Top Job

[Volker]

Es würde mich freuen wenn der ein oder andere das brauchen kann.
Allerdings muss man fairer weise sagen, das die Idee mit Ajax und die Install Routine von Rudy kamen.
Danke nochmals dafür Rudy, sehr sehr gute Idee !

Und ja.. Chat GPT darf man auch nicht vergessen. Die CSS und Bootstrap Sachen habe ich dort oft machen lasssen
Mein ursprungs Script sieht eher aus wie aus den 90er Jahren

Ich werde aber in Zukunft an weiteren Scripten "arbeiten"

Auch der Chat hier ist vollgepumpt mit CSS von der KI
https://www.niederastroth.de/chat.php

Der Chat soll auf Kunden Seiten laufen und wenn jemand eine Nachricht schreibt und ich online bin, ploppt der Chat erst auf bei mir. Ist aber noch in Arbeit

[Tommy Herrmann]

Ja – dennoch wäre das ohne Deine Initiative nicht entstanden.

Den Chat werde ich nicht einbauen, da ich bereits so viele Chats habe – und das schon seit über 10 Jahren auch in NOF. Wenn Du möchtest, sende ich Dir gerne den Zugang via "PN". Früher waren dort viele Leute aktiv (ca. 1.000 Chats/Monat), aber im Laufe der Jahre sind sie alle verschwunden, bis auf „Ranger“ (Ellen). Diese Chat-Anwendung ist einfach unschlagbar.

Chats sind jedoch sehr anfällig für Spam, deshalb ist Vorsicht geboten.

[Nachtfalke]

Sooo...ich habe das jetzt zwar schon mal eingebaut, aber eine Verlinkung News im Menü habe ich noch nicht gemacht.
https://aussie-scully.de/news.html

Ob ich das so lassen kann ? Über ein Feedback würde ich mich freuen...

[Volker]

Ich finde das sieht sehr gut aus

[Tommy Herrmann]

Moin Dieter,

also das mit den Bildern ist so noch nicht richtig gelöst. Daher sind Deine Bilder auch am Handy zu groß:

Ändere die Datei:

load_news.php

oben ab Zeile 37 so ab. Dann ist die Bildbreite, die man bei den Einstellungen angibt, an allen Displaygrößen richtig.

Ich habe also bei der class="news-image":

max-width: ' . $bildBreite . 'px;

geändert in:

width: ' . $bildBreite . 'px;

und darunter die maximale Breite von 100% hinzugefügt:

max-width: 100%;


Also im Stück dann das einsetzen:

Code: Alles auswählen

// Dynamisches Styling ausgeben
echo '<style>
.news-image {
    width: ' . $bildBreite . 'px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

Die 12 Spalten, die Bootstrap in der Breite von seinem Grid-System zulässt, werden hier in 4 Spalten für das Bild und 8 Spalten für den restlichen Inhalt aufgeteilt. Das Bild nimmt also ⅓ der Gesamtbreite ein. Sollte das Bild größer als diese 4 Spalten sein, wird es automatisch auf 100 % der Breite dieser 4 Spalten skaliert. Theoretisch könnte man also beispielsweise eine Breite von 800 px in den Einstellungen angeben, da diese 4 Spalten jedoch maximal 380 px breit sein können, greift in diesem Fall die maximale Breite von 100 % und das Bild wird entsprechend verkleinert.

Natürlich müsst ihr stets darauf achten, dass die Bilder mindestens die eingestellte Breite haben oder größer sind, damit sie nicht durch eine notwendige Vergrößerung unscharf werden. Hat das Originalbild beispielsweise eine Breite von 250 px, in den Einstellungen steht jedoch 350 px, würde das Bild vergrößert und dadurch unscharf.

Gucke Dir das Grid-System von Bootstrap hier zum besseren Verständnis auch mal an:

https://www.mobirise-tutorials.com/Tuto ... -Grid.html

---

@ Volker,

ich denke das solltest Du im Download auch so anpassen. Bei mir habe ich das bereits so angepasst:

https://www.mobirise-tutorials.com/News ... olker.html

Die Einstellung steht bei mir jetzt gerade auf 350px Bildbreite.

Ich habe für mich persönlich auch den Schatten um diese Bilder in der Datei load_news.php entfernt:

Zeile 71:

class="shadow-sm"

Das sieht bei der Verwendung von Bildern mit transparenten Hintergründen, wie z.B. meinem Logo, nicht gut aus. Das ist dann allerdings wieder die persönliche Geschmackssache.

[Volker]

Änder ich nächste Woche, bin jetzt mal im langen Wochenende aufm Campingplatz

[Nachtfalke]

Danke Tommy, ich habe das geändert.

Und dem Volker wünsche ich ganz viel spaß am Campingplatz.

[Tommy Herrmann]

Moin,

ja - jetzt sieht es am Handy auch richtig aus

[Tommy Herrmann]

Volker,

fall nicht in den Bach

[Tommy Herrmann]

Volker,

mal noch eine Frage:

Wozu änderst Du die hochgeladenen Bilder in so kryptische Namen? Das macht es sehr umständlich, wenn man mal Bilder löschen will, da man mit diesen Dateinamen ja nichts anfangen kann.

Wo wird das gemacht und was müsste da geändert werden. Vielleicht solltest Du das wieder entfernen.

Was mir auch noch nicht so richtig gefällt und ich nicht verstehe, warum das überhaupt passiert, ist der riesige freie Raum unter meiner Seite -2-, da dort bisher nur zwei Einträge vorhanden sind. Das ist ja dann nicht mehr dynamisch

Werners dynamischer Iframe erkennt das auf meinen anderen Seiten und passt die Höhe entsprechend an, wie z.B. hier:

https://www.mobirise-tutorials.com/News/


Aber jetzt genieße erst mal die freien Tage

[Tommy Herrmann]

Volker,

meiner Meinung nach stimmt da etwas mit den neuen JavaScripts auf der Seite "news.php" noch nicht. Vielleicht war deswegen bei mir auch der Scrollbalken beim Aufruf ohne die Iframe Option scrolling="no".

Werner hat immer gesagt, das sein Script:

Code: Alles auswählen

  <!-- Dynamisches Iframe-Script von Werner Zenk -->
  <script>
    window.addEventListener("load", fenster);
    window.addEventListener("resize", fenster);
    function fenster() {
     if (parent.document.getElementsByTagName("iframe")[0]) {
      parent.document.getElementsByTagName("iframe")[0].style.height =
       document.getElementsByTagName("html")[0].offsetHeight +'px';
     }
    }
  </script>

... in den Head, also vor das schließende </head> Tag gehört - also noch bevor der Inhalt der Seite in das Iframe geladen wird. Jetzt steht es am Ende des </body> Tags und ist ja auch entscheidend umgebaut. Es wird also erst die gesamte Seite geladen und dann erst das dynamische Iframe-Script. So muss ja eigentlich der Scrollbalken vom Iframe auch beim Laden erscheinen. Das ist an dieser Stelle meiner Ansicht nach so falsch.

Ich glaube, ohne das Script so zu verstehen, dass da der Fehler liegen muss. Es ist ja nicht mehr dynamisch, sondern hat auf der Seite -2- bei mir, die weniger Einträge zeigt, eben die gleiche Höhe wie auf der Seite -1- Das ist falsch und nicht dynamisch.

Denn das mit dem nochmals Neuladen oder anfangs einen Scrollbalken vom Iframe zu sehen, habe ich zuvor noch nie erlebt und ich habe das Script vom Werner seit NOF in bestimmt einem Dutzend NOF- und Mobirise Seiten eingebaut.

Wie Du auch in meinem letzten Beitrag in der geframten Seite "anzeige.php" prüfen kannst, ist die News-Seite vom Werner ja mit dem gleichen dynamischen Iframe-Script, vor dem schließenden </head> Tag, versehen und dort wird jede Seite, egal wie hoch, stets korrekt angezeigt und es gibt keine leeren Zwischenräume. Diese Seite zeigt auch nie einen Scrollbalken - auch ganz ohne die Iframe-Anweisung scrolling="no".

Mit anderen Worten, das Iframe-Script, so wie es von Dir und/oder Rudy umgebaut wurde, funktioniert nicht richtig als dynamisches Iframe.

Da das von Werner zu 100% funktioniert, kann man diese Scripts nicht vielleicht wieder trennen und nur die Navigation vom Rudy am Ende des Body belassen und am Ende vom </head> Tag wieder das originale dynamische Iframe-Script vom Werner einsetzen. Ich selbst verstehe von den Scripts zu wenig - ich habe schon versucht die umzubauen und dann wird gar nichts mehr angezeigt.

Vielleicht wäre es auch viel besser, die Navigation oben - ohne Sprunganker - anzubringen.

[Volker]

Hallo Tommy,

ursprünglich wollte ich kleines Script, das dem Webseitenbetreiber ermöglicht einige News selber online zu stellen. Wie z.B. Urlaub, Aktionen usw. ich hatte nicht mit einer großen Liste gerechnet, die da eingebaut würde
Mir war wichtig das die Farben komplett an ein vorhandenes Layout angepasst werden können. Das habe ich jetzt noch verfeinert.

Das mit dem Bildernamen kommt von Rudy. Finde ich jetzt persönlich nicht sooo schlimm, da ja eh die Bilder gelöscht werden, wenn man den Beitrag löscht. Falls mal was nicht gelöscht wird, hab ich auch einen Button hinzugefügt, der nicht benötigte Bilder löscht, falls mal was über bleibt

Das große Problem ist der Iframe wenn durch Ajax nachgeladen wird. Da hab ich mich stundenlang mit beschäftigt, aber keine sinvolle Lösung gefunden. Die KI konnte mir keine brauchbare Lösung anbieten und jetzt noch in Mobirise selber ein ellenlanges Javascript einzubauen halte ich für unnötig und zu viel Aufwand für so ein mini Script.

Deine CSS Änderung habe ich nun übernommen. Die Bildgröße ist also jetzt auch OK.
Weiter hinzugekommen sind noch die Farbauswahl beim Titel. und die Farbauswahl der Card. So kann man also den gesamten Block farblich so anpassen wie man es möchte.

titel1.png (9.16 KiB) 476 mal betrachtet

cardfarbe.png (7.79 KiB) 476 mal betrachtet

Das alles ist im aktuellen download bereits enthalten der

https://www.niederastroth.de/news1/page3.php

[Tommy Herrmann]

Moin,

alles klar - vergiss nicht Deine Downloadseite noch anzupassen, denn da steht noch v1.1 anstatt v1.2 an manchen Stellen.

Vielen Dank für das tolle Script

[Nachtfalke]

Guten Morgen…
ich habe auch schon wieder mal eine Frage. Kann ich die Farbe vom Border auch ändern? Wenn ja, wo und wie mache ich das ?

[Tommy Herrmann]

Moin Dieter,

da hat Volker eine Bootstrap-Class verwendet. Die kannst Du oben bei den Style-Anweisungen in der Datei "news.php" mit eintragen, also z.B. als schwarze Farbe der Border:

Code: Alles auswählen

    .card{
      --bs-card-border-color: black;
    }

Code: Alles auswählen

  <style>
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .card{
      --bs-card-border-color: black;
    }
    @media (max-width: 991px) {
      /* Dein spezielles CSS hier, z.B. Navigation anders darstellen */
      /* Beispiel: Menü umschalten */
      .some-class {
        display: none;
      }
    }
  </style>

[Nachtfalke]

Danke Tommy,

Danke, hat funktioniert.
So langsam verstehe ich das mit dem php.