XF2.2 html Syntax bei xf_macro einbindung

sps-forum

sps-forum

Bekanntes Mitglied
Lizenzinhaber
Registriert
8. Sep. 2014
Beiträge
154
Punkte
93
XF Version
  1. 2.2.4
Hallo,

wie aus einem anderen Thread bekannt, nutze ich für die Bannerverwaltung das Addon von Siropu.
Da ich noch keinen Weg sehe meine gewünscht Anordnung nur durch Konfiguration seines Addons zu realisieren, versuchte ich mich darin eigene "Positionen" zu definieren.
(Ich habe siropu dazu schon kontaktiert, aber das folgende Problem dürfte allgemeiner Natur sein).


Sein Addon stellt diese als eine Art "macro" zur Verfügung.
Ich möchte das diese 8 banner/packages oben im header 4x2 (4 nebeneinander, zwei Zeilen) angezeigt werden.


In meinem Testforum www.coata.de habe ich unter Werbung im header folgende code eingefügt:

Code: 
<div align="center">

<br />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_1" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_2" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_3" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_4" />
<br />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_5" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_6" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_7" />
<xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_8" />

</div>

warum interessiert das div bzw. das center und der br niemanden?
Die Banner Container sind nach wie vor alle übereinander (1x8).
Was mache ich falsch?

Danke!
 
Du willst das also wie im Anhang haben. Mach dich mal vertraut mit <ul class="listInline"></ul>
 

Anhänge

  • Bildschirmfoto 2021-04-18 um 15.55.58.png
    Bildschirmfoto 2021-04-18 um 15.55.58.png
    182,9 KB · Aufrufe: 6
  • Bildschirmfoto 2021-04-18 um 15.56.09.png
    Bildschirmfoto 2021-04-18 um 15.56.09.png
    76,2 KB · Aufrufe: 5
Und bitte lieber mit der extra.less und eigenen DIV Klassen arbeiten als mit ALIGN oder STYLE. Das ist sauberer und verhindert ungewollte Fehler.
 
Der align Tag ist einfach veraltet... CSS hat da höhere Priorität. Das kann so nicht funktionieren.
Auch <br/> sollte nicht in so einem Zusammenhang verwendet werden.

Vermutlich werden die Macros Block Elemente liefern, und die sind dann natürlich Untereinander. Die müsstest du dann in InlineBlock Elemente Kapseln, wie hat McAtze geschrieben.
 
Ok, ich danke euch mal.

Könnt ihr mir da etwas detaillierter helfen?
Vielleicht etwas mehr Beispielcode?
Ich komme aus einer anderen Welt und bin hier nicht ganz auf der Höhe...

@McAtze
Ja, genau so wie im Anhang soll es werden.

Danke!
 
sps-forum schrieb:
Könnt ihr mir da etwas detaillierter helfen?
Vielleicht etwas mehr Beispielcode?
Ich komme aus einer anderen Welt und bin hier nicht ganz auf der Höhe...
Zum Vergrößern anklicken....
Ich mach dir mal was fertig..
 
Danke!

Grundsätzlich für alle.
Wenn meine Hilfegesuche über Gefälligkeiten hinausgehen, dann scheut euch nicht mir das zu sagen.
Ich bin gerne bereit mich für diese Hilfe erkenntlich zu zeigen.
Ihr müsst beim besten Willen nicht umsonst meine Hausaufgaben machen.
 
Also ich habe da einen ziemlich einfachen Weg gefunden und es zeigt mir wieder wie massiv doch das AddOn von Siropu eigentlich ist.
Muss nur noch ein wenig am Responsive arbeiten.

@sps-forum hast du spezielle Vorgaben was auf Tablet und Phone sichtbar sein soll/darf? Das zerreißt dir sonst den ganzen Header...
 

