--- title: "Tutorials: Image editing in TYPO3 – this is toujou." url: "https://www.toujou.com/service/tutorials/page-content/image-editing/" description: One image, countless forms of representation. Find out how to control and edit image crops for different devices in this TYPO3 tutorial. date: 2019-03-14 modified: 2022-09-27 --- # Tutorials: Image editing in TYPO3 – this is toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/service/tutorials/) 4. [Content editing](https://www.toujou.de/service/tutorials/page-content/) 5. [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) Image editing ============= After inserting a content element with an image, you can add an image description (image metadata) and use the editor to set the image’s focus for different formats. [Manual](#c1004874) [Video tutorials](#c1004886) [Pieces of advice](#c1004888) --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/CVz6IB-0E2LDO3FlMWpcr8fOPs5o_l1zBXFYiBZUCDQ/q:85/c:1440:808.98876404494:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzFfZWRpdG9yX29lZmZuZW5fdjlfRU5fMjFkZjQ1MDA3MQ:t/cb:d71387ac398271b074e4e31c59d7a85ccc95fcec/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzFfZWRpdG9yX29lZmZuZW5fdjlfRU4ucG5n) ](https://www.toujou.de/_assets/processed/6_eFoqSnHStZKgBxhK3cYfy4GHK8EoV9mQhZpo1Sgpk/q:85/w:1024/h:640/fn:Y3NtXzFfZWRpdG9yX29lZmZuZW5fdjlfRU5fOWViYWE5ZDEzMw:t/cb:d71387ac398271b074e4e31c59d7a85ccc95fcec/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzFfZWRpdG9yX29lZmZuZW5fdjlfRU4ucG5n) ### Working with the image editor/set caption - For the following explanations and video tutorials, the content element plays a minor role as long as an image file can be added to it. - In the *description (caption)*, tick **Set element specific value (No default)** to be able to insert a caption in the mask. - By clicking the *Open Editor* button, you open the image editor. - **Save** all settings after editing. [ ![](https://www.toujou.de/_assets/processed/OZ6aXrHHQnrJCAqa74jg-ZE2zFNgptgfGoqfV59HPDs/q:85/c:3301:1854.4943820225:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzJfSW1hZ2VfcmF0aW9zXzA4NDU5ZTQzZjQ:t/cb:473d9d75554fb7002572d0bb27e81f07c0f45234/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzJfSW1hZ2VfcmF0aW9zLnBuZw) ](https://www.toujou.de/_assets/processed/BklNatLP224ipOK_517ZMmv_NT9lGlfKHC-efzNfRw8/q:85/w:1024/h:620/fn:Y3NtXzJfSW1hZ2VfcmF0aW9zXzI0MmIyMWFlZGU:t/cb:473d9d75554fb7002572d0bb27e81f07c0f45234/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzJfSW1hZ2VfcmF0aW9zLnBuZw) ### Adjust image detail and focus - *Aspect ratio* indicates which aspect ratio you can preset (16:9, 1:1, 3:2, 4:3, Free), select one. - If you select a preset aspect ratio, the picture box is automatically set. Position the picture section with the cursor cross. - If you customize the image, drag the colored box to the desired size with the cursor arrow in the corners . Position the picture section with the cursor cross. - Use the **Reset** button to reset the settings to default or the last set status. [ ![](https://www.toujou.de/_assets/processed/UcI5X03k7HQNoAXv-PGzfozDIA9O1koIAKGUDMm2Huk/q:85/c:2470:1387.6404494382:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzNfcmVzcG9uc2l2ZV9kZXNpZ25zX2Q1ODM3MjVmNTE:t/cb:812c6093bd584249b29c8d6374eb524f4e2658c9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzNfcmVzcG9uc2l2ZV9kZXNpZ25zLnBuZw) ](https://www.toujou.de/_assets/processed/Vu1FDoQWKgbhOwMJzJIJoM7nKLPh93wwm__ndyF9aWY/q:85/w:1024/h:628/fn:Y3NtXzNfcmVzcG9uc2l2ZV9kZXNpZ25zXzkyODM1MTNiZGY:t/cb:812c6093bd584249b29c8d6374eb524f4e2658c9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvSW1hZ2VfRWRpdG9yL0VOLzNfcmVzcG9uc2l2ZV9kZXNpZ25zLnBuZw) ### Output channels - With *Mobile*, *Tablet*, *Desktop* and *Widescreen*, four output channels can be edited. - Set the image detail and focus for each output channel one after the other. - Save the settings with the button **Accept** or discard the changes with the button **Cancel**. --- Video tutorials via jweiland.net (German!) -------------------------------------------- All the video tutorials from jweiland.net are available only in German. Please don’t hesitate to contact the toujou support team if you need us to translate any of the information from the video tutorials or if you need us to further explain any of the topics discussed. We are constantly looking for detailed tutorial videos in English for our international clients and hope to find video tutorials as detailed as the videos from jweiland.net. Please [let us know](mailto:service@toujou.de) if you find any so we can add them to our resources. ### Manage metadata for files Manage the meta data for your files, Search Engine Optimization, and accessibility with "alternative text". **Duration**: 09'09" [Watch at jweiland.net ↗](https://vimeo.com/229821222) ### Change the image section Here, the functions for default video settings are explained. **Duration**: 4'08" [Watch at jweiland.net ↗](https://vimeo.com/230131206) --- Pieces of advice ---------------- toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website. At first these settings may seem a little over-detailed. However, these image format settings are designed to ensure that your images appear correctly on all devices because not every visitor to your website has the full format of a widescreen. With so many different sizes of screens you need to play close attention to how images will look on smaller screens and what information may need to be displayed if the image isn’t strong enough. The effort will be worth it since many websites don’t pay close enough attention to image presentation. Paying attention to this will separate you from your competitors. --- ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)