[TYPO3-german] Bilder je nach Erscheinungsbild für das Bild rendern

_doc _doc at freenet.de
Sun Jan 13 22:04:07 CET 2019


Hallo Heike,

Dein gebautes Switch-Konstrukt ist nicht XML- bzw. HTML-valide.

Besser ware eine Inline-Notation.

<div class="{f:if(condition:'{data.layout}<=1 || 
{data.layout}>3',then:'col-md-push-5', 
else:'')}{f:if(condition:'{data.layout}<=2',then:'col-md-push-7', 
else:'')}{f:if(condition:'{data.layout}==3',then:'col-md-push-7', 
else:'col-lg-4')}">

...
</div>

Noch übersichtlicher wäre eine eigene Section, die du mit den jeweils 
gewünschten Parameter im Switch direkt im f:render notierst und zur 
Section durchreichst. Das geht zwar auf die Performance, ist aber 
insgesamt übersichtlicher. Vielleicht kannst du bei diesem Refactoring 
dann auch den Fehler ausmerzen.

Mit besten Grüßen

   Dieter Porth

P.S. Dein abgebildeter Code ist eine Fluid-Template und keine TypoScript.

Am 13.01.2019 um 08:46 schrieb Heike Herzog-Kuhnke:
> Liebe Liste,
>
> weil es so gut geklappt hat, hätte ich noch eine Frage. Nicht dass es 
> schlimm wäre, dass meine Bilder alle in Kreisform angezeigt werden, 
> aber irgendwie war das anders geplant...
>
> Ich habe für meine Seite das Problem gehabt, dass ich die Bilder je 
> nach Erscheinungsbild unterschiedlich darstellen muss. Dafür habe ich 
> das Fluid-Element TextPic verwendet, was für die Div-Klassen auch 
> wunderbar funktioniert.
>
> Jetzt sollen aber eigentlich für das Layout Teaser (Layout 3) die 
> Bilder mit einer Klasse "img-circle" versehen werden, die dafür sorgt, 
> dass die Bilder rund dargestellt werden. Zusätzlich sollten diese 
> Bilder eigentlich auf das Format 140 x 140 Pixel zugeschnitten werden 
> (bzw. verkleinert.
>
> Mit beiden Aufgaben komme ich nicht weiter. Eine Angabe der Bildgröße 
> im Backend scheint leider keine Auswirkung mehr auf meine Bilder zu 
> haben und ich bekomme es nicht hin, dass ich je nach Layout eine 
> andere Klasse zum Bild dazu spiele.
>
> Hier mein Typoskript:
>
> ----------------------------
> TextPic.html
> ----------------------------
> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
> data-namespace-typo3-fluid="true">
> <f:layout name="Default" />
> <f:section name="Header">
>     <f:if condition="{gallery.rows}">
>         <f:switch expression="{data.layout}">
>          <f:case value="1"><div class="col-md-7 col-md-push-5"> </f:case>
>          <f:case value="2"><div class="col-md-7"></f:case>
>          <f:case value="3"><div class="col-lg-4"></f:case>
>          <f:defaultCase><div class="col-md-7 
> col-md-push-5"></f:defaultCase>
>        </f:switch>
>
>       <f:if condition="{data.layout} == 3">
>               <f:render partial="Media/Gallery" arguments="{_all}" />
>       </f:if>
>
>       <f:if condition="{gallery.position.noWrap} != 1">
>             <f:render partial="Header/Header" arguments="{
>                 header: data.header,
>                 layout: data.header_layout,
>                 positionClass: 'featurette-heading',
>                 default: settings.defaultHeaderType}" />
>      </f:if>
>
>     </f:if>
> </f:section>
>
> <f:section name="Main">
>
>         <f:if condition="{data.bodytext}">
>
>             <f:then>
>                     <f:if condition="{gallery.position.noWrap}">
>                       <f:render partial="Header/Header" arguments="{
>                           header: data.header,
>                           layout: data.header_layout,
>                           positionClass: 'featurette-heading',
>                           default: settings.defaultHeaderType}" />
>                     </f:if>
> <f:format.html>{data.bodytext}</f:format.html>
>                     <f:if condition="{data.layout} != 3">
>                       </div>
>                     </f:if>
>
>             </f:then>
>             <f:else>
>                 <f:if condition="{gallery.position.noWrap}">
>                     <f:if condition="{data.header}">
>                     <f:render partial="Header/Header" arguments="{
>                         header: data.header,
>                         layout: data.header_layout,
>                         positionClass: 'featurette-heading',
>                         default: settings.defaultHeaderType}" />
>                         </div>
>                     </f:if>
>                 </f:if>
>             </f:else>
>         </f:if>
>       <f:if condition="{data.layout} != 3">
>               <f:render partial="Media/Gallery" arguments="{_all}" />
>         </div>
>       </f:if>
>       <f:if condition="{data.layout} == 3">
>             <f:render partial="Header/SubHeader" arguments="{
>                 subheader: data.subheader,
>                 layout: data.header_layout,
>                 positionClass: 'btn btn-default',
>                 link: data.header_link,
>                 default: settings.defaultHeaderType}" />
>            </div>
>       </f:if>
>
>
> </f:section>
> </html>
>
> ---------------------------
> Media/Gallery.html
> --------------------------
>
> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
> xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" 
> data-namespace-typo3-fluid="true">
> <f:if condition="{gallery.rows}">
>   <f:switch expression="{data.layout}">
>    <f:case value="1"><div class="col-md-5 col-md-pull-7"> </f:case>
>    <f:case value="2"><div class="col-md-5"></f:case>
>    <f:case value="3"></f:case>
>    <f:defaultCase></f:defaultCase>
> </f:switch>
>
>         <f:for each="{gallery.rows}" as="row">
>                 <f:for each="{row.columns}" as="column">
>                     <f:if condition="{column.media}">
>                             <f:render partial="Media/Type" 
> arguments="{file: column.media, dimensions: column.dimensions, data: 
> data, settings: settings}" />
>                     </f:if>
>                 </f:for>
>         </f:for>
>         <f:if condition="{gallery.position.horizontal} == 'center'">
>         </f:if>
>   <f:switch expression="{data.layout}">
>    <f:case value="1"></div></f:case>
>    <f:case value="2"></div></f:case>
>    <f:case value="3"></f:case>
>    <f:defaultCase></f:defaultCase>
> </f:switch>
>
> </f:if>
> </html>
>
> ---------------------------
>
> Hier klappt alles wunderbar mit den Switches.
>
> ---------------------------
> Media/Type/Image.html
> ---------------------------
> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
> xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" 
> data-namespace-typo3-fluid="true">
> <figure class="image">
>     <f:if condition="{file.link}">
>         <f:then>
>             <f:link.typolink parameter="{file.link}" 
> title="{file.title}">
>                 <f:render partial="Media/Rendering/Image" 
> arguments="{file: file, dimensions: dimensions, settings: settings}" />
>             </f:link.typolink>
>         </f:then>
>         <f:else>
>             <f:if condition="{data.image_zoom}">
>                 <f:then>
>                     <ce:link.clickEnlarge image="{file}" 
> configuration="{settings.media.popup}">
>                         <f:render partial="Media/Rendering/Image" 
> arguments="{file: file, dimensions: dimansions, settings: settings}" />
>                     </ce:link.clickEnlarge>
>                 </f:then>
>                 <f:else>
>                     <f:render partial="Media/Rendering/Image" 
> arguments="{file: file, dimensions: dimensions, settings: settings}" />
>                 </f:else>
>             </f:if>
>         </f:else>
>     </f:if>
>     <f:if condition="{file.description}">
>         <figcaption class="image-caption">
>             {file.description}
>         </figcaption>
>     </f:if>
> </figure>
> </html>
>
> ------------------------------
>
>
> ----------------------
> Media/Rendering/Image.html
> ------------------------
> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" 
> data-namespace-typo3-fluid="true">
> <f:media class="img-circle {f:if(condition: '{data.layout} != 3', 
> then: 'featurette-image img-responsive center-block')}" file="{file}" 
> width="{dimensions.width}" height="{dimensions.height}" 
> alt="{file.alternative}" title="{file.title}" />
>
> </html>
> ---------------------------
>
> Immer wenn ich hier um img-circle herum einer Condition eingebe, um je 
> nach Layout die passende Klasse auszugeben, dann bleibt class leer. 
> Mit dieser Variante wird die Klasse im alternativen Layout 
> hinzugefügt, aber es scheint als müsste ich mindestens eine Klasse 
> angeben.
>
> Der Versuch es mit diesem switch zu lösen, wie in Gallery.html bringt 
> in dieser Variante ein Oops:
>
> ---------------------------
> <f:if condition="{gallery.rows}">
>   <f:switch expression="{data.layout}">
>    <f:case value="1">
>     <f:media class="featurette-image img-responsive center-block" 
> file="{file}" alt="{file.alternative}" title="{file.title}" />
>     </f:case>
>    <f:case value="2">
>     <f:media class="featurette-image img-responsive center-block" 
> file="{file}" alt="{file.alternative}" title="{file.title}" />
>     </f:case>
>    <f:case value="3">
>      <f:media class="img-circle" file="{file}" 
> alt="{file.alternative}" title="{file.title}" />
>     </f:case>
>    <f:defaultCase>
>       <f:media class="featurette-image img-responsive center-block" 
> file="{file}" alt="{file.alternative}" title="{file.title}" />
>     </f:defaultCase>
> </f:switch>
> ---------------------------
>
> Nicht dass es schlimm ist, wenn alle Bilder der Homepage in rund 
> angezeigt werden, wenns nicht anders geht, dann kann ich damit leben. 
> Dass ich aber irgendwie die Option verloren habe im Backend die Größe 
> zu manipulieren ärgert mich schon. Dass ich nicht verstehe, wie ich es 
> richtig mache oder wo mein Fehler mit den Klassen ist, ärgert mich 
> natürlich auch, nachdem der Rest so gut funktioniert hat.
>
> Ich wäre sehr dankbar, wenn mir hier auch noch auf die Sprünge 
> geholfen werden könnte :)
>
> LG
> Heike
>
>
>
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german

-- 
---

Dr. Dieter Porth
Grünenstraße 23
D-28199 Bremen
Germany

+(049) 421 / 51 48 35 48
+(049) 160 / 99 18 06 88 (abends/ after 18:00)



More information about the TYPO3-german mailing list