381 lines
17 KiB
HTML
381 lines
17 KiB
HTML
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
|
|
|
<h2>True type font tests</h2>
|
|
<f:be.infobox title="FreeType2 hint" state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}">
|
|
<p>If the two images below do not look the same, please check your FreeType 2 module.</p>
|
|
</f:be.infobox>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingTrueType"></div>
|
|
|
|
<h2>Convert image formats to jpg</h2>
|
|
<p>
|
|
This verifies that your ImageMagick / GraphicsMagick installation is able to read the default
|
|
formats <code>jpg</code>, <code>gif</code>, <code>png</code>, <code>tif</code>, <code>pdf</code> and
|
|
<code>ai</code>, <code>webp</code> and <code>avif</code>.
|
|
The tool <code>identify</code> is used to read the pixel dimensions of non-web formats and 'convert' is used to
|
|
read the image and convert it to <code>jpg</code>.
|
|
</p>
|
|
<f:be.infobox title="Dark images" state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}">
|
|
<p>
|
|
In case the images appear remarkably darker than the reference images,
|
|
try to set<br/> <code>$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_colorspace'] = 'sRGB';</code>.
|
|
</p>
|
|
</f:be.infobox>
|
|
|
|
<h3>Read jpg</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadJpg"></div>
|
|
|
|
<h3>Read gif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadGif"></div>
|
|
|
|
<h3>Read png</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadPng"></div>
|
|
|
|
<h3>Read webp</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadWebp"></div>
|
|
|
|
<h3>Read avif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadAvif"></div>
|
|
|
|
<h3>Read tif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadTif"></div>
|
|
|
|
<h3>Read pdf</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadPdf"></div>
|
|
|
|
<h3>Read ai</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadAi"></div>
|
|
|
|
<h2>Writing gif, png, webp, avif</h2>
|
|
<p>
|
|
This verifies that ImageMagick / GraphicsMagick is able to write GIF, PNG, WEBP and AVIF files.
|
|
</p>
|
|
|
|
<h3>Write gif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWriteGif"></div>
|
|
|
|
<h3>Write png</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWritePng"></div>
|
|
|
|
<h3>Write webp</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWriteWebp"></div>
|
|
|
|
<h3>Write avif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWriteAvif"></div>
|
|
|
|
<h2>Scaling images</h2>
|
|
<p>
|
|
This shows how ImageMagick / GraphicsMagick reacts when scaling transparent GIF and PNG files.
|
|
</p>
|
|
|
|
<h3>gif to gif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGifToGif"></div>
|
|
|
|
<h3>png to png</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingPngToPng"></div>
|
|
|
|
<h3>gif to jpg</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGifToJpg"></div>
|
|
|
|
<h3>transparent svg to webp</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingSvgToWebp"></div>
|
|
|
|
<h3>transparent svg to png</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingSvgToPng"></div>
|
|
|
|
<h2>Special image formats</h2>
|
|
<p>
|
|
This shows how ImageMagick /GraphicsMagicks reacts when converting to image formats like WEBP and AVIF.
|
|
</p>
|
|
|
|
<h3>jpg to webp</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingJpgToWebp"></div>
|
|
|
|
<h3>jpg to avif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingJpgToAvif"></div>
|
|
|
|
<h3>png to webp</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingPngToWebp"></div>
|
|
|
|
<h3>png to avif</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingPngToAvif"></div>
|
|
|
|
<h2>Combining images</h2>
|
|
<p>
|
|
This verifies that the ImageMagick / GraphicsMagick tools, <code>combine</code>, <code>composite</code>, are able to
|
|
combine two images through a grayscale mask.
|
|
</p>
|
|
|
|
<h3>Combine using a GIF mask with only black and white</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingCombineGifMask"></div>
|
|
|
|
<h3>Combine using a JPG mask with graylevels</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingCombineJpgMask"></div>
|
|
|
|
<h2>GDlib</h2>
|
|
<p>
|
|
This verifies that the GDLib installation works properly.
|
|
</p>
|
|
|
|
<h3>Create simple image</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibSimple"></div>
|
|
|
|
<h3>Create image with box from file</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibFromFile"></div>
|
|
|
|
<h3>Create webp image with box from webp file</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibFromFileToWebp"></div>
|
|
|
|
<h3>Create avif image with box from file</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibFromFileToAvif"></div>
|
|
|
|
<h3>Render text with TrueType font</h3>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibRenderText"></div>
|
|
|
|
<h3>Render text with TrueType font using 'niceText' option</h3>
|
|
<f:be.infobox title="Note on 'niceText'" state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}">
|
|
<p>
|
|
'niceText' is a concept that tries to improve the antialiasing of the rendered type by actually
|
|
rendering the textstring in double size on a black/white mask, downscaling the mask and masking
|
|
the text onto the image through this mask. This involves ImageMagick / GraphicsMagick 'combine'/'composite' and 'convert'.
|
|
</p>
|
|
</f:be.infobox>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibNiceText"></div>
|
|
|
|
<h3>Render 'niceText' with a shadow under</h3>
|
|
<f:be.infobox title="Note on 'shadow'" state="{f:constant(name: 'TYPO3\CMS\Core\Type\ContextualFeedbackSeverity::INFO')}">
|
|
<p>
|
|
This test makes sense only if the above test had a correct output. But if so, you may not see
|
|
a soft drop-shadow from the third text string as you should. In that case you are most likely using
|
|
ImageMagick 5 and should set the flag <code>$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_effects']</code>.
|
|
</p>
|
|
</f:be.infobox>
|
|
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibNiceTextShadow"></div>
|
|
|
|
<div class="panel-group mb-0" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel panel-default">
|
|
<h2 class="panel-heading" role="tab">
|
|
<div class="panel-heading-row">
|
|
<button
|
|
type="button"
|
|
class="panel-button collapsed"
|
|
data-bs-toggle="collapse"
|
|
data-bs-parent="#accordion"
|
|
data-bs-target="#collapseConfiguration"
|
|
aria-controls="collapseConfiguration"
|
|
aria-expanded="false"
|
|
id="headingConfiguration"
|
|
>
|
|
<div class="panel-title">
|
|
<strong>Current configuration</strong>
|
|
</div>
|
|
<span class="caret"></span>
|
|
</button>
|
|
</div>
|
|
</h2>
|
|
<div id="collapseConfiguration" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingConfiguration">
|
|
<div class="table-fit">
|
|
<table class="table table-striped">
|
|
<tr>
|
|
<td>{imageProcessingProcessor} enabled:</td>
|
|
<td>{f:if(condition:imageProcessingEnabled, then:'Yes', else:'No')}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ImageMagick or GraphicsMagick:</td>
|
|
<td>{imageProcessingProcessor}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{imageProcessingProcessor} path:</td>
|
|
<td>{imageProcessingPath}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{imageProcessingProcessor} version:</td>
|
|
<td>{imageProcessingVersion}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{imageProcessingProcessor} effects enabled:</td>
|
|
<td>{imageProcessingEffects} <span>(Blurring/Sharpening with {imageProcessingProcessor})</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>GDLib enabled:</td>
|
|
<td>{f:if(condition:imageProcessingGdlibEnabled, then:'Yes', else:'No')}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GDLib using PNG:</td>
|
|
<td>{f:if(condition:imageProcessingGdlibPng, then:'Yes', else:'No')}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>File Formats:</td>
|
|
<td>{imageProcessingFileFormats}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<h2 class="panel-heading" role="tab">
|
|
<div class="panel-heading-row">
|
|
<button
|
|
type="button"
|
|
class="panel-button collapsed"
|
|
data-bs-toggle="collapse"
|
|
data-bs-parent="#accordion"
|
|
data-bs-target="#collapseVerify"
|
|
aria-controls="collapseVerify"
|
|
aria-expanded="false"
|
|
id="headingVerify"
|
|
>
|
|
<div class="panel-title">
|
|
<strong>Verify test results</strong>
|
|
</div>
|
|
<span class="caret"></span>
|
|
</button>
|
|
</div>
|
|
</h2>
|
|
<div id="collapseVerify" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingVerify">
|
|
<div class="panel-body">
|
|
<h3>Verify test results</h3>
|
|
<p>
|
|
This page performs image processing and displays the result. It's a thorough check
|
|
that everything you've configured is working correctly.
|
|
</p>
|
|
<p>
|
|
It's quite simple to verify your installation; Just look down the page, the images
|
|
in pairs should look like each other. If some images are not alike, something is
|
|
wrong. You may also notice warnings and errors if this tool found signs of any problems.
|
|
</p>
|
|
<p>
|
|
The image to the left is the reference image (how it should be) and to the right
|
|
the image made by your server.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<h2 class="panel-heading" role="tab">
|
|
<div class="panel-heading-row">
|
|
<button
|
|
type="button"
|
|
class="panel-button collapsed"
|
|
data-bs-toggle="collapse"
|
|
data-bs-parent="#accordion"
|
|
data-bs-target="#collapseAbout"
|
|
aria-controls="collapseAbout"
|
|
aria-expanded="false"
|
|
id="headingAbout"
|
|
>
|
|
<div class="panel-title">
|
|
<strong>About image handling</strong>
|
|
</div>
|
|
<span class="caret"></span>
|
|
</button>
|
|
</div>
|
|
</h2>
|
|
<div id="collapseAbout" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAbout">
|
|
<div class="panel-body">
|
|
<p>
|
|
TYPO3 is known for its ability to process images on the server.
|
|
</p>
|
|
<p>
|
|
In the backend interface (TBE) thumbnails are automatically generated
|
|
as well as icons, menu items and pane tabs (by GDLib).
|
|
In the frontend all kinds of graphical elements are processed. Typically, images are
|
|
scaled down to fit the pages (by ImageMagick/GraphicsMagick) and menu items, graphical headers and
|
|
such are generated automatically (by GDLib + ImageMagick/GraphicsMagick). In addition, TYPO3 is able
|
|
to handle many file formats (thanks to ImageMagick/GraphicsMagick), for example TIF, BMP, PCX, TGA,
|
|
AI and PDF in addition to the standard web formats; JPG, GIF, PNG. Additional image formats like WEBP
|
|
and AVIF are available depending on installed codecs on the system.
|
|
</p>
|
|
<p>
|
|
In order to do this, TYPO3 uses two sets of tools:
|
|
</p>
|
|
<strong>
|
|
ImageMagick / GraphicsMagick:
|
|
</strong>
|
|
<p>
|
|
For conversion of non-web formats to web formats, combining images with alpha-masks,
|
|
performing image-effects like blurring and sharpening.
|
|
</p>
|
|
<p>
|
|
ImageMagick is a collection of external programs on the server called by the exec()
|
|
function in PHP. TYPO3 uses three of these, namely 'convert' (converting file formats,
|
|
scaling, effects), 'combine'/'composite' (combining images with masks) and 'identify'
|
|
(returns image information). GraphicsMagick is an alternative to ImageMagick and can
|
|
be enabled by setting [GFX][processor] to 'GraphicsMagick'. This is recommended and enabled
|
|
by default. Because ImageMagick and GraphicsMagick are external programs, a requirement
|
|
must be met: The programs must be installed on the server and working. ImageMagick is
|
|
available for both Windows and Unix. The current version is 6+. ImageMagick homepage is
|
|
at <a href="https://www.imagemagick.org/">https://www.imagemagick.org/</a>
|
|
</p>
|
|
<strong>GDLib:</strong>
|
|
<p>
|
|
For drawing boxes and rendering text on images with TrueType fonts. Also used for
|
|
icons, menuitems and generally the TypoScript GIFBUILDER object is based on GDlib,
|
|
but extensively utilizing ImageMagick to process intermediate results.
|
|
</p>
|
|
<p>
|
|
GDLib is accessed through internal functions in PHP, you'll need a version of PHP
|
|
with GDLib compiled in. Also in order to use TrueType fonts with GDLib you'll
|
|
need FreeType compiled in as well.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<h2 class="panel-heading" role="tab">
|
|
<div class="panel-heading-row">
|
|
<button
|
|
type="button"
|
|
class="panel-button collapsed"
|
|
data-bs-toggle="collapse"
|
|
data-bs-parent="#accordion"
|
|
data-bs-target="#collapseTestImages"
|
|
aria-controls="collapseTestImages"
|
|
aria-expanded="false"
|
|
id="headingTestImages"
|
|
>
|
|
<div class="panel-title">
|
|
<strong>About test images</strong>
|
|
</div>
|
|
<span class="caret"></span>
|
|
</button>
|
|
</div>
|
|
</h2>
|
|
<div id="collapseTestImages" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTestImages">
|
|
<div class="panel-body">
|
|
<p>
|
|
Test-Image by Rotkaeppchen68 (in de.wikipedia) [<a href="http://www.gnu.org/copyleft/fdl.html">GFDL</a> or
|
|
<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>],
|
|
<a href="https://commons.wikimedia.org/wiki/File%3AFuBK-Testbild.png">via Wikimedia Commons</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="t3js-imageProcessing-twinImage-template">
|
|
<div class="t3-install-displaytwinimageimages t3js-imageProcessing-images" hidden>
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">
|
|
<h3>Reference</h3>
|
|
<div class="bg-transparent-emulation">
|
|
<img class="reference"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<h3>Your system</h3>
|
|
<div class="bg-transparent-emulation">
|
|
<img class="result"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="t3-install-displaytwinimagetextarea t3js-imageProcessing-command" hidden>
|
|
<pre class="language-bash"><code class="language-bash t3js-imageProcessing-command-text"></code></pre>
|
|
</div>
|
|
</template>
|
|
|
|
</html>
|