WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 02.06.2020 19:25:22

jonny
Mitglied

Speisekarte Tagesmenü

Hallo Zusammen,

Ich habe vor auf der Website militaergarten-thun.ch
Auf der Frontpage eine Tagesmenükarte und eine Wochenkarte hochzuladen.

Das sollte dann als PDF in neuem Tab möglich sein zu öffnen. Das Vorschaubild, welches der User sieht, sollte ev auch dem PDF entsprechen..

Weiss jemand zufällig wie ich dies am schonsten hinbekomme damit Rechts vom Bild oder Unterhalb jeweils der Tag als Link klickbar ist?

Ausserdem das der Besitzer gleich weiss in dem Feld muss ich nun Wochentag eintragen hier lade ich das PDF Hoch etc?

Liebe Grüsse

Jonny


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#2 02.06.2020 19:41:25

colinax
Developer

Re: Speisekarte Tagesmenü

Das einzige was mir einfällt und wenig Aufwand im WYSIWYG möglich ist, ist mit figure figcaption daraus ein Klickbars Bild (mit Link) und Text zu erzeugen.

Im Grunde muss dann nur mehr unter media das Bild und die PDF ersetzt werden.

Offline

#3 02.06.2020 19:49:06

jonny
Mitglied

Re: Speisekarte Tagesmenü

Wäre das dann im OFA?

Sorry stehe etwas auf der Leitung..

Es sollte halt auch der Oma von Nebenan klar sein wo ladet man das ding hoch wie Benenne ich es damit wenig Fragen auftauchen..

So 2-3 Steps das es hochgeladen ist ohne viel Zeitaifwand..

Danke vilemals für die schnelle Antwort smile


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#4 02.06.2020 20:27:17

florian
Administrator

Re: Speisekarte Tagesmenü

Nja, ganz so einfach ist das zumindest mit dem On-the-fly generierten Vorschaubild nicht, da müsste man dann schon eine entsprechende Library, z.B. diese hier, einbinden. Wenn generische Thumbnails reichen, ist es einfacher. Das Bild ist dann immer gleich, und in OfA braucht es nur ein weiteres Feld für den jeweiligen Upload, der Name wird dann jeweils entsprechend angepasst (Tageskarte Montag, Wochenkarte KW 23 etc.).
Für die Darstellung bitte Google bemühen zwecks Tipps zum Platzieren von Text neben Bildern, z.B.
https://stackoverflow.com/questions/193 … image-html


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 02.06.2020 20:50:52

jonny
Mitglied

Re: Speisekarte Tagesmenü

Oke hast du mir möglicherwiese kurz zusammengefasst die änderungen und wo ich die machen muss?

Ich kann nun zwar Dateien hochladen aber es nimmt PDF nicht an.. Ausserdem wo verlinke ich dann das PDF mit dem Hochgeladenen-Vorschaubild?


Ausserdem auf der Seite Kulinarik https://militaergarten-thun.ch/kulinarik/ wenn ich dort das Bild anklicke erscheint die Unterseite aber nicht die gewünschte Seite (Speisekarte)..

Verwendeter Code:

<div class="item-loop">
<a href="[FELD_1]">[THUMB]</a>
</div>

Der Code scheint auch fehlerhaft denn auf der Webseite erscheint "> dann Zielseite und dann das Bild seltsamerweise

Beitrag geändert von jonny (03.06.2020 07:12:01)


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#6 03.06.2020 07:27:56

florian
Administrator

Re: Speisekarte Tagesmenü

1.) Füge in Dein Template vor dem </head> die folgenden Zeilen ein:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.js"></script>                    
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/pdfThumbnails.js"></script>                    

2) Lade PDFThumbnails von Github herunter:
a) Besuche die Seite https://github.com/scandel/pdfThumbnails
b) Klicke auf den grünen "Clone or download" Button und lade das Zip auf Deinen lokalen Rechner
c) Entpacke das Zip
d) Kopiere die Datei pdfThumbnails.js ins Template-Verzeichnis der Militärgarten-Website
e) Kopiere die Datei pdf.png ins Verzeichnis /pages/ der Militärgarten-Website

3.)  Öffne die Datei /oneforall/config.php mit dem AddOnFile-Editor oder per FTP im lokalen Editor
a) Ändere die Zeile $view_detail_pages = true; zu $view_detail_pages = false;
b) Ändere die Zeile $field_meta_desc = true; zu $field_meta_desc = false;
c) Sofern keine Zeitsteuerung erforderlich, ändere auch $set_scheduling = true; zu $set_scheduling = false;
d) Speichere die Änderungen

