WBCE CMS Forum

freddy1948

Mitglied

Ziehharmonika mit Bildern

Hallöle klawin,
ich bin begeistert vom Modul 'Ziehharmonika' - für viele Dinge ohne Einschränkung nutzbar; jetz ein aber:
Wäre eine Abwandlung oder besser Erweiterung des Moduls möglich (denkbar,ich bin leider nicht so firm in Programmierung ...) dahingehend,dass im Bereich der Textzeile zusätzlich ein Bildchen (ca. 100x50 px o.ä.) setzbar ist, der Rest bleibt dannn für die übliche Beschreibung ... ?
Ich füge mal 2 Bildadressen an (weiß nicht,ob das sichtbar übertragen wird,bin noch neu hier im Forum mit wenig Erfahrung ..


Gruß, freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

Hallo klawin,
wollte und sollte noch nachreichen - wbce 1.6.2 mit leicht angepasstem Vertal Template ...
freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

florian

Administrator

Re: Ziehharmonika mit Bildern

Ich habe die Frage mal vom Ursprungsthread abgetrennt.
Es gibt auch ohne Anpassungen am Modul ZIehharmonika verschiedene Möglichkeiten, so eine Darstellung zu generieren:

a) Mittels Droplet:
1. Vorbereitung (nur einmal erforderlich):
- Lade Dir die Zip-Datei hier aus dem Anhang herunter
- Gehe auf Admin-Tools > Droplets und klicke dort auf "Import"
- Lade die gerade runtergeladene Zip-Datei hoch
- Die Bilddarstellung muss noch angepasst werden, am besten geht das über eine Ergänzung des Template-Stylesheets:

  .ziehharmonika h3 {line-height:100px}
  .ziehharmonika h3 img {height:100px; width:auto; float:left; margin-right:10px}

2. Die Bilder über die Medienverwaltung hochladen.

3. Nun kannst Du beim Accordion vor dem eigentlichen Titel (Namen des:der Mitarbeiter*in) ein Bild einfügen, und zwar so:

Du kannst auch Bilder in einem Unterverzeichnis auswählen, der Aufruf wäre dann
[[foto?bild=verzeichnis/dateiname.jpg]]

b) Zweite Möglichkeit: Angepasste Ausgabe des Moduls News with Images
Du kannst auch das Modul News with Images (kurz NWI) so konfigurieren, dass die Beiträge als Ziehharmonika (mit Bild) angezeigt werden.
1. Dazu in den Seiteneinstellungen folgendes hinterlegen:
Kopfzeile:

<link rel="stylesheet" href="/modules/ziehharmonika/frontend.css" type="text/css" >
<script src="/modules/ziehharmonika/frontend.js"></script>
<style>
  .ziehharmonika h3 {line-height:100px}
  .ziehharmonika h3 img {height:100px; width:auto; float:left; margin-right:10px}
</style>
<div class="ziehharmonika">

Beitrag Schleife

<h3 class="zh-title">[IMAGE][TITLE]</h3>
<div>
[SHORT]
</div>

Fußzeile

</div>

<script>
$('.ziehharmonika').ziehharmonika({
  collapseIconsAlign: 'left', 
  highlander: true,
  collapsible: true, 
  headline: 'h3.zh-title',
  collapseIcons: {opened: '-', closed: '+'},
});
</script>

Vorschaubild Größe ändern auf 80 / 100 (o.ä.)

2. Nun ganz normal Beiträge anlegen: Titel = Name der Person, Beitragsbil = deren Portraitfoto, anzuzeigender Text im Feld "kurz" (Der Text im Feld lang wird nicht verwendet).

[Anmerkung: Die jetzige Darstellung mit dem Weiterlesen ließe sich ebenfalls mit NWI realisieren]

c) Members, OneForAll etc.
Nur der Vollständigkeit halber sei noch erwähnt, dass diese und (fast) jede andere "Accordion"-Darstellung sich mit etwas CSS/JS-Kenntnissen auch mit Modulen wie Members oder OneForAll realisieren ließen.

Beitrag geändert von florian (25.02.2024 10:42:40)

---

Code allein macht nicht glücklich. Jetzt spenden!

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

Hallo florian,
wow - sogar sonntags gibt's hier eine TOP Antwort - ich frage mich immer 'warum fällt mir sowas nicht ein ..?'
Ich danke ganz herzlich und werde das gleich mal umsetzen ..
freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

