Project

General

Profile

Actions

Bug #91987

closed

Cropping Wizard broken when using multiple crop variants

Added by Philipp Wrann over 3 years ago. Updated over 3 years ago.

Status:
Closed
Priority:
-- undefined --
Assignee:
-
Category:
Image Cropping
Target version:
-
Start date:
2020-08-12
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
9
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

When opening the cropping wizard, the loading indicator is never removed. When inspecting the console you can find a javascript error:

Uncaught SyntaxError: JSON.parse: end of data while reading object contents at line 1 column 2 of the JSON data

The relevant part of the compiled script is

n=this.trigger.attr("data-crop-variants");if(!n)throw new TypeError("ImageManipulation: No cropVariants data found for image");this.data=e.isEmptyObject(this.data)?JSON.parse(n):this.data

As you can see here:
https://github.com/TYPO3/TYPO3.CMS/blob/master/typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html#L22

the markup is generated by using double-quotes, which results in broken markup, because json also contains double-quotes.

by replacing the double quotes with single quotes this works again.

There is only one thing, that confuses me - this worked before! I just got a issue assigned (own bugtracker), that cropping does not work ... and thats what i found out.

This commit introduced the issue:
https://github.com/TYPO3/TYPO3.CMS/commit/063938393d793d7e4b0261da8fe709073a815ae9

Actions #1

Updated by Andreas Kienast over 3 years ago

  • Status changed from New to Needs Feedback

Can you please tell which browser you're using to reproduce the issue?

I also wonder why it doens't work as the markup looks like this:

data-crop-variants="{"default":{"id":"default","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:option.default","cropArea":{"x":0,"y":0,"width":1,"height":1},"allowedAspectRatios":{"16:9":{"id":"16:9","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.16_9","value":1.7777777777777777},"4:3":{"id":"4:3","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.4_3","value":1.3333333333333333},"1:1":{"id":"1:1","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.1_1","value":1},"NaN":{"id":"NaN","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.free","value":0}},"selectedRatio":"NaN","focusArea":null,"coverAreas":null},"large":{"id":"large","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:option.large","cropArea":{"x":0,"y":0,"width":1,"height":1},"allowedAspectRatios":{"16:9":{"id":"16:9","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.16_9","value":1.7777777777777777},"4:3":{"id":"4:3","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.4_3","value":1.3333333333333333},"1:1":{"id":"1:1","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.1_1","value":1},"NaN":{"id":"NaN","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.free","value":0}},"selectedRatio":"NaN","focusArea":null,"coverAreas":null},"medium":{"id":"medium","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:option.medium","cropArea":{"x":0,"y":0,"width":1,"height":1},"allowedAspectRatios":{"16:9":{"id":"16:9","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.16_9","value":1.7777777777777777},"4:3":{"id":"4:3","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.4_3","value":1.3333333333333333},"1:1":{"id":"1:1","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.1_1","value":1},"NaN":{"id":"NaN","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.free","value":0}},"selectedRatio":"NaN","focusArea":null,"coverAreas":null},"small":{"id":"small","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:option.small","cropArea":{"x":0,"y":0,"width":1,"height":1},"allowedAspectRatios":{"16:9":{"id":"16:9","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.16_9","value":1.7777777777777777},"4:3":{"id":"4:3","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.4_3","value":1.3333333333333333},"1:1":{"id":"1:1","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.1_1","value":1},"NaN":{"id":"NaN","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.free","value":0}},"selectedRatio":"NaN","focusArea":null,"coverAreas":null},"extrasmall":{"id":"extrasmall","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:option.extrasmall","cropArea":{"x":0,"y":0,"width":1,"height":1},"allowedAspectRatios":{"16:9":{"id":"16:9","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.16_9","value":1.7777777777777777},"4:3":{"id":"4:3","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.4_3","value":1.3333333333333333},"1:1":{"id":"1:1","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.1_1","value":1},"NaN":{"id":"NaN","title":"LLL:EXT:bootstrap_package\/Resources\/Private\/Language\/Backend.xlf:ratio.free","value":0}},"selectedRatio":"NaN","focusArea":null,"coverAreas":null}}"
Actions #2