4.) Passe die OfA-Eingabefelder an
a) Klicke auf den Button "Eingabefelder"
b) Lösche die vorhandenen Felder, indem Du bei Feld-Typ den Typ "Feld löschen" (letzter Eintrag in der Liste) auswählst
c) Klicke unten auf "Speichern"
d) Klicke wieder auf den Button "Eingabefelder"
e) Füge 2 neue Felder hinzu
f) Ändere den Feld-Typ des ersten Feldes auf "Datei Upload" und trage im Feld "Feldbezeichnung" und "Media Unterverz." jeweils "pdf" (ohne "") ein
g) Lösche alles, was bei Feld-Template steht, und lass dort nur [CUSTOM_CONTENT] stehen
h) Der Feld-Typ des 2. Feldes ist bereits "Kurzer Text", trage hier noch im Feld "Feldbezeichnung" "Kurzbeschreibung" (ohne"") ein
i) Lösche auch hier alles, was bei Feld-Template steht, und lass dort nur [CUSTOM_CONTENT] stehen
j) Speichere die Änderungen

5.) Passe die Seitendarstellung an
a) Klicke auf den Button "Seiten Einstellungen"
b) Lösche alles, was in den Feldern "Übersicht (Kopfzeile):", "Übersicht (Eintrag-Schleife):" und "Übersicht (Fußzeile):" steht
c) Füge im Feld "Übersicht (Kopfzeile):" ein:

	<style>	
		.ofa_image {			
			width:200px;
			float:left;
			margin-right:20px;
		}
		.ofa_text {
			width:calc(100%-220px);			
		}
		.ofa_image img {
			max-width:200px;
			height:auto;
		}
		.ofa_row:after {
			content: "";
			display: table;
			clear: both;
		}
	</style>

d) Füge im Feld "Übersicht (Eintrag-Schleife):" ein:

<div class="ofa_row">
	<div class="ofa_image">
		<a href="[FIELD_1]"><img data-pdf-thumbnail-file="[FIELD_1]"  data-pdf-thumbnail-height="200"  height="200" src="pdf.png"></a>
	</div>
	<div class="ofa_text">
		<h3><a href="[FIELD_1]">[TITLE]</a></h3>
		<p>[FIELD_2]</p>
	</div>
	<br clear="all">
</div>

e) Setze bei "Eintragseite (im Backend):" das Häkchen vor "Bildeinstellungen und -Upload verstecken"
f) Speichere die Änderungen


6. Eintrag anlegen
a) Klicke auf "Eintrag hinzufügen"
b) Gib als Namen z.B. Wochenkarte an
c) Klicke auf "Durchsuchen" und lade das Speisekarten-PDF hoch
d) Gib eine Kurzbeschreibung ein, z.B. "In dieser Woche: Corona-Bier im Sonderangebot"
e) Klick auf Speichern
f) Wiederhole Schritte 6a bis 6e für die Tageskarte(n)

Das Ergebnis sollte dann eine Liste der hochgeladenen Speisekarten sein (links Thumbnai, rechts Überschrift und Kurzbeschreibung), und beim Anklicken öffnet sich dann das jeweilige PDF.

Bei Anpassungswünschen bitte erst versuchen, selbst herauszubekommen, wie diese möglicherweise umsetzbar sind, und nur, wenn Du nicht weiter kommst, hier posten.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#7 03.06.2020 10:34:13

jonny
Mitglied

Re: Speisekarte Tagesmenü

Danke für die Ausführliche Antwort..

Wenn ich Unter Kulinarik das Bild nun anklickbar machen möchte das es zum Untermenü führt funktioniert

<div class="item-loop">
<a href="[FELD_1]">[THUMB]</a>
</div> nicht

Weisst du wie ich das am einfachsten Lösen kann?


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#8 03.06.2020 10:53:14

florian
Administrator

Re: Speisekarte Tagesmenü

Okay, was Du da haben willst, ist offensichtlich noch etwas anderes. Du willst also nicht direkt auf das PDF verlinken, sondern auf https://militaergarten-thun.ch/kulinarik/speisekarte/ usw, wo die jeweilige Speisekarte embedded wird.
In dem Falle muss dann <a href="[LINK]"> stehen und wenn Du mit [THUMB] arbeitest und feste Bilder hochlädst, brauchst Du auch den PDFJS-Kram nicht.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#9 03.06.2020 11:09:14

jonny
Mitglied

Re: Speisekarte Tagesmenü

florian schrieb:

In dem Falle muss dann <a href="[LINK]"> stehen

Das mit dem DFJS-Kram eignet sich bestens für die Frontpage auf "Home" dort werde ich es der Einfachheit-Halber einsetzen.

Da bei Kulinarik jedoch nur ein Link zur Verfügung stehen soll zur Speisekarte benötige ich dann die Lösung oben.


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#10 03.06.2020 15:27:13

