wpForo Galerie im P...
 
Benachrichtigungen
Alles löschen

wpForo - das Forum Plugin für Wordpress

wpForo Galerie im Profil  

  RSS
Garfield
@garfield
Rang 1 ( 5-19 ) Beiträge
Registriert seit
26.04.2020
Beiträge
11
Land
Germany
Wohnort
Hamburg
Webseite
Smart Home Technik
Echo Dot
Smart Home Apps
Alexa App
Entertainment
Samsung UHD TV NU7179

Hi @tutrix

habe gerade gesehen du hast im Forum Profil neue Menüpunkte wie Smart Home Technik, Smart Home Apps sowie eine Galerie.

wie funktioniert das, vor allem wie man die Galerie erstellt und dort auch Videos einfügen kann, würde mich interessieren

Ps: übrigens coole Bilder und Video von der aktiven Philips Hue Play HDMI Sync Box ::20::  

Gib deine Träume nicht auf - schlafe weiter!
Zuerst schließen wir die Augen, dann sehen wir weiter.

AntwortZitat
Veröffentlicht am : 15.07.2020 16:28
Top Down
Themen Schlagwörter
Tutrix
@tutrix
Administrator Admin
Registriert seit
20.01.2020
Beiträge
69
Land
Germany
Wohnort
München
Webseite
Smart Home Technik
Philips Hue
Hue Play Sync Box
2 x Echo + Show 5
Telekom Smart Speaker
Google Nest Hub
Plugs: TP-Link HS110
Logitech Harmony
Logitech Pop Home
HiKam S6 und HiKam Q8
Smart Home Apps
The Home Remote App
The Home Remote Designer
iConnectHue
Harmony® Control
Alexa / Google Home
Entertainment
Telekom Media Receiver 401
Apple TV 4
TV: Samsung UE49KS8090
Play Station 4 Pro
Yahama MusicCast RX-A660
2 x Yamaha MusicCast WX-010
Yamaha BD-S671

Hallo @garfield

Du hast ja schon im richtigen Unterforum gepostet, da ein Addon erforderlich ist.

Frage aber trotzdem erst mal nach ob du das Addon bereits hast oder es gegebenenfalls kaufen willst, bevor ich hier die Anleitung poste.

Für die Umsetzung brauchst du wpForo – User Custom Fields

Kleiner Tipp, falls du erst kaufen musst schau dir auch die anderen Addons an, da beim Kauf von mehreren gleichzeitig, es entsprechend Prozente als Rabatt gibt :200:  

huch .. "Alexa", schreibt einen Beitrag

AntwortZitat
Veröffentlicht am : 15.07.2020 18:01
Top Down
Garfield
@garfield
Rang 1 ( 5-19 ) Beiträge
Registriert seit
26.04.2020
Beiträge
11
Land
Germany
Wohnort
Hamburg
Webseite
Smart Home Technik
Echo Dot
Smart Home Apps
Alexa App
Entertainment
Samsung UHD TV NU7179

Hab das Addon schon installiert, muss mich aber erst noch richtig mit den ganzen Einstellungen vertraut machen.
Die Profiltabs hab ich jetzt auch gefunden, hab ich wohl vorher übersehen. :330:  
Jetzt hätte ich nur noch gerne so eine Galerie :100:  

Gib deine Träume nicht auf - schlafe weiter!
Zuerst schließen wir die Augen, dann sehen wir weiter.

AntwortZitat
Veröffentlicht am : 15.07.2020 20:33
Top Down
Tutrix
@tutrix
Administrator Admin
Registriert seit
20.01.2020
Beiträge
69
Land
Germany
Wohnort
München
Webseite
Smart Home Technik
Philips Hue
Hue Play Sync Box
2 x Echo + Show 5
Telekom Smart Speaker
Google Nest Hub
Plugs: TP-Link HS110
Logitech Harmony
Logitech Pop Home
HiKam S6 und HiKam Q8
Smart Home Apps
The Home Remote App
The Home Remote Designer
iConnectHue
Harmony® Control
Alexa / Google Home
Entertainment
Telekom Media Receiver 401
Apple TV 4
TV: Samsung UE49KS8090
Play Station 4 Pro
Yahama MusicCast RX-A660
2 x Yamaha MusicCast WX-010
Yamaha BD-S671

Na dann, hier meine Vorgehensweise :200:  

  • Du fügst im Benutzerfeld Manager ein neues Feld "Textarea" hinzu.
  • Nennst dieses z.B. wie ich Fotogalerie (hab das in alle 3 Felder eingetragen).
  • Bei Mindestlänge hab ich den Wert 30 eingegeben, dann hat das Feld gleich eine entsprechende Größe
  • Suchst dir ein Icon aus z.B. den Fotoapparat
  • Und gibst natürlich das Feld zu bearbeiten frei

Jetzt noch der wichtige Teil für deine Mitglieder, das Feld Beschreibung (Description) damit sie wissen wie man die Bilder / Videos korrekt einfügt

zuerst mal der der original Code wie er im Profil selbst eingefügt wird

