diff --git a/Build/Screenshots/create-records.php b/Build/Screenshots/create-records.php index 957e0f1bb..8aca99aae 100644 --- a/Build/Screenshots/create-records.php +++ b/Build/Screenshots/create-records.php @@ -547,13 +547,29 @@ 'Backimage.jpg' => 'backimage.jpg', 'Logo.png' => 'overlay.png', 'Mask_i.png' => 'mask.png', + // The image that the shadow examples put a shadow under + 'Backimage.jpg' => 'image.jpg', ] as $source => $target ) { copy($documentation . 'Images/ThirdParty/GifbuilderExamples/' . $source, Environment::getPublicPath() . '/fileadmin/' . $target); } +// The background image of the first shadow example: white, with a gray +// shadow that fades out towards its right and bottom edges +$image = imagecreatetruecolor(320, 240); +imagefill($image, 0, 0, imagecolorallocate($image, 0xff, 0xff, 0xff)); +for ($i = 0; $i < 10; $i++) { + $gray = 0x99 + (int)((0xff - 0x99) * $i / 10); + imagerectangle($image, 10 + $i, 10 + $i, 319 - $i, 239 - $i, imagecolorallocate($image, $gray, $gray, $gray)); +} +imagefilledrectangle($image, 20, 20, 309, 229, imagecolorallocate($image, 0x99, 0x99, 0x99)); +imagepng($image, Environment::getPublicPath() . '/fileadmin/shadow.png'); $gifbuilderExamples = [ 'gifbuilderMask' => ['GIFBUILDER mask', 'myextension_gifbuildermask', '_maskingSemiTransparent', 'lib.test'], 'gifbuilderBoxes' => ['GIFBUILDER boxes', 'myextension_gifbuilderboxes', '_creatingSemiTransparent', 'lib.header'], + // Both define lib.shadowImage, which each content element copies, and + // which is cleared before the next snippet + 'gifbuilderShadow1' => ['GIFBUILDER shadow 1', 'myextension_gifbuildershadow1', '_variant1Setup', 'lib.shadowImage'], + 'gifbuilderShadow2' => ['GIFBUILDER shadow 2', 'myextension_gifbuildershadow2', '_variant2Setup', 'lib.shadowImage'], ]; foreach ($gifbuilderExamples as $key => [$title, $cType, $snippetName, $object]) { $dataHandler = $process(['pages' => ['NEW' . $key => [ @@ -570,9 +586,10 @@ 'tstamp' => time(), 'crdate' => time(), ]); - $setup .= "\n" . $snippet('Gifbuilder/_codesnippets/' . $snippetName . '.typoscript') . "tt_content.$cType < $object\n"; + $setup .= "\n$object >\n" . $snippet('Gifbuilder/_codesnippets/' . $snippetName . '.typoscript') . "tt_content.$cType < $object\n"; } file_put_contents(Environment::getConfigPath() . '/sites/data-processors/setup.typoscript', $setup); +file_put_contents(Environment::getConfigPath() . '/sites/data-processors/constants.typoscript', $snippet('Gifbuilder/_codesnippets/_variant2Constants.typoscript')); // The uids differ between TYPO3 versions, so screenshots.mjs reads them here GeneralUtility::mkdir_deep(Environment::getVarPath()); diff --git a/Build/Screenshots/screenshots.mjs b/Build/Screenshots/screenshots.mjs index 2cdeb7ae9..648cebbd6 100644 --- a/Build/Screenshots/screenshots.mjs +++ b/Build/Screenshots/screenshots.mjs @@ -395,6 +395,16 @@ const screenshots = { frontend: true, download: 'img', }, + 'Gifbuilder/GifbuilderShadow1': { + url: `${baseUrl}/data-processors/gifbuilder-shadow-1`, + frontend: true, + download: 'img', + }, + 'Gifbuilder/GifbuilderShadow2': { + url: `${baseUrl}/data-processors/gifbuilder-shadow-2`, + frontend: true, + download: 'img', + }, 'Page/FunctionMenuPageModule': { url: moduleUrl('web/layout', functionMenu), diff --git a/Documentation/Gifbuilder/Examples.rst b/Documentation/Gifbuilder/Examples.rst index f328c219b..8e8305907 100644 --- a/Documentation/Gifbuilder/Examples.rst +++ b/Documentation/Gifbuilder/Examples.rst @@ -223,8 +223,9 @@ Result Here a background image with a gradient has been "underlied" under the image: -.. figure:: /Images/ThirdParty/GifbuilderExamples/Typo3_shadow1.png - :alt: Variant 1 +.. figure:: /Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow1.jpg + :alt: The photo on a white background, with a gray shadow along its right + and bottom edges. Variant 1 @@ -243,9 +244,8 @@ on top of it. Constants ~~~~~~~~~ -.. code-block:: typoscript - - lib.shadowIntensity = #999999 +.. literalinclude:: _codesnippets/_variant2Constants.typoscript + :caption: EXT:my_sitepackage/Configuration/Sets/Main/constants.typoscript .. _gifbuilder-examples-creating-shadows-images-variant-2-setup: @@ -262,8 +262,9 @@ Result Here the result of the blur method. It looks quite good. -.. figure:: /Images/ThirdParty/GifbuilderExamples/Typo3_shadow2.png - :alt: Variant 2 +.. figure:: /Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow2.jpg + :alt: The photo on a white background, with a blurred gray shadow along + its right and bottom edges. Variant 2 diff --git a/Documentation/Gifbuilder/_codesnippets/_variant1Setup.typoscript b/Documentation/Gifbuilder/_codesnippets/_variant1Setup.typoscript index d807cc7d9..61755af50 100644 --- a/Documentation/Gifbuilder/_codesnippets/_variant1Setup.typoscript +++ b/Documentation/Gifbuilder/_codesnippets/_variant1Setup.typoscript @@ -1,40 +1,34 @@ -tt_content.image.20.1.file > -tt_content.image.20.1.file = GIFBUILDER -tt_content.image.20.1.file { - XY = [10.w],[10.h] +lib.shadowImage = IMAGE +lib.shadowImage { + file = GIFBUILDER + file { + XY = [10.w],[10.h] + format = jpg + quality = 88 - 10 = IMAGE - 10 { - # Background image - file { - import.override = fileadmin/shadow.png - maxW.field = imagewidth + 10 = IMAGE + 10 { + # Background image, as wide as the result + file = fileadmin/shadow.png + file.width = 320 } - } - # Scale background image - 15 = SCALE - 15 { - width = [10.w] - # Background Image is 20 pixel higher than scaled down "real" image - # Thus it should have "normal" height. - height = [20.h]+20 - } + # Scale background image + 15 = SCALE + 15 { + width = [10.w] + # Background image is 20 pixels higher than the real image + height = [20.h]+20 + } - # Put real image on top of it - 20 = IMAGE - 20 { - file { - import.current = 1 - width { - stdWrap = 1 - stdWrap.field = imagewidth - # The real image is made 20 pixels more narrow than set in the Content element - stdWrap.wrap = |-20 - prioriCalc = intval - } + # Put real image on top of it + 20 = IMAGE + 20 { + # The real image is 20 pixels narrower than the background image + file = fileadmin/image.jpg + file.width = 300 + # Inserted at offset 10,10 + offset = 10,10 } - # Inserted at offset 10,10 - offset = 10,10 } } diff --git a/Documentation/Gifbuilder/_codesnippets/_variant2Constants.typoscript b/Documentation/Gifbuilder/_codesnippets/_variant2Constants.typoscript new file mode 100644 index 000000000..3d62e6b42 --- /dev/null +++ b/Documentation/Gifbuilder/_codesnippets/_variant2Constants.typoscript @@ -0,0 +1 @@ +lib.shadowIntensity = #999999 diff --git a/Documentation/Gifbuilder/_codesnippets/_variant2Setup.typoscript b/Documentation/Gifbuilder/_codesnippets/_variant2Setup.typoscript index 80d18aae3..ef4879e18 100644 --- a/Documentation/Gifbuilder/_codesnippets/_variant2Setup.typoscript +++ b/Documentation/Gifbuilder/_codesnippets/_variant2Setup.typoscript @@ -1,41 +1,37 @@ -tt_content.image.20.1.file > -tt_content.image.20.1.file = GIFBUILDER -tt_content.image.20.1.file { - XY = [10.w]+20,[10.h]+20 - # The background color of the image/content - backColor = #ffffff +lib.shadowImage = IMAGE +lib.shadowImage { + file = GIFBUILDER + file { + XY = [10.w]+20,[10.h]+20 + format = jpg + quality = 88 + # The background color of the image/content + backColor = #ffffff - # Create a "dummy" image from the real image which is 20 pixel - # smaller than the set width. - 10 = IMAGE - 10 { - file { - import.current = 1 - width { - stdWrap = 1 - stdWrap.field = imagewidth - stdWrap.wrap = |-20 - prioriCalc = intval - } + # Create a "dummy" image from the real image + 10 = IMAGE + 10 { + file = fileadmin/image.jpg + file.width = 300 + offset = 10,10 } - offset = 10,10 - } - # Draw a black/gray box over the dummy image - 20 = BOX - 20 { - dimensions = 10,10,[10.w],[10.h] - # You have to set lib.shadowIntensity in your constants. - color = {$lib.shadowIntensity} - } + # Draw a black/gray box over the dummy image + 20 = BOX + 20 { + dimensions = 10,10,[10.w],[10.h] + # You have to set lib.shadowIntensity in your constants. + color = {$lib.shadowIntensity} + } - # Blur the black box - 30 = EFFECT - 30.value = blur=99 | - # Blur again if required (wider blurred edge/shadow) - # 31 < .30 + # Blur the black box + 30 = EFFECT + 30.value = blur=99 | + # Blur again if required (wider blurred edge/shadow) + # 31 < .30 - # Put the image on top again at a slightly more left top position. - 40 < .10 - 40.offset = 5,5 + # Put the image on top again at a slightly more left top position. + 40 < .10 + 40.offset = 5,5 + } } diff --git a/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow1.jpg b/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow1.jpg new file mode 100644 index 000000000..62f6f31ec Binary files /dev/null and b/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow1.jpg differ diff --git a/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow2.jpg b/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow2.jpg new file mode 100644 index 000000000..1fc74e305 Binary files /dev/null and b/Documentation/Images/GeneratedScreenshots/Gifbuilder/GifbuilderShadow2.jpg differ diff --git a/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow1.png b/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow1.png deleted file mode 100644 index 78be2f9eb..000000000 Binary files a/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow1.png and /dev/null differ diff --git a/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow2.png b/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow2.png deleted file mode 100644 index 8d5c671f6..000000000 Binary files a/Documentation/Images/ThirdParty/GifbuilderExamples/Typo3_shadow2.png and /dev/null differ