jonny
Mitglied

Re: Speisekarte Tagesmenü

Also muss ich es so einfügen? [THUMB] <a href="https://militaergarten-thun.ch/kulinarik/speisekarte/">

Weil bei mir funktioniert dies leider nicht... Oder was müsste ich eintragen? Habe jetzt verschiedenes Probiert das beim Klick aufs Bild die Speisekarte-Unterseite sich öffnet.. Aber es klappt leider nicht hmm


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#11 03.06.2020 18:26:19

florian
Administrator

Re: Speisekarte Tagesmenü

Du machst es aber auch immer kompliziert. Was willst Du jetzt eigentlich? Direkte Verlinkungen auf das PDF (mein Tutorial von heute morgen) oder Verlinkungen auf das Flipbook? Oder beides?

Wenn Du die Speisekarenseiten jeweils als normale Seiten (also nicht als OfA-Beiträge) anlegst, musst Du in OfA für die Verlinkung den Feld-Typ "WebsiteBaker-Link" (ja, heißt leider so) verwenden und auch bei diesem Feld bei Feld-Template einfach nur [CUSTOM_CONTENT] stehen lassen. In der Eintrags-Schleife auf der Übersichtsseite gibst Du dann <a href="[FIELD_3]">[THUMB]</a> an
(wenn field_3 Dein Link-Feld ist, sonst natürlich einen anderen Wert.)
Bildeistellungen und Upload verstecken darf dann nicht aktiviert sein.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#12 03.06.2020 22:21:57

jonny
Mitglied

Re: Speisekarte Tagesmenü

Verzeihung, ich wollte es nicht kompliziert machen.. Ich war leider etwas undeutlich mit meiner Fragestellung

Ich verwende zwei OFA's für zwei zwecke einerseits für meine Homepage wo das Tagesmenü erscheint, aber andererseits auch bei der Kulinarik Seite wo es Statisch bleibt.

Ich habe deine Rat nun befolgt und genau getan was du mir geraten hast aber das Bild anklicken führt weiterhin dazu, das der Link auf die Falsche seite führt.

Der  Link führt zu https://militaergarten-thun.ch/kulinarik/speisekarte-1/

Beitrag geändert von jonny (03.06.2020 22:43:42)


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#13 04.06.2020 06:34:24

florian
Administrator

Re: Speisekarte Tagesmenü

Die Feld-Definitionen werden global, also für jede OfA-Seite, festgelegt. FIELD_! ist also immer z.B. entweder "Datei Upload" oder "WebsiteBaker Link".

D.h. wenn Du auf der einen Seite direkt zu den PDFs und auf der anderen Seite zum Flipbook verlinken willst, brauchst Du entweder zwei unterschiedliche Felder, die Du dann im jeweiligen Seitentemplate abfragst, oder zwei unterschiedliche Instanzen von OfA.

(OfA lässt sich mehrfach installieren, dafür muss OfA VOR der Installation der weiteren Instanzen das Installations-Zip lokal entpackt und in der info.php in Zeile ~29 $module_name = 'OneForAll'; entsprechend geändert werden.)

Beides, sowohl das Vorhalten mehrerer Felder als auch mehrerer OfA-Instanzen, verkompliziert allerdings das Einstellen von Speisekarten exponentiell, da ja dann jede Änderung immer zweimal vorgenommen werden müsste. Deshalb erscheint mir das mehr als unpraktikabel.
Am besten Du lässt es so, wie es jetzt ist, und beendest die Experimente mit OfA etc.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#14 04.06.2020 07:45:14

jonny
Mitglied

Re: Speisekarte Tagesmenü

Okay  dann vereinfache ich das ganze am besten das ich auf der einen Seite wo nun Ofa zum Einsatz kommt mit simplem htm &css die Verlinkung der Unterseite vornehme, dann kann ich mich auf eine ofa beschränken


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#15 04.06.2020 12:02:59

jonny
Mitglied

Re: Speisekarte Tagesmenü

Ich habe nun nach deiner Anleitung den PDF upload versucht aber stehe hier an... weisst du wie ich das am besten Löse?


Wer noch etwas Dummheit will soll sich hinten anstellen..

Offline

#16 04.06.2020 12:18:40

florian
Administrator

Re: Speisekarte Tagesmenü

1) Benenne es um in wochenuebersicht.pdf
2) schau in der /modules/oneforall/config.php, ob das hier drinsteht:

$upload_extensions = 'txt,rtf,doc,docx,odt,pdf';

3) Prüfe ggf. Uploadlimits (Datei zu groß o.ä.)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Fußzeile des Forums

up