Hallo  florian,
werkelt perfekt auf dem Webserver, auf meinem localhost (XAMPP) allerdings findet keine Bildzuweisung, auch mit vollständiger Pfadzuweisung (http://localhost/ ....), statt,Bild wird nicht eingefügt. Was verstehe ich da wohl mal wieder nicht??
freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

florian

Administrator

Re: Ziehharmonika mit Bildern

Im Droplet ist eine Prüfung, ob die Datei existiert, möglicherweise funktioniert die lokal nicht.
Ersetze

if (file_exists(WB_PATH.MEDIA_DIRECTORY.$verz.'/'.$bild)) {
	return '<img src="'.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';
} else {
  	return '<!-- Datei '.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.' nicht gefunden! -->';
}
 

durch

return '<img src="'.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';

---

Code allein macht nicht glücklich. Jetzt spenden!

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

Hi, habe ich ausgetauscht wie vorgeschlagen:
/* if (file_exists(WB_PATH.MEDIA_DIRECTORY.$verz.'/'.$bild)) {
    return '<img src="'.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';
} else {

      return '<!--- Datei '.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.' nicht gefunden!-->';
} */
zu:
return '<img src="'.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';

dann alle möglichen Pfadangaben durchgespielt:
[[foto?bild=http://localhost/Spreesprotten/media/images/mitarbeiter/spreesprotte32gross/thmb/t_aleyna-sophie.jpg]]Aleyna-Sophie ...
[[foto?bild=/localhost/Spreesprotten/media/images/mitarbeiter/spreesprotte32gross/thmb/t_aleyna-sophie.jpg]]Aleyna-Sophie ...
[[foto?bild=/media/images/mitarbeiter/spreesprotte32gross/thmb/t_aleyna-sophie.jpg]]Aleyna-Sophie ...
[[foto?bild=media/images/mitarbeiter/spreesprotte32gross/thmb/t_aleyna-sophie.jpg]]Aleyna-Sophie ...
[[foto?bild=/images/mitarbeiter/spreesprotte32gross/thmb/t_aleyna-sophie.jpg]]Aleyna-Sophie ...
leider kein Erfolg - ich kann auch den Code nicht recht nachvollziehen (bin aber eher Laie ..) ; es fällt die Abfrage weg aber die Ausführung  wäre exakt die gleiche; merkwürdigerweise gab es auch keinen Hinweis 'Datei nicht gefunden', trotz Unkommentierung ...
Ergebnis:

freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

florian

Administrator

Re: Ziehharmonika mit Bildern

Das Droplet erwartet immer nur den Dateinamen, nicht den kompletten Pfad.
Also nur bild=bild.jpg und nicht bild=http://localhost/media/bild.jpg

Das Droplet geht weiterhin standardmäßig davon aus, dass die Bilder direkt im media-Verzeichnis liegen.
Es kann ein Unterverzeichnis als zusätzlicher Parameter angegeben werden, also so:
foto?bild=bild.jpg&verz=unterverzeichnis

Wenn alle Bilder im selben Unterverzeichnis liegen, kann man das Droplet entsprechend anpassen, dafür im Originalcode Zeile

if (file_exists(WB_PATH.MEDIA_DIRECTORY.$verz.'/'.$bild)) {
	return '<img src="'.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';
} else {
  	return '<!-- Datei '.WB_URL.MEDIA_DIRECTORY.$verz.'/'.$bild.' nicht gefunden! -->';
}
 

ändern zu

if (file_exists(WB_PATH.MEDIA_DIRECTORY.'/images/mitarbeiter/spreesprotte32gross/thmb/'.$bild)) {
	return '<img src="'.WB_URL.MEDIA_DIRECTORY.'/images/mitarbeiter/spreesprotte32gross/thmb/'.$bild.'" alt="'.strip_tags($alt).'" title="'.strip_tags($title).'"'.$cssclass.$style.$w.$h.$align.'>';
} else {
  	return '<!-- Datei '.WB_URL.MEDIA_DIRECTORY.'/images/mitarbeiter/spreesprotte32gross/thmb/'.$bild.' nicht gefunden! -->';
}

dann braucht es den "verz"-Parameter nicht mehr.

Der Hinweis, dass ein Bild nicht gefunden wird, erscheint nicht sichtbar auf der Seite, sondern wird als HTML-Kommentar generiert, d.h. das sieht man dann beim Blick in den Quellcode der rausgerenderten Seite im Fontend (Strg-U im Browser). Soll der Hinweis sichtbar erscheinen, Zeile

  	return '<!-- Datei '.WB_URL.MEDIA_DIRECTORY.'/images/mitarbeiter/spreesprotte32gross/thmb/'.$bild.' nicht gefunden! -->';

ändern zu

  	return 'Datei '.WB_URL.MEDIA_DIRECTORY.'/images/mitarbeiter/spreesprotte32gross/thmb/'.$bild.' nicht gefunden! ';

Beitrag geändert von florian (26.02.2024 12:30:53)

---

Code allein macht nicht glücklich. Jetzt spenden!

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

... alle Änderungen ändern leider nichts am negativen Ergebnis - da liegt der Wurm wohl doch in der lokalen Situation mit XAMPP;
da ist mir auch aufgefallen, dass ganz normale Bildverlinkungen auch den kompletten Dateipfad, also inkl. "http://localhost/..../...", benötigen für korrekte Anzeige.Scheint ein XAMPP Serverproblem zu sein ...
Auf dem Webserver arbeitet es ohne Probleme unter Verwendung von [[foto?bild=verzeichnis/dateiname.jpg]] ...
freddy1948

---

Es gibt immer Einen, der besser ist als ich - ist gut so!

byteworker

Mitglied

Re: Ziehharmonika mit Bildern

Das Problem mit Vorschauen kann ich in der Testumgebung mit Xampp/Wampp bestätigen. In "echt" funktioniert das wie es soll. Habe das gleiche Problem mit "one for all" gehabt.

---

= Templates für WBCE

freddy1948

Mitglied

Re: Ziehharmonika mit Bildern

Scheint wirklich nur auf lokalem Server aufzutreten, auf einem weiteren Webserver als Subdomain installiert werkelt es absolut wunschgemäß!
Beispielhaft hier zu sehen: https://spreesprotten.joyascam.de, Menübereich Kita ....
Muss ich also für Tests auf eine reelle Webadresse ausweichen.

---

Es gibt immer Einen, der besser ist als ich - ist gut so!