<p>Überschrift der Galerie</p>
<figure>
<img src="Link zum Bild" alt="Titel des Bildes" title="Titel des Bildes">
<figcaption>Kurzbeschreibung des Bildes</figcaption>
</figure>
<div class="video">
<figure>
<video src="Link zum Video" controls="" alt="Titel des Videos" title="Titel des Videos"></video>
<figcaption>Kurzbeschreibung des Videos</figcaption>
</figure>
</div>

Codevorlagen zum einfügen in die Fotogalerie, also dies in das Feld Beschreibung (Description) eintragen


<*p>Überschrift der Galerie<*/p>

Figure Code je Bild

<*figure>
<*img src="Link zum Bild" alt="Titel des Bildes" title="Titel des Bildes">
<*figcaption >Kurzbeschreibung des Bildes<*/figcaption>
<*/figure>

Figure Code je Video

<*div class="video">
<*figure >
<*video src="Link zum Video" controls="" alt="Titel des Videos" title="Titel des Videos"><*/video>
<*figcaption>Kurzbeschreibung des Videos<*/figcaption>
<*/figure>
<*/div>

Hinweis: "alle" Sternchen ( * ) aus dem Code entfernen, diese sorgen nur dafür das der HTML Code im Beispiel nicht ausgeführt wird!


also alles zwischen den Linien kopieren und unverändert eintragen, wie das dann fertig aussieht, siehst du hier im Forum in deinem Profil

jetzt muss das noch per CSS formatiert werden

dazu folgende Codes zum Benutzerdefinierten CSS  des Forums hinzufügen

für den Beispiel-Code (die Beschreibung)

.profilcodevorlage {
    border: 1px solid #369 !important;
    padding: 10px !important;
    margin: 10px !important;
    background: #f5f5f5;
    font-size: 14px !important;
}

der CSS Code allgemein für die Ausgabe

.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap figcaption {
    font-size: 14px !important;
    line-height:26px !important;
}
.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap p {
    font-size: 20px !important;
    line-height:24px !important;
    font-weight: 900 !important;
}
.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap figure {
    display: inherit;
    margin: 15px 4px !important;
    max-width: 49%;
    border: 2px solid #ddd !important;
    padding: 10px !important;
    background: #485974;
    color: #ddd !important;
}
.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap {
    width: 100% !important;
    top: 20px;
    min-height: 200px;
    margin-bottom: 20px !important;
    text-align: center;
}
#wpforo-wrap .data_field_c154275 {
    min-height: 100px !important;
}

 der für die Bilder

.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap figure img {
    max-width: 99% !important;
    max-height: 99% !important;
    padding: 5px !important;
    margin-top: 5px !important;
    -webkit-box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    border: 5px solid #336699 !important;
    background: #fff;
}

und der für Videos

.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap figure video {
    max-width: 99% !important;
    max-height: 800px !important;
    padding: 5px !important;
    margin-top: 5px !important;
    -webkit-box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    box-shadow: 0px 3px 10px 4px rgba(0,0,0,0.40) !important;
    border: 5px solid #336699 !important;
   background: #fff;
}
.wpf-field.wpf-field-type-textarea.wpf-field-name-field_c154275 .wpf-field-wrap .video figure {
    max-width: 49% !important;
}

Die Nummer des Customfields ( bei mir _c154275) musst du natürlich an dein Feld anpassen

damit die Fotogalerie dann im Profil zu sehen ist, einen neuen Profiltab erstellen und und das Benutzerfeld Fotogalerie dort reinziehen, speichern und fertig :100:

wie das dann aussieht kennst du ja schon, aber für die anderen Leser Galerie von Tutrix

huch .. "Alexa", schreibt einen Beitrag

AntwortZitat
Veröffentlicht am : 16.07.2020 11:45
Garfield gefällt das
Top Down
Garfield
@garfield
Rang 1 ( 5-19 ) Beiträge
Registriert seit
26.04.2020
Beiträge
11
Land
Germany
Wohnort
Hamburg
Webseite
Smart Home Technik
Echo Dot
Smart Home Apps
Alexa App
Entertainment
Samsung UHD TV NU7179

Hi @tutrix

danke für die ausführliche Anleitung

hab das jetzt alles mal so eingefügt, wird auch alles angezeigt, nur das mit der CSS Formatierung funktioniert noch nicht.

wo finde ich den diese Nummer vom Customfield :330:  

Gib deine Träume nicht auf - schlafe weiter!
Zuerst schließen wir die Augen, dann sehen wir weiter.

AntwortZitat
Veröffentlicht am : 16.07.2020 20:06
Top Down
Tutrix
@tutrix
Administrator Admin
Registriert seit
20.01.2020
Beiträge
69
Land
Germany
Wohnort
München
Webseite
Smart Home Technik
Philips Hue
Hue Play Sync Box
2 x Echo + Show 5
Telekom Smart Speaker
Google Nest Hub
Plugs: TP-Link HS110
Logitech Harmony
Logitech Pop Home
HiKam S6 und HiKam Q8
Smart Home Apps
The Home Remote App
The Home Remote Designer
iConnectHue
Harmony® Control
Alexa / Google Home
Entertainment