[Frage] Fluid ViewHelper für den Bildpfad [Gelöst]

  • SirRuddy SirRuddy
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    17. 09. 2015, 11:48

    Hallo!

    Ich würde gerne das Template der Extension t3sbootstrap etwas modifizieren. Mein Problem ist, dass ich nicht dahinter komme welchen ViewHelper ich verwenden muss, um an die Bild URL zu gelangen. Ich möchte das Bild nicht wie im Original auf die Seite rendern, sondern als background-image im DIV class="media". So wird das Bild im original Template generiert:

    1. <!-- Aus der Datei: EXT:t3sbootstrap/Resources/Private/Partials/BootstrapComponents/Carousel.html (Zeile 17-34) Anfang -->
    2. <t3sbs:fal uid="{carousel.uid}" as="images">
    3. <f:if condition="{images}">
    4. <f:for each="{images}" as="image" iteration="iteration-image">
    5. <f:if condition="{iteration-image.isFirst}">
    6. <f:if condition="{image.link}">
    7. <f:then>
    8. <f:link.page pageUid="{image.link}">
    9. <f:image src="{image.uid}" treatIdAsReference="1" title="{image.title}" alt="{image.alternative}" width="{data.flexform_width}c-0" height="{data.flexform_height}" />
    10. </f:link.page>
    11. </f:then>
    12. <f:else>
    13. <f:image src="{image.uid}" treatIdAsReference="1" title="{image.title}" alt="{image.alternative}" width="{data.flexform_width}c-0" height="{data.flexform_height}" />
    14. </f:else>
    15. </f:if>
    16. </f:if>
    17. </f:for>
    18. </f:if>
    19. </t3sbs:fal>
    20. <!-- Aus der Datei: EXT:t3sbootstrap/Resources/Private/Partials/BootstrapComponents/Carousel.html (Zeile 17-34) Ende -->

    Ich möchte aber wie gesagt das ganze als Hintergrundsbild haben, also so:
    1. [...]
    2. <div class="carousel-inner">
    3. <f:for each="{data.tx_gridelements_view_children}" as="carousel" iteration="iteration-inner">
    4.  
    5. <!-- Änderung: Dem folgenden 'item' gebe ich hier zusätzlich ein Style-Tag für das 'background-image' mit -->
    6. <div class="item {f:if(condition:'{iteration-inner.isFirst}',then:'active')}" style="background-image: url(???FLUIDHELPER???); background-color:#0F6">
    7.  
    8. <!-- Änderung: Hier fliegt das ganze 't3sbs:fal' raus, und ein 'container' wird geöffnet -->
    9. <div class="container">
    10.  
    11. <f:if condition="{carousel.bodytext}">
    12. [...]

    Wie lautet der Fluid ViewHelper, den ich doch eigenlich anstelle von ???FLUIDHELPER??? eintragen müsste. - Oder habe ich da etwas falsch verstanden?

    Gruß
    SirRuddy

  • SirRuddy SirRuddy
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    21. 09. 2015, 18:40 - Lösung

    OK, vielen Dank (mal wieder) an mich selber, und an den FluidHelper <f:debug>{images}</f:debug>, den ich im Template innerhalb von <t3sbs:fal [...] > platziert habe. Und Voilà, kam ich auf [b]{image.identifier}[/b] um an das Bild zu gelangen. Nun noch das <f:image src="{image.uid}" [...] /> gegen ein DIV mit geschütztem Leerzeichen ersetzt. - Und gelöst!

    1. <div style="background-image:url(<f:uri.image src="/fileadmin/{image.identifier}" treatIdAsReference="0" />); background-position: center,center; width:100%; height:100%">&nbsp;</div>

    Schade, dass das Forum in der letzten Zeit so wenig hilfreiches Feedback gibt :( Ich denke für einen Profi wäre zumindest ein Hinweis zu <f:debug>{images}</f:debug> drin gewesen...


  • 1
  • Norman2k Norman2k
    Jedi-General
    0 x
    1650 Beiträge
    76 Hilfreiche Beiträge
    17. 09. 2015, 14:49

    [url=https://wiki.typo3.org/De:ViewHelper/Uri#f:uri.image]<f:uri.image src="EXT:myext/Resources/Public/typo3_logo.png" />[/url]

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    18. 09. 2015, 08:47

    Zitiert von: Norman2k
    [url=https://wiki.typo3.org/De:ViewHelper/Uri#f:uri.image]<f:uri.image src="EXT:myext/Resources/Public/typo3_logo.png" />[/url]

    Nö, das gibt ja auch wieder nur den kompletten img-tag aus.

    Für den benötigten Bildpfad gibt es in der vhs-Extension den [url=https://fluidtypo3.org/viewhelpers/vhs/master/Uri/ImageViewHelper.html]Viewhelper v:uri.image[/url]

  • SirRuddy SirRuddy
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    21. 09. 2015, 13:13

    Zitiert von: Norman2k
    [url=https://wiki.typo3.org/De:ViewHelper/Uri#f:uri.image]<f:uri.image src="EXT:myext/Resources/Public/typo3_logo.png" />[/url]
    Wirft ja den kompletten IMG-Tag raus. Ich brauche aber den Pfad zum Bild in der Style-Anweisung:
    1. [...]
    2. <div class="item {f:if(condition:'{iteration-inner.isFirst}',then:'active')}" style="background-image: url(???FLUIDHELPER???); background-color:#0F6">
    3. [...]

  • SirRuddy SirRuddy
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    21. 09. 2015, 14:10

    OK, ich bin etwas weiter gekommen. Wenn ich <f:uri.image src="UID-Eines-Bildes" /> (69) verwende kommt schon mal der Pfad zum Bild mit der entsprechenden UID. Es soll aber dynamisch sein, also muss es wohl innerhalb von <t3sbs:fal uid="{carousel.uid}" as="images"> liegen, oder?!

    <f:uri.image src="{image.uid}" /> fand ich jetzt logisch, produziert aber einen Fehler anstelle der URL: "You must either specify a string src or a File object."

    Hier noch mal der komplette Anfang den Carousels:

    1. [...]
    2. <div class="carousel-inner">
    3. <f:for each="{data.tx_gridelements_view_children}" as="carousel" iteration="iteration-inner">
    4. <div class="item {f:if(condition:'{iteration-inner.isFirst}',then:'active')}" style="background-color:#99CC99; background-image:url(<f:uri.image src="69" />)">
    5. <t3sbs:fal uid="{carousel.uid}" as="images">
    6. <f:if condition="{images}">
    7. <f:for each="{images}" as="image" iteration="iteration-image">
    8. <f:if condition="{iteration-image.isFirst}">
    9. <f:if condition="{image.link}">
    10. <f:then>
    11. <f:link.page pageUid="{image.link}">
    12. <f:image src="{image.uid}" treatIdAsReference="1" title="{image.title}" alt="{image.alternative}" width="{data.flexform_width}c-0" height="{data.flexform_height}" />
    13. </f:link.page>
    14. </f:then>
    15. <f:else>
    16. <f:image src="{image.uid}" treatIdAsReference="1" title="{image.title}" alt="{image.alternative}" width="{data.flexform_width}c-0" height="{data.flexform_height}" />
    17. </f:else>
    18. </f:if>
    19. </f:if>
    20. </f:for>
    21. </f:if>
    22. </t3sbs:fal>
    23. [...]

    Gruß
    SirRuddy

  • SirRuddy SirRuddy
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    21. 09. 2015, 18:40

    OK, vielen Dank (mal wieder) an mich selber, und an den FluidHelper <f:debug>{images}</f:debug>, den ich im Template innerhalb von <t3sbs:fal [...] > platziert habe. Und Voilà, kam ich auf [b]{image.identifier}[/b] um an das Bild zu gelangen. Nun noch das <f:image src="{image.uid}" [...] /> gegen ein DIV mit geschütztem Leerzeichen ersetzt. - Und gelöst!

    1. <div style="background-image:url(<f:uri.image src="/fileadmin/{image.identifier}" treatIdAsReference="0" />); background-position: center,center; width:100%; height:100%">&nbsp;</div>

    Schade, dass das Forum in der letzten Zeit so wenig hilfreiches Feedback gibt :( Ich denke für einen Profi wäre zumindest ein Hinweis zu <f:debug>{images}</f:debug> drin gewesen...

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    22. 09. 2015, 09:04

    Zitiert von: SirRuddy

    Schade, dass das Forum in der letzten Zeit so wenig hilfreiches Feedback gibt :( Ich denke für einen Profi wäre zumindest ein Hinweis zu <f:debug>{images}</f:debug> drin gewesen...

    Dazu mußt du deinen Account upgraden auf eine der Bezahl-Varianten ab monatlich 300 € :)
    Sach mal: spinnst du, oder was? Alle die hier antworten, machen das freiwillig in ihrer Freizeit - und du kommst hier mit Forderungen?

    Und wenn du lesen, könntest, hättest du die Lösung schon einige Einträge weiter oben finden können...

  • 1