Anhänge

  • Bildschirmfoto 2021-04-18 um 20.37.55.png
    Bildschirmfoto 2021-04-18 um 20.37.55.png
    168,5 KB · Aufrufe: 7
  • 2021-04-18_20-36-09 (1).gif
    2021-04-18_20-36-09 (1).gif
    2,3 MB · Aufrufe: 8
Hi, Idealerweise soll das immer gleich sein.
Wie bist du das jetzt angegangen?
Konntest du das rein über das Addon lösen, oder hast du auch den Ansatz von mir mit den "positionen" verfolgt?

Danke dir!
 
Dies ist etwas länger zu erklären. Mach ich dir morgen mal fertig.

Eventuell würde ich dir auch mal das Random Banner nahelegen. Da sind dann nicht immer so viele Banner gleichzeitig im Header.
 
Mir hat das jetzt keine Ruhe gelassen... :)
Ich habe mir mal ein paar Codebeispiele angeschaut und etwas experimentiert.

Ich begreife die Struktur/Syntax noch nicht so richtig...
Bitte entschuldigt meine Anfängerfragen.

Warum geht das nicht (Die Banner sind wieder alle untereinander):
Code: 
<div style="vertical-align: middle;margin-left: auto;">

   
   
<div class="container">
  <ul class="list-inline">
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_1" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_2" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_3" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_4" /></li>
   </ul>

  <ul class="list-inline">
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_5" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_6" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_7" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_8" /></li>
   </ul> 
</div>


Aber das hier geht:
Code: 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   
   
<div class="container">
  <ul class="list-inline">
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_1" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_2" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_3" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_4" /></li>
   </ul>

  <ul class="list-inline">
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_5" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_6" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_7" /></li>
    <li><xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_8" /></li>
   </ul> 
</div>


Sowas scheint ja auch nicht zu gehen, oder?
Code: 
.list-inline{text-align:center}
.list-inline li{display:inline-block;margin:5px;}

Ich weiß nicht wirklich was ich da grad mache, aber ich wäre dankbar wenn ihr mir helfen könnt es besser zu verstehen.
Wie muss ich den ersten Fall (Codebeispiel von McAtze) richtig deklarieren damit das flutscht?
 
McAtze schrieb:
Dies ist etwas länger zu erklären. Mach ich dir morgen mal fertig.

Eventuell würde ich dir auch mal das Random Banner nahelegen. Da sind dann nicht immer so viele Banner gleichzeitig im Header.
Zum Vergrößern anklicken....

Danke!

Wegen Ramdom.
Mit den 8 Plätzen im Header können bis zu 32 Banner angezeigt werden.

Deswegen habe ich in Siropus Addona ja auch 8 "Packages" angelegt.
In jedem "Package" können 4 Banner angelegt werden.
Diese 4 Banner rotieren dann.

Es gibt also 8 Bannerrotationen mit je max. 4 Bannern.

Hätte ich nur die 8 Banner, dann kann ich das Addon so konfigurieren, dass die alle gleichzeitig in einem "Package" angezeigt werden.
Das dürfte kein Problem sein.
 
sps-forum schrieb:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Zum Vergrößern anklicken....
Bitte nicht ins XF noch ein Bootstrap laden, das ist viel zu viel overhead und nicht notwendig, da das XF alles was du brauchst von Haus aus mitbringt.
Auch das Inline-CSS vom ersten Beispiel wann immer es geht vermeiden. Das ersparte dir viel Sucherei falls du mal was ändern musst.
Aber McAtze macht dir ja fast fertig, dann am besten drauf warten.
 
@sps-forum du musst nicht immer neue CSS Klassen anlegen. Du kannst viele XF Klassen verwenden. Bei dir zum Beispiel lieber listInline nehmen und in der extra.less erweitern. Gedulde dich mal bis heute Abend.

Schick mir vielleicht mal ein Screenshot auch per PN von den angelegten Bannern und Packages.
 
