Für alle die sich in das Thema der erweiterten Eigenschaften eindenken möchten wäre dies ein gutes Übungsbeispiel für den Beginn, da es sich hier nicht um komplexe und vielschichtige Zusammenhänge handelt, sondern man hier ja nur ganz gezielt einzig und alleine das Blogbild ansprechen möchte...
Dazu erstellt man als erweiterte Eigenschaft in der config.ccml quasi einen "Ein-/Aus-Schalter", z.B.
1
|
<cc:property id="design.ws.blogspecial" caption="Absatz als Blog markieren" folder="Blog" targettype="paragraph" type="boolean" default="0">
|
Der Blogcode wird bei den responsive Designs im Original ja in einen ganz normalen Container mit der Klasse "sqrpara" geschrieben, also z.B. findet ihr ihn im Quellcode unter...
1
|
<div class="sqrpara" id="046504a73008f9315">
|
...oder so ähnlich...und bezieht somit auch sämtliche CSS-Anweisungen der Klasse "sqrpara". Und mit unserer erweiterten Eigenschaft wollen wir hier nun eine "Ausnahme" produzieren, wenn unser "Schalter" eingeschaltet ist...
Dazu suchen wir nun in der page.ccml die entsprechende Stelle, an meinem Beispeil von Riga z.B. also die Zeile mit diesem Inhalt:
1
|
<div class="sqrpara<cc:if cond="¶.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="¶.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="¶.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="¶.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="¶.properties.design.paragraph.bottom + 40">px"</cc:if>>
|
Und im Zusammenhang mit dieser Zeile schreiben wir nun unsere Ausnahme, also mit der Konditionierung wenn (cc:if cond=...) der Schalter eingeschaltet ist, dann ist eine neue Klasse z.B. "blogspecialpara" zu nehmen, sonst (cc:else) also wenn ausgeschaltet die normale Klasse "sqrpara".
Diese "Funktionsweise des Schalters" sieht dann so aus:
1
2
3
4
5
6
7
8
|
<cc:if cond="¶.properties.design.ws.blogspecial">
<div class="blogspecialpara<cc:if cond="¶.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="¶.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="¶.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="¶.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="¶.properties.design.paragraph.bottom + 40">px"</cc:if>>
<cc:else>
<div class="sqrpara<cc:if cond="¶.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="¶.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="¶.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="¶.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="¶.properties.design.paragraph.bottom + 40">px"</cc:if>>
</cc:if>
|
So, jetzt müssen wir nur noch in der style_content.css bekannt geben, wie sich diese Klasse zu verhalten hat. Der Container selbst soll ja nicht anders aussehen, somit können wir dieselben Angaben verwenden wie bei "sqrpara" und schreiben hier entsprechend einfach die neue Klasse dazu, also so...
1
2
3
4
5
6
|
.sqrpara, .blogspecialpara {
box-sizing: border-box;
max-width: 1400px;
padding: 0 30px;
margin: 0 auto 40px auto;
}
|
Aber das Bild in dieser neuen Klasse soll nur noch halb so gross (oder dem Wert Eurer Wahl) sein, also fügen wir hier unsere Ausnahme dazu, also so:
1
2
3
4
5
6
|
.blogspecialpara img {
padding: 0;
margin: 0;
width: 50%;
height: 50%;
}
|
Auf dem Smartphone soll das Bild allerdings nicht verkleinert werden, sondern in der "normalen Grösse" dargestellt werden . Dazu fügen wir also noch hinzu...
1
2
3
4
5
6
7
8
|
@media screen and (max-width: 767px) {
.blogspecialpara img {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
}
|
...und jetzt müsst ihr nur noch das Programm neu starten und bei Eurem Absatztyp "Blog" die erweiterte Eigenschaft "einschalten" und fertig ist die Geschichte...
Wie ihr sehen könnt ist der Umgang mit erweiterten Eigenschaften eigentlich ganz einfach, aber je nachdem welche Problemstellung man lösen will und welche Gegebenheiten man noch weiter berücksichtigen muss kann es dann auch sehr komplex werden.
Ich hoffe aber mit diesem einfach erklärten Beispiel vielen von Euch Lust und Mut gemacht zu haben, sich mit dem von Volker verlinkten Workshop für Eure eigenen Modifikationen zu beschäftigen...
Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »
webchaot« (08.03.2017, 07:47)