Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modified Tests for additional height parameter #50

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Modified Tests for additional height parameter #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
368991c
Support for min/maxHeight added
naturefund-falk May 23, 2019
abd4d99
Modified Tests for additional height parameter
naturefund-falk Jun 5, 2019
03a06c1
Fixes for linter and phpunit failures
naturefund-falk Jun 5, 2019
4326506
min/max-Width/Height only for srcset
naturefund-falk Jun 21, 2019
e68beea
Merge branch 'feature/minMaxHeight'
naturefund-falk Jun 21, 2019
90a217a
Removed merge conflicts
naturefund-falk Jun 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions Classes/Utility/ResponsiveImagesUtility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ public function createImageTagWithSrcset(

// Use width of fallback image as reference for relative sizes (1x, 2x...)
$referenceWidth = $fallbackImage->getProperty('width');
$referenceHeight = $fallbackImage->getProperty('height');

// if lazyload enabled add data- prefix
$attributePrefix = $lazyload ? 'data-' : '';
Expand All @@ -97,7 +98,7 @@ public function createImageTagWithSrcset(
}

// Generate different image sizes for srcset attribute
$srcsetImages = $this->generateSrcsetImages($originalImage, $referenceWidth, $srcset, $cropArea, $absoluteUri);
$srcsetImages = $this->generateSrcsetImages($originalImage, $referenceWidth, $referenceHeight, $srcset, $cropArea, $absoluteUri);
$srcsetMode = substr(key($srcsetImages), -1); // x or w

// Add fallback image to source options
Expand All @@ -114,7 +115,7 @@ public function createImageTagWithSrcset(

// Provide image dimensions to be consistent with TYPO3 core behavior
$tag->addAttribute('width', $referenceWidth);
$tag->addAttribute('height', $fallbackImage->getProperty('height'));
$tag->addAttribute('height', $referenceHeight);

// Add metadata to image tag
$this->addMetadataToImageTag($tag, $originalImage, $fallbackImage, $focusArea);
Expand Down Expand Up @@ -170,8 +171,9 @@ public function createPictureTag(
// Normalize breakpoint configuration
$breakpoints = $this->normalizeImageBreakpoints($breakpoints);

// Use width of fallback image as reference for relative sizes (1x, 2x...)
// Use width and height of fallback image as reference for relative sizes (1x, 2x...)
$referenceWidth = $fallbackImage->getProperty('width');
$referenceHeight = $fallbackImage->getProperty('height');

// if lazyload enabled add data- prefix
$attributePrefix = $lazyload ? 'data-' : '';
Expand All @@ -184,6 +186,7 @@ public function createPictureTag(
$srcset = $this->generateSrcsetImages(
$originalImage,
$referenceWidth,
0,
$lastBreakpoint['srcset'],
$cropArea,
$absoluteUri
Expand Down Expand Up @@ -225,6 +228,7 @@ public function createPictureTag(
$sourceTag = $this->createPictureSourceTag(
$originalImage,
$referenceWidth,
0,
$breakpoint['srcset'],
$breakpoint['media'],
$breakpoint['sizes'],
Expand All @@ -248,6 +252,7 @@ public function createPictureTag(
*
* @param FileInterface $originalImage
* @param int $defaultWidth
* @param int $defaultHeight
* @param array|string $srcset
* @param string $mediaQuery
* @param string $sizesQuery
Expand All @@ -260,6 +265,7 @@ public function createPictureTag(
public function createPictureSourceTag(
FileInterface $originalImage,
int $defaultWidth,
int $defaultHeight,
$srcset,
string $mediaQuery = '',
string $sizesQuery = '',
Expand All @@ -273,7 +279,7 @@ public function createPictureSourceTag(
$attributePrefix = $lazyload ? 'data-' : '';

// Generate different image sizes for srcset attribute
$srcsetImages = $this->generateSrcsetImages($originalImage, $defaultWidth, $srcset, $cropArea, $absoluteUri);
$srcsetImages = $this->generateSrcsetImages($originalImage, $defaultWidth, $defaultHeight, $srcset, $cropArea, $absoluteUri);
$srcsetMode = substr(key($srcsetImages), -1); // x or w

// Create source tag for this breakpoint
Expand Down Expand Up @@ -377,6 +383,7 @@ public function addMetadataToImageTag(
*
* @param FileInterface $image
* @param int $defaultWidth
* @param int $defaultHeight - if value is zero, this value is not used and dimensions from cropping configuration are used
* @param array|string $srcset
* @param Area $cropArea
* @param bool $absoluteUri
Expand All @@ -386,6 +393,7 @@ public function addMetadataToImageTag(
public function generateSrcsetImages(
FileInterface $image,
int $defaultWidth,
int $defaultHeight,
$srcset,
Area $cropArea = null,
bool $absoluteUri = false
Expand All @@ -404,23 +412,36 @@ public function generateSrcsetImages(
switch ($srcsetMode) {
case 'x':
$candidateWidth = (int) ($defaultWidth * (float) substr($widthDescriptor, 0, -1));
if ($defaultHeight > 0) {
$candidateHeight = (int) ($defaultHeight * (float) substr($widthDescriptor, 0, -1));
}
break;

case 'w':
$candidateWidth = (int) substr($widthDescriptor, 0, -1);
if ($defaultHeight > 0) {
$candidateHeight = (int) ($candidateWidth * $defaultHeight / $defaultWidth + 0.5);
}
break;

default:
$candidateWidth = (int) $widthDescriptor;
if ($defaultHeight > 0) {
$candidateHeight = (int) ($candidateWidth * $defaultHeight / $defaultWidth + 0.5);
}
$srcsetMode = 'w';
$widthDescriptor = $candidateWidth . 'w';
}

// Generate image
$processingInstructions = [
'width' => $candidateWidth,
'height' => $candidateHeight,
'crop' => $cropArea->isEmpty() ? null : $cropArea->makeAbsoluteBasedOnFile($image),
];
if ($defaultHeight > 0) {
$processingInstructions['height'] = $candidateHeight;
}
$processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);

// If processed file isn't as wide as it should be ([GFX][processor_allowUpscaling] set to false)
Expand Down
6 changes: 6 additions & 0 deletions Classes/ViewHelpers/ImageViewHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@ public function render()
if (!is_null($this->arguments['maxWidth'])) {
$processingInstructions['maxWidth'] = $this->arguments['maxWidth'];
}
if (!is_null($this->arguments['minHeight'])) {
$processingInstructions['minHeight'] = $this->arguments['minHeight'];
}
if (!is_null($this->arguments['maxHeight'])) {
$processingInstructions['maxHeight'] = $this->arguments['maxHeight'];
}
$fallbackImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);

if ($this->arguments['breakpoints']) {
Expand Down
24 changes: 16 additions & 8 deletions Tests/Unit/Utility/ResponsiveImagesUtility/HelpersTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,25 +120,28 @@ public function generatesSrcsetImagesProvider()
return [
// Test high dpi image srcset
'usingHighDpi' => [
$this->mockFileObject(['width' => 1000, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 1000, 'height' => 1000, 'extension' => 'jpg']),
400,
0,
['1x', '2x'],
null,
false,
['1x' => '/image-400.jpg', '2x' => '/image-800.jpg']
],
// Test responsive image srcset (widths in integers)
'usingResponsiveWidths' => [
$this->mockFileObject(['width' => 1000, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 1000, 'height' => 1000, 'extension' => 'jpg']),
400,
0,
[200, 400, 600],
null,
false,
['200w' => '/image-200.jpg', '400w' => '/image-400.jpg', '600w' => '/image-600.jpg']
],
// Test responsive image srcset (widths as strings)
'usingResponsiveWidthsAsStrings' => [
$this->mockFileObject(['width' => 1000, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 1000, 'height' => 1000, 'extension' => 'jpg']),
400,
400,
['200w', '400w', '600w'],
null,
Expand All @@ -147,7 +150,8 @@ public function generatesSrcsetImagesProvider()
],
// Test absolute urls
'requestingAbsoluteUrls' => [
$this->mockFileObject(['width' => 1000, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 1000, 'height' => 1000, 'extension' => 'jpg']),
400,
400,
['200w', '400w', '600w'],
null,
Expand All @@ -160,8 +164,9 @@ public function generatesSrcsetImagesProvider()
],
// Test srcset input as string
'usingSrcsetString' => [
$this->mockFileObject(['width' => 1000, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 1000, 'height' => 1000, 'extension' => 'jpg']),
400,
200,
'200, 400, 600',
null,
true,
Expand All @@ -172,8 +177,9 @@ public function generatesSrcsetImagesProvider()
]
],
'usingTooSmallImage' => [
$this->mockFileObject(['width' => 400, 'extension' => 'jpg']),
$this->mockFileObject(['width' => 400, 'height' => 400, 'extension' => 'jpg']),
400,
200,
'200, 300, 500',
null,
false,
Expand All @@ -185,8 +191,9 @@ public function generatesSrcsetImagesProvider()
],
// Test if special characters are kept in file name
'usingSpecialCharactersInFileName' => [
$this->mockFileObject(['name' => 'this/is a/filename@with-/special!charac,ters', 'width' => 400, 'extension' => 'jpg']),
$this->mockFileObject(['name' => 'this/is a/filename@with-/special!charac,ters', 'width' => 400, 'height' => 400, 'extension' => 'jpg']),
400,
200,
[200],
null,
false,
Expand All @@ -201,13 +208,14 @@ public function generatesSrcsetImagesProvider()
* @test
* @dataProvider generatesSrcsetImagesProvider
*/
public function generatesSrcsetImages($originalImage, $width, $srcsetConfig, $cropArea, $absoluteUri, $output)
public function generatesSrcsetImages($originalImage, $width, $height, $srcsetConfig, $cropArea, $absoluteUri, $output)
{
$this->assertEquals(
$output,
$this->utility->generateSrcsetImages(
$originalImage,
$width,
$height,
$srcsetConfig,
$cropArea,
$absoluteUri
Expand Down
7 changes: 7 additions & 0 deletions Tests/Unit/Utility/ResponsiveImagesUtility/PictureSourceTagTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ public function createPictureSourceTagProvider()
'usingEmptySrcset' => [
$this->mockFileObject(['width' => 2000, 'height' => 2000, 'extension' => 'jpg']),
1000,
0,
[],
'',
'',
Expand All @@ -22,6 +23,7 @@ public function createPictureSourceTagProvider()
'usingHighDpi' => [
$this->mockFileObject(['width' => 2000, 'height' => 2000, 'extension' => 'jpg']),
1000,
0,
['1x', '2x'],
'',
'',
Expand All @@ -33,6 +35,7 @@ public function createPictureSourceTagProvider()
'usingResponsiveWidths' => [
$this->mockFileObject(['width' => 2000, 'height' => 2000, 'extension' => 'jpg']),
1000,
0,
[400, 800],
'',
'',
Expand All @@ -44,6 +47,7 @@ public function createPictureSourceTagProvider()
'usingDynamicSizesQuery' => [
$this->mockFileObject(['width' => 2000, 'height' => 2000, 'extension' => 'jpg']),
1000,
0,
[400],
'media query',
'%d',
Expand All @@ -55,6 +59,7 @@ public function createPictureSourceTagProvider()
'requestingAbsoluteUrls' => [
$this->mockFileObject(['width' => 2000, 'height' => 2000, 'extension' => 'jpg']),
1000,
0,
['1x', '2x'],
'',
'',
Expand All @@ -72,6 +77,7 @@ public function createPictureSourceTagProvider()
public function createPictureSourceTag(
$image,
$defaultWidth,
$defaultHeight,
$srcset,
$mediaQuery,
$sizesQuery,
Expand All @@ -82,6 +88,7 @@ public function createPictureSourceTag(
$tag = $this->utility->createPictureSourceTag(
$image,
$defaultWidth,
$defaultHeight,
$srcset,
$mediaQuery,
$sizesQuery,
Expand Down