WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 24.02.2024 17:42:23

freddy1948
Member

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 ..
pic1.jpg
pic2.jpg
Gruß, freddy1948


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

Offline

#2 24.02.2024 17:50:31

freddy1948
Member

Re: Ziehharmonika mit Bildern

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


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

Offline

#3 25.02.2024 10:31:32

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:
attachment.php?item=3531&download=1
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).
Beispiel NWI
Beispiel NWI

[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.

Last edited by florian (25.02.2024 10:42:40)


Nicht ärgern. Nur wundern.

Offline

Liked by:

byteworker

#4 25.02.2024 16:50:04

freddy1948
Member

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 ..?' roll
Ich danke ganz herzlich und werde das gleich mal umsetzen ..
freddy1948


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

Offline

Liked by:

florian

#5 25.02.2024 23:54:15

freddy1948
Member

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


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

Offline

#6 26.02.2024 08:17:07

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.'>';

Nicht ärgern. Nur wundern.

Offline

#7 26.02.2024 12:21:27

freddy1948
Member

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


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

Offline

#8 26.02.2024 12:30:23

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! ';

Last edited by florian (26.02.2024 12:30:53)


Nicht ärgern. Nur wundern.

Offline

#9 26.02.2024 16:36:28

freddy1948
Member

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


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

Offline

#10 26.02.2024 19:41:05

byteworker
Member

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.

Offline

#11 26.02.2024 22:12:56

freddy1948
Member

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.


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

Offline

Board footer

up