Skip to content

Commit

Permalink
[!!!][TASK] Replace TypoScript config aspectRatio.x and aspectRatio.y…
Browse files Browse the repository at this point in the history
… with width and height
  • Loading branch information
smichaelsen committed Sep 5, 2018
1 parent 35280a0 commit f8977fd
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 19 deletions.
6 changes: 3 additions & 3 deletions Classes/TcaUtility.php
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ protected static function createCropVariantsTcaForField(array $fieldConfig)
$cropVariantsTca[$cropVariantKey] = [
'title' => $cropVariantTitle,
'allowedAspectRatios' => [
$sizeConfig['aspectRatio']['x'] . ' x ' . $sizeConfig['aspectRatio']['y'] => [
'title' => $sizeConfig['aspectRatio']['x'] . ' x ' . $sizeConfig['aspectRatio']['y'],
'value' => $sizeConfig['aspectRatio']['x'] / $sizeConfig['aspectRatio']['y'],
$sizeConfig['width'] . ' x ' . $sizeConfig['height'] => [
'title' => $sizeConfig['width'] . ' x ' . $sizeConfig['height'],
'value' => $sizeConfig['width'] / $sizeConfig['height'],
],
],
];
Expand Down
8 changes: 4 additions & 4 deletions Classes/ViewHelpers/ResponsivePictureViewHelper.php
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ public function render(): string
foreach ($pixelDensities as $pixelDensity) {
$imageUri = $this->processImage(
$fileReference,
(int)round(($sizeConfiguration['aspectRatio']['x'] * $pixelDensity)),
(int)round(($sizeConfiguration['aspectRatio']['y'] * $pixelDensity)),
(int)round(($sizeConfiguration['width'] * $pixelDensity)),
(int)round(($sizeConfiguration['height'] * $pixelDensity)),
$cropVariants->getCropArea($cropVariantId)
);
$srcset[] = $imageUri . ' ' . $pixelDensity . 'x';
Expand All @@ -85,8 +85,8 @@ public function render(): string
$sizeConfiguration = $this->getSizeConfiguration($fileReference, $lastCropVariantId);
$defaultImageUri = $imageUri = $this->processImage(
$fileReference,
(int)$sizeConfiguration['aspectRatio']['x'],
(int)$sizeConfiguration['aspectRatio']['y']
(int)$sizeConfiguration['width'],
(int)$sizeConfiguration['height']
);
$imgTitle = $fileReference->getTitle() ? 'title="' . htmlspecialchars($fileReference->getTitle()) . '"' : '';
$sourceMarkups[] = sprintf(
Expand Down
24 changes: 12 additions & 12 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ This package uses the powerful responsive image cropping capabilities of TYPO3 a

![Image Cropping](doc/image-cropping.png?raw=true "Image Cropping")

TYPO3 8.7 comes with the powerful feature of `cropVariant`s, which let's you define use cases for your image including `allowedAspectRatios` and optionally `coverAreas`.
TYPO3 8.7 comes with the powerful feature of `cropVariant`s, which lets you define use cases for your image including `allowedAspectRatios` and optionally `coverAreas`.
This package simplifies the configuration and frontend rendering of this feature.

## Configuration:

The configuration happens completeley in TypoScript. This example configures 3 **variants** of the `tx_news_domain_model_news.fal_media` field,
The configuration happens completely in TypoScript. This example configures 3 **variants** of the `tx_news_domain_model_news.fal_media` field,
that are *detail*, *featured* and *teaser*. The use case is we want to use the same image in 3 different views with different cropping. Each
variant can also have different **sizes**. The *detail* variant for example is available in the sizes *big* (for tablet and desktop
viewport sizes) and *phone*.
Expand Down Expand Up @@ -41,15 +41,15 @@ package.Smichaelsen\MelonImages {
big {
title = Detail Tablet & Desktop
breakpoints = tablet,desktop
aspectRatio.x = 943
aspectRatio.y = 419
width = 943
height = 419
}
phone {
# the title is omitted here and defaults to "Detail Phone" (derived from the name of the variant and the size)
breakpoints = phone
aspectRatio.x = 480
aspectRatio.y = 320
width = 480
height = 320
}
}
}
Expand All @@ -58,23 +58,23 @@ package.Smichaelsen\MelonImages {
sizes {
big {
breakpoints = tablet,desktop
aspectRatio.x = 748
aspectRatio.y = 420
width = 748
height = 420
}
phone {
breakpoints = phone
aspectRatio.x = 480
aspectRatio.y = 400
width = 480
height = 400
}
}
}
teaser {
sizes {
all {
aspectRatio.x = 480
aspectRatio.y = 420
width = 480
height = 420
coverAreas.1 {
x = 0.3
width = 0.7
Expand Down

0 comments on commit f8977fd

Please sign in to comment.