So hier habe ich mal eine kleine Anleitung wie du vorgehen kannst. Ausschlaggebend sind hier folgende Kriterien:
1. Im Header 2 Reihen mit jeweils 4 Banner.
2. Banner werden im Ads Manager angelegt um die Clicks & Co. zu erfassen.

1) Zuerst solltest du dir neue Ad Positionen im Ads Manager generieren. Somit hast du zum einen deine eigenen Positionen und keine globalen, und zum anderen bekommst du damit deine Template Macros pro Reihe.
Bildschirmfoto 2021-04-19 um 15.45.13.png Bildschirmfoto 2021-04-19 um 15.45.24.png

2) Danach musst du dir pro Reihe jeweils ein Banner Package anlegen. Damit kannst du dann festlegen, wieviel Banner pro Reihe geschalten werden, diese können dann zufällig im Wechsel eingeblendet werden und du
kannst dir deine CSS-Klasse für jede Reihe anlegen. Diese werden dann später in der Extra.LESS benötigt.
Bildschirmfoto 2021-04-19 um 15.44.04.png Bildschirmfoto 2021-04-19 um 15.45.38.png Bildschirmfoto 2021-04-19 um 15.46.41.png

3) Nun kannst du nach belieben deine Banner erstellen und dem jeweiligen Package zuweisen. Auch hier ist dann wichtig in den Settings die CSS-Klasse pro Element einzutragen.
Bildschirmfoto 2021-04-19 um 15.49.41.png Bildschirmfoto 2021-04-19 um 15.50.19.png Bildschirmfoto 2021-04-19 um 15.52.13.png

4) Als nächstes musst du nun ein HTML-Widget erstellen und die beiden Template Macros aus Punkt 1 einfügen. Dies sieht dann so aus:
HTML: 
  <div class="spsHeaderAds">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowOne" />
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowTwo" />
  </div>
Wichtig ist hier das du den Advanced Mode für das Widget nutzt um keine Blocks im Widget zu generieren und auch keine Position auswählst. Du benötigst nur den Widget-Key. In dem Beispiel hier brauchst du dann:
HTML: 
<xf:widget key="spsHeaderAds" />

5) Nun solltest du in die XenForo Advertising (admin.php?advertising/) gehen und per Add Advertisment ein neues Ad generieren. Vergib einen eindeutigen Titel "spsHeaderAds", nutze die Position "Container header"
und trage hier unter HTML deine unter Punkt 4 erstelltes Widget ein:
HTML: 
<xf:widget key="spsHeaderAds" />
Speichern und Fertig.

6) Als nächsten Schritt muss die CSS/LESS Anpassung gemacht werden. Hierzu öffnest du in deinem Style die extra.less und trägst das folgende ein:
CSS: 
 /**** LESS for SPS Header Ads ****/
.p-header-content .spsHeaderAds
{
    vertical-align:middle;
    margin-left:auto;
}

.p-header {
    .samBannerUnit.listInline
    {
        float:none;
        max-width: 100%;
    }
}

.listInline
{
    .m-listPlain();
 
    .sameDisplayInline
    {
        display: inline;
        margin: 0;
        padding: 2px;
    }
}
/**** LESS for SPS Header Ads ****/

7) Anschließend ist dann das Feintuning angesagt..
 

Anhänge

  • Bildschirmfoto 2021-04-19 um 15.44.46.png
    Bildschirmfoto 2021-04-19 um 15.44.46.png
    18,5 KB · Aufrufe: 4
Erst mal vielen Dank!

Ich bin mir nicht sicher ob ich es verstanden habe...

1. Du arbeitest in deinem Beispiel mit 2 "Packages"
Wenn ich 4 Banner gleichzeitig in einem Package anzeige, dann kann ich das bereits im Package so einstellen, dass die nebeneinander sind.
Was genau erreiche ich dann durch deinen Code?

