[Frage] Responsive Images mit cropVariants TYPO3-Version: -

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    578 Beiträge
    1 Hilfreiche Beiträge
    09. 05. 2019, 14:55

    Hallo ins Forum,

    ich habe mir einige cropVariants im page TSConfig angelegt, die ich auch im im BE entsprechend nutzen kann. Ich öffne den Editor zur Bildbearbeitung, stelle alles wie gewünscht für Desktop, Tablet und Mobile ein und über den Button Aktzepieren zurück. Nun sehe ich die gewählten Bildausschnitte unter meinen drei Möglichkeiten.
    Sobald ich aber das Contentelement speichere, geht alles an Bildeinstellungen verloren und unter den drei Punkten sieht man jeweils wieder das Originalbild.
    [code]TCEFORM.sys_file_reference.crop.config.cropVariants {
    desktop {
    title = Desktop
    selectedRatio = 1:1
    allowedAspectRatios {
    1:1 {
    title = 1:1
    value = 1.0
    }
    4:3 {
    title = 4:3
    value = 1.3333333333333333
    }
    16:9 {
    title = 16:9
    value = 1.7777777777777777
    }
    NaN {
    title = Frei
    value = 0.0
    }
    }

    }
    tablet {
    title = Tablet
    selectedRatio = 1:1
    allowedAspectRatios {
    1:1 {
    title = 1:1
    value = 1.0
    }
    4:3 {
    title = 4:3
    value = 1.3333333333333333
    }
    16:9 {
    title = 16:9
    value = 1.7777777777777777
    }
    NaN {
    title = Frei
    value = 0.0
    }
    }
    }
    mobile {
    title = Mobil
    selectedRatio = 1:1
    allowedAspectRatios {
    1:1 {
    title = 1:1
    value = 1.0
    }
    4:3 {
    title = 4:3
    value = 1.3333333333333333
    }
    NaN {
    title = Frei
    value = 0.0
    }
    }
    }
    }
    [/code]

    Die Bilder lade ich im Fluid mit diesem HTML, es werden jedoch nicht die passenden Bildausschnitte angezeigt, sondern immer nur das Originalbild in voller Größe
    [code]<picture>
    <source media="(min-width: 1200px)" srcset="{f:uri.image(image:file, width:'2000', cropVariant:'desktop')}" alt="{image.alternative}" class="img-fluid"/>
    <source media="(min-width: 768px)" srcset="{f:uri.image(image:file, width:'1400', cropVariant:'tablet')}" alt="{image.alternative}" class="img-fluid"/>
    <source media="(min-width: 0px)" srcset="{f:uri.image(image:file, width:'800', cropVariant:'mobile')}" alt="{image.alternative}" class="img-fluid"/>
    <img src="{f:uri.image(image:file,width:'2000',cropVariant:'desktop')}" alt="{image.alternative}" class="img-fluid" />
    </picture>
    [/code]

    Ich habe mir mal die processed Images angesehen (und da scheint der Fehler), die Ausschnitte meiner drei Größen werden gar nicht gespeichert. Es liegt immer nur das Originalbild in dem Ordner.

    Was mache ich falsch? Oder gibt es eine Einstellung, die ich nicht berücksichtigt habe?

    Danke für n Tipp und Gruß
    mimii

    p.s.
    Typo3 Version 8.7.25
    Es scheint sich um das gleiche Problem wie in diesem Thread: https://www.typo3.net/forum/thematik/zeige/thema/127241/ zu handeln.


  • 1
  • Teisinger Teisinger
    Jedi-Meister
    0 x
    376 Beiträge
    26 Hilfreiche Beiträge
    09. 05. 2019, 16:57

    Geh mal ins install-tool und lass mal den Image-Test durchlaufen - wenn es da bereits Fehler gibt, hast du wohl auf dem Server kein Image- bzw. GraphicsMagick...

    https://github.com/groundstack-org

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    578 Beiträge
    1 Hilfreiche Beiträge
    10. 05. 2019, 09:25

    Hallo,

    danke für die Antwort. Also bei Configuration Presets -> Image handling settings war (warum auch immer?) Custom Configuration eingestellt. Das habe ich auf GraphicsMagick (Graphics Magick [Active]GraphicsMagick was found in path /usr/local/bin/ ) umgestellt. Der Bereich ist grün hinterlegt.
    Alle Caches und processed files habe ich dann geleert, die Einstellungen unter All configuration -> Image Processing habe ich mal nicht geändert.
    Alle Test im Test Setup sind grün.

    Dann habe ich einige Bilder neu angelegt, das Problem bleibt aber bestehen :-(. Nach dem Speichern des CE keine Vorschau mehr und im FE wird nur das Bild in Originalgröße ausgegeben. Es werden zwar Ordner und Bilder im /fileadmin/_processed_/ angelegt, jeweils mit unterschiedlichen Namen, aber es ist immer das gleiche Originalbild.

    Hmmm, jetzt bin ich wieder am Ende meines Lateins. Was könnte ich denn noch einstellen oder testen?

    Danke für Hilfe und Gruß
    mimii

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    578 Beiträge
    1 Hilfreiche Beiträge
    10. 05. 2019, 14:43

    Hallo nochmal,

    nach einiger Recherche im Netz bin ich auf diesen Eintrag gestoßen:https://stackoverflow.com/questions/50293342/typo3-crop-image-in-fluid/50305772#50305772

    Letzendlich war das die Lösung -> Hosting bei Mittwald -> Umstellung auf ImageMagick

    Uff, das hat jetzt mal richtig Zeit gekostet. Anyway... es funktioniert.

    Schönes Wochenende
    mimii

  • angi_d angi_d
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    26. 06. 2019, 21:58

    Hallo zusammen,

    ich scheine das gleiche Problem zu haben, verstehe aber die Lösung noch nicht. Wie und wo stelle ich denn auf ImageMagick um?

    Danke schon mal

    angi_d

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    376 Beiträge
    26 Hilfreiche Beiträge
    27. 06. 2019, 16:37

    Na du musst erst einmal herrausfinden ob bei dir ImageMagick oder GraphicsMagick läuft.
    Dabei am besten auch gleich die Version checken und herrausfinden unter welchem Pfad diese auf dem Server installiert wurden.

    Diesen Pfad musst du dann im Install-Tool bzw. in der LocalConfig oder in der AdditionalConfig eintragen:

    z. B.
    [code]// Windows example (GraphicsMagick)
    // "im_path" => "C:\\Program Files\\GraphicsMagick-1.3.31-Q16\\",
    // "processor_path" => "C:\\Program Files\\GraphicsMagick-1.3.31-Q16\\"

    // Windows example (ImageMagick)
    "im_path" => "C:\\Program Files\\ImageMagick-7.0.8-Q8\\",
    "processor_path" => "C:\\Program Files\\ImageMagick-7.0.8-Q8\\"

    // OSX - MAMP example (ImageMagick)
    // "im_path" => "/Applications/MAMP/Library/bin/",
    // "processor_path" => "/Applications/MAMP/Library/bin/"[/code]

    https://github.com/groundstack-org

  • 1