Updated by Philipp Wrann over 3 years ago

  • Priority changed from Should have to -- undefined --
  • Target version deleted (next-patchlevel)
  • % Done changed from 0 to 100
  • PHP Version deleted (7.3)
  • Complexity deleted (no-brainer)

Browser: Firfox 79.0 (64-Bit)
OS: Ubuntu x64

composer info

algo26-matthias/idna-convert   v1.1.0  A library for encoding and decoding ...
cogpowered/finediff            0.3.1   PHP implementation of a Fine granula...
cweagans/composer-patches      1.6.7   Provides a way to patch Composer pac...
doctrine/annotations           v1.8.0  Docblock Annotations Parser
doctrine/cache                 1.9.1   PHP Doctrine Cache library is a popu...
doctrine/dbal                  v2.10.0 Powerful PHP database abstraction la...
doctrine/event-manager         1.1.0   The Doctrine Event Manager is a simp...
doctrine/instantiator          1.3.0   A small, lightweight utility to inst...
doctrine/lexer                 1.2.0   PHP Doctrine Lexer parser library th...
filp/whoops                    2.5.0   php error handling for cool kids
fluidtypo3/vhs                 5.2.0   The vhs package from FluidTYPO3
gridelementsteam/gridelements  9.3.0   This extension integrates the grid l...
guzzlehttp/guzzle              6.4.1   Guzzle is a PHP HTTP client library
guzzlehttp/promises            v1.3.1  Guzzle promises library
guzzlehttp/psr7                1.6.1   PSR-7 message implementation that al...
helhum/config-loader           v0.12.2 Generic config loader with context a...
helhum/typo3-console           v5.7.2  A reliable and powerful command line...
helhum/typo3-console-plugin    v2.0.5  Installer plugin for helhum/typo3-co...
nikic/php-parser               v4.3.0  A PHP parser written in PHP
psr/cache                      1.0.1   Common interface for caching libraries
psr/container                  1.0.0   Common Container Interface (PHP FIG ...
psr/http-message               1.0.1   Common interface for HTTP messages
psr/http-server-handler        1.0.1   Common interface for HTTP server-sid...
psr/http-server-middleware     1.0.1   Common interface for HTTP server-sid...
psr/log                        1.0.2   Common interface for logging libraries
ralouphie/getallheaders        3.0.3   A polyfill for getallheaders.
swiftmailer/swiftmailer        v5.4.12 Swiftmailer, free feature-rich PHP m...
symfony/cache                  v4.3.8  Symfony Cache component with PSR-6, ...
symfony/cache-contracts        v1.1.7  Generic abstractions related to caching
symfony/console                v4.3.8  Symfony Console Component
symfony/expression-language    v4.3.8  Symfony ExpressionLanguage Component
symfony/finder                 v4.3.8  Symfony Finder Component
symfony/intl                   v4.3.8  A PHP replacement layer for the C in...
symfony/polyfill-ctype         v1.12.0 Symfony polyfill for ctype functions
symfony/polyfill-intl-icu      v1.12.0 Symfony polyfill for intl's ICU-rela...
symfony/polyfill-intl-idn      v1.12.0 Symfony polyfill for intl's idn_to_a...
symfony/polyfill-mbstring      v1.12.0 Symfony polyfill for the Mbstring ex...
symfony/polyfill-php72         v1.12.0 Symfony polyfill backporting some PH...
symfony/polyfill-php73         v1.12.0 Symfony polyfill backporting some PH...
symfony/process                v4.3.8  Symfony Process Component
symfony/routing                v4.3.8  Symfony Routing Component
symfony/service-contracts      v1.1.8  Generic abstractions related to writ...
symfony/var-dumper             v4.3.8  Symfony mechanism for exploring and ...
symfony/var-exporter           v4.3.8  A blend of var_export() + serialize(...
symfony/yaml                   v4.3.8  Symfony Yaml Component
typo3-ter/dce                  2.3.1   Best flexform based content elements...
typo3/class-alias-loader       1.0.1   Amends the composer class loader to ...
typo3/cms-about                v9.5.11 Shows info about TYPO3, installed ex...
typo3/cms-adminpanel           v9.5.11 The TYPO3 admin panel provides a pan...
typo3/cms-backend              v9.5.11 Classes for the TYPO3 backend.
typo3/cms-belog                v9.5.11 Displays backend log, both per page ...
typo3/cms-beuser               v9.5.11 Backend user administration and over...
typo3/cms-cli                  2.0.0   TYPO3 command line binary
typo3/cms-composer-installers  v2.2.4  TYPO3 CMS Installers
typo3/cms-core                 v9.5.11 The core library of TYPO3.
typo3/cms-extbase              v9.5.11 A framework to build extensions for ...
typo3/cms-extensionmanager     v9.5.11 TYPO3 Extension Manager
typo3/cms-felogin              v9.5.11 A template-based plugin to log in We...
typo3/cms-filelist             v9.5.11 Listing of files in the directory
typo3/cms-filemetadata         v9.5.11 Add advanced metadata to File.
typo3/cms-fluid                v9.5.11 Fluid is a next-generation templatin...
typo3/cms-fluid-styled-content v9.5.11 A set of common content elements bas...
typo3/cms-form                 v9.5.11 Form Library, Plugin and Editor
typo3/cms-frontend             v9.5.11 Classes for the frontend of TYPO3.
typo3/cms-impexp               v9.5.11 Import and Export of records from TY...
typo3/cms-info                 v9.5.11 Shows various infos
typo3/cms-install              v9.5.11 The Install Tool mounted as the modu...
typo3/cms-lowlevel             v9.5.11 Enables the 'Config' and 'DB Check' ...
typo3/cms-recordlist           v9.5.11 List of database-records
typo3/cms-redirects            v9.5.11 Custom redirects in TYPO3.
typo3/cms-reports              v9.5.11 The reports module groups several sy...
typo3/cms-rte-ckeditor         v9.5.11 Integration of CKEditor as Rich Text...
typo3/cms-scheduler            v9.5.11 The TYPO3 Scheduler let's you regist...
typo3/cms-seo                  v9.5.11 SEO features for TYPO3.
typo3/cms-setup                v9.5.11 Allows users to edit a limited set o...
typo3/cms-sys-note             v9.5.11 Records with messages which can be p...
typo3/cms-t3editor             v9.5.11 JavaScript-driven editor with syntax...
typo3/cms-tstemplate           v9.5.11 Framework for management of TypoScri...
typo3/cms-viewpage             v9.5.11 Shows the frontend webpage inside th...
typo3/fluid-schema-generator   2.1.2   Generates XSD schemas for packages c...
typo3/minimal                  v9.5.0  Minimal required set of TYPO3 extens...
typo3/phar-stream-wrapper      v3.1.3  Interceptors for PHP's native phar:/...
typo3fluid/fluid               2.6.7   The TYPO3 Fluid template rendering e...

As i write this i remembered its possible to overload core viewhelpers, by registering additional namespaces to the global f alias.

And indeed i registered a format.json viewhelper for static contexts where i could not use the cms-fluid viewhelpers.

And that viewhelper had escapeOutput/escapeChildren both set to false!

So i removed that viewhelper implementation and it works!

Actions #3

Updated by Andreas Kienast over 3 years ago

  • Status changed from Needs Feedback to Closed

Thank you for cross-checking and verifying this is not a Core issue.

I'll close this issue then, have a nice day.

Actions

Also available in: Atom PDF