2. Mein Ansatz basierte ja auf 8 Packages.
Der Grund ist dass ich auf 8 Bannerplätzen bis zu 32 Banner anzeigen will.
Die Positionen sollen nicht random sein.

Grund:
Im Normalfall hat ein Banner pro Position 25% Einblendungen. (max. 4 pro Position)
Will ein Kunde 50, 75, oder 100% der Einblendungen an einem Platz, dann bucht er quasi mehr "Bannerplätze".

Es sollen also 8 Packages bzw. 8 voneinander unabhängige Bannerrotation realisiert habe.


Ich denke dass sich dein Code auf diese Aufgabenstellungen anpassen lässt.
Das was du mir gezeigt hast hilft auf jeden Fall sehr!


Als ich zuletzt mit "Web" zu tun hatte, dann hatte man sowas mit Tabellen gelöst.
Wie ihr an meinen obigen Beispielen und Fragen erkennen könnt, bin ich mit Dingen wie CSS und LESS noch völlig überfordert.
Was passiert wenn ich das mit einer Tabelle löse?
Wird das Forum explodieren oder werde ich nur von den heutigen Experten verprügelt? :)


Ich wollte nur sichergehen das wir beide vom selben Problem reden bevor wir beginnen es zu lösen... :)
 
Tabellen sind mittlerweile oldschool, d.h. insbesondere nicht unbedingt Responsive geeignet. Daher wird mittlerweile hauptsächlich mit Grid gearbeitet. Hier läßt sich durch einfaches CSS eine Tabelle "simulieren" und trotzdem sind diese dann responsive oder auch einzeln ausblendbar. Dies ist aber auch für mich sehr massiv und unübersichtlich. Kannst dir hier mal als Beispiel kurz das Prinzip ansehen: A Complete Guide to Flexbox | CSS-Tricks

Der Vorteil an Frameworks, und ich nehme jetzt XF mal als solches, ist einfach der vorhandene Code. Ob jetzt im Backend als Funktionen oder auch im Frontend als CSS/LESS. Es ist im Prinzip (fast) alles vorhanden was man braucht und man kann sich, z.B. mit vorhandenen CSS-Klassen einfach neues gestalten. Dies verhindert dann auch Probleme mit anderen Styles.
 
McAtze schrieb:
4) Als nächstes musst du nun ein HTML-Widget erstellen und die beiden Template Macros aus Punkt 1 einfügen. Dies sieht dann so aus:
HTML: 
  <div class="spsHeaderAds">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowOne" />
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowTwo" />
  </div>
Wichtig ist hier das du den Advanced Mode für das Widget nutzt um keine Blocks im Widget zu generieren und auch keine Position auswählst. Du benötigst nur den Widget-Key. In dem Beispiel hier brauchst du dann:
HTML: 
<xf:widget key="spsHeaderAds" />

5) Nun solltest du in die XenForo Advertising (admin.php?advertising/) gehen und per Add Advertisment ein neues Ad generieren. Vergib einen eindeutigen Titel "spsHeaderAds", nutze die Position "Container header"
und trage hier unter HTML deine unter Punkt 4 erstelltes Widget ein:
HTML: 
<xf:widget key="spsHeaderAds" />
Speichern und Fertig.
Zum Vergrößern anklicken....

Wie lege ich ein solches Widget an bzw. in welche Datei kommt der Code?

Bzw warum füge ich das hier:
HTML: 
  <div class="spsHeaderAds">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowOne" />
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="spsHeaderRowTwo" />
  </div>
nicht direkt in den Werbeblock von XF im Header ein?

Danke!
 
McAtze schrieb:
Keine Ahnung warum ich an dieser Stelle so kompliziert gedacht habe.
Zum Vergrößern anklicken....
Entwicklerkrankheit. War bei mir in der Umschulung immer mein größtes Problem, zu kompliziert gedacht, und dadurch Zeit und Nerven verloren, spätestens wenn man die einfachere Lösung präsentier bekam. :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben