Bug #53169

Responsive "sourceCollection" width not usable out of the box

Added by Erik Frister about 7 years ago. Updated about 3 years ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
TypoScript
Target version:
Start date:
2013-10-28
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
6.2
PHP Version:
Tags:
Complexity:
medium
Is Regression:
No
Sprint Focus:

Description

Responsive images do not respect their width configuration inside the sourceCollection as long as "tt_content.image.20.1.file.width.field = imagewidth" is set, which it is by default (currently line 662 of the static/setup.txt of css_styled_content).
This leads to the responsive images being currently unusable out of the box. Furthermore, as soon as you set a width in the appearance tab of the image record, all versions, even the responsive images, have that width. I don't imagine this to be the desired functionality.


Files

responsive-images.diff (1.33 KB) responsive-images.diff Pascal Hinz, 2013-10-30 14:36

Related issues

Related to TYPO3 Core - Bug #53403: responsiveimages have problems with user given height and widthClosed2013-11-07

Actions
#1

Updated by Philipp Gampe about 7 years ago

  • Status changed from New to Needs Feedback

Can you provide a patch? http://wiki.typo3.org/CWT

all review Please always leave a note if you can reproduce the problem.

#2

Updated by Pascal Hinz about 7 years ago

Had the same Problem and allready a solution (patch).
The Problem is that the responsive calculation doesn't care about the tt_content stdWrap settings (patch line:9-10) and after the dimension calculation of the responsive images, the default tt_content settings overrides the dimensions (patch line:18).

#3

Updated by Pascal Hinz about 7 years ago

How to reproduce, with current TYPO3 6.2 Master Branch:

Setup following Typoscript Configuration on your Site:

# tt_contant constants
styles.content.imgtext.layoutKey = picture

# setup
# remove if condition and the static width
tt_content.image.20.1.sourceCollection {
   small.width >
   smallRetina.if >
   smallRetina.width >
}

Create a new Text Picture Element (textpic) and set a Image with a imagewidth "100".
Now go to the Frontend and in the HTML Sourcecode search for the <picture> Tag.

At the moment you should have something like this:

<picture>
   <!-- the small sourceCollection, is the same as the default image -->
   <source src="fileadmin/_processed_/csm_examplepic1_small.jpg" media="(max-device-width: 600px)"/>
   <!-- the smallRetina sourceCollection, should have dimensions*2 of the default image but have the same dimensions as the default -->
   <source src="fileadmin/_processed_/csm_examplepic1_smallretina.jpg" media="(max-device-width: 600px) AND (min-resolution: 192dpi)"/>
   <!-- the default image source -->
   <img src="fileadmin/_processed_/csm_examplepic1_default.jpg" alt="">
</picture>

When you compare the generated images, you will see that they have all the same dimensions.

fileadmin/_processed_/csm_examplepic1_small.jpg (100x100)
fileadmin/_processed_/csm_examplepic1_smallRetina.jpg (100x100) // Wrong
fileadmin/_processed_/csm_examplepic1_default.jpg (100x100)

But we need this result:

fileadmin/_processed_/csm_examplepic1_small.jpg (100x100)
fileadmin/_processed_/csm_examplepic1_smallRetina.jpg (200x200) // Right
fileadmin/_processed_/csm_examplepic1_default.jpg (100x100)

#4

Updated by Gerrit Code Review about 7 years ago

  • Status changed from Needs Feedback to Under Review

Patch set 1 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/25077

#5

Updated by Gerrit Code Review about 7 years ago

Patch set 2 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/25077

#6

Updated by Gerrit Code Review about 7 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/25077

#7

Updated by Gerrit Code Review almost 7 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/25077

#8

Updated by Pascal Hinz almost 7 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
#9

Updated by Riccardo De Contardi about 3 years ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF