[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-content-how-to-perfectly-utilize-croppy":3},"\u003Cp>Croppy has many, great features to make your life as a web developer easier. The sheer amount of possibilities can be overwhelming, therefore, I have summed up the most important features and how to use it. Let's get started!\u003C\u002Fp>\u003Cp>The following things will be discussed in detail:\u003C\u002Fp>\u003Cul>\u003Cli>General functionalities (resolution groups, websites, users)\u003C\u002Fli>\u003Cli>Branding your cropper\u003C\u002Fli>\u003Cli>Output Locations\u003C\u002Fli>\u003Cli>Bulk-Upload\u003C\u002Fli>\u003C\u002Ful>\u003Cp>With utilizing these things, your workflows already are optimized and will be fastened by a lot.\u003C\u002Fp>\u003Chr>\u003Ch2 id=\"general-functionalities\">General Functionalities\u003C\u002Fh2>\u003Cp>As Croppy was specifically designed to make your life better, it has many features to improve your daily work. These features include resolution groups, quality settings for file formats and websites.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_smartphones_tvs_tablets_and_p_4695c074-7ae7-40a4-aee3-676919d737be.webp\" class=\"kg-image\" alt=\"an image that depicts various screen sizes like smartphones, tvs, tablets etc\" loading=\"lazy\" width=\"1154\" height=\"647\" srcset=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_smartphones_tvs_tablets_and_p_4695c074-7ae7-40a4-aee3-676919d737be.webp 600w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_smartphones_tvs_tablets_and_p_4695c074-7ae7-40a4-aee3-676919d737be.webp 1000w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_smartphones_tvs_tablets_and_p_4695c074-7ae7-40a4-aee3-676919d737be.webp 1154w\" sizes=\"(min-width: 720px) 720px\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Many devices result in many, different resolutions\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"resolution-groups\">Resolution Groups\u003C\u002Fh3>\u003Cp>Croppy utilizes resolution groups to preset specific aspect ratios and resolutions for various use cases, allowing for repeated use. Additionally, each resolution group offers the option to select a preferred MIME type, enabling automatic conversion of cropped images to the chosen format.\u003C\u002Fp>\u003Cp>When adding a resolution group, you can  enter a name and a display  name. The name of the group is the actual title of the group that you can see in the Admin-Interface of Croppy. The display name is the text that will be displayed when opening the Cropper itself.\u003C\u002Fp>\u003Cp>In addition to choosing a display name, you can also choose a MIME type, to which each cropped imaged will be converted, that was cropped with the resolution group. To make your life even easier, you can select quality settings for each supported resolution. Currently, Croppy supports \u003Cem>JPEG, PNG, HEIC\u002FHEIF, \u003C\u002Fem>\u003Ca href=\"\u002Fde-at\u002Fblog\u002Fwhat-is-avif\" rel=\"noreferrer\">\u003Cem>AVIF\u003C\u002Fem>\u003C\u002Fa>\u003Cem> and WEBP. \u003C\u002Fem>\u003C\u002Fp>\u003Cp>Each resolution group consists of at least one resolution preset, which represents the actual resolution that your images should hold (e.g. Full-HD 1920 x 1080 px). This way, you can enjoy full flexibility by specifying your individual requirements for each website.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_different_websites_765cdac9-ba5f-4d03-b014-f68c6bb6b023.webp\" class=\"kg-image\" alt=\"Various computer screens, each screen holds a website to display the variiety that is on the internet.\" loading=\"lazy\" width=\"1154\" height=\"647\" srcset=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_different_websites_765cdac9-ba5f-4d03-b014-f68c6bb6b023.webp 600w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_different_websites_765cdac9-ba5f-4d03-b014-f68c6bb6b023.webp 1000w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_different_websites_765cdac9-ba5f-4d03-b014-f68c6bb6b023.webp 1154w\" sizes=\"(min-width: 720px) 720px\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">A typical end user uses more than one device.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"websites\">Websites\u003C\u002Fh3>\u003Cp>After setting up your preferred resolution groups, you can already start cropping with the Image Cropper that is included in the admin panel. It holds every functionality of Croppy, but still holds two disadvantages: You cannot share it. (unless you share your username and password for the admin → which we do not recommend). There is no output location except for local download. This is the point where websites come up:\u003C\u002Fp>\u003Cp>Websites enable you to create standalone croppers, that utilize your predefined options (branding, resolution groups etc.) but still are individually configurable. Each website has its own name, website URL and pin to secure the cropper properly. To spice things up, you can add output locations (explained later in this blog), so that cropped images are uploaded directly to your favorite CMS-System. Your predefined resolutions can be added to each website, so you can decide which websites must fulfill which resolution requirements.\u003C\u002Fp>\u003Cp>As soon as your website is saved, you are ready to go and can share it with whoever you like. Just click on the \"Share\" button and you are ready to send it.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depticing_a_team_working_together_on_a__681aedee-27f4-4a35-8ae5-b6636542b516.webp\" class=\"kg-image\" alt=\"an image depicting various people that have cogs above them to symbolize creative working.\" loading=\"lazy\" width=\"550\" height=\"308\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Croppy assists you when working in a Team.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"users\">Users\u003C\u002Fh3>\u003Cp>No one likes to work alone, this is why we implemented rich multi-users functionality for Croppy. You can easily create new roles and assign each user his specific role. This helps you to split up work so you can focus on what's important.\u003C\u002Fp>\u003Chr>\u003Ch2 id=\"branding-your-cropper\">Branding your Cropper\u003C\u002Fh2>\u003Cp>To suit your needs even more, the cropping interface is completely customizable. You can upload your own logo and your preferred colors, the Cropper will adjust accordingly.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_displaying_brands_and_brand_awareness_68170700-9e02-4e34-8582-ce79e046d704.webp\" class=\"kg-image\" alt=\"an image showing various channels of social media to display brand awareness.\" loading=\"lazy\" width=\"550\" height=\"308\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Brand Awareness is very important.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"how\">How?\u003C\u002Fh3>\u003Cp>Just switch in the navigation to the \"Settings\" Tab. There you can define everything you need. Upload any  logo and select any primary, secondary, surface and background color you like. As soon as you save, every cropper is branded in your design. (If you changed your branding and your cropper still looks the same, try refreshing :)). \u003C\u002Fp>\u003Ch3 id=\"why-would-i-need-that\">Why would I need that?\u003C\u002Fh3>\u003Cp>Sure, for personal use this is only a gimmick to look and feel great. But for Agencies, branding your cropper enables them to pass every cropper on to their customers. The customers using the cropper have a look-and-feel as if the cropper was a product of the Agency they trust. This helps to build brand awareness and decreases the work load.\u003C\u002Fp>\u003Chr>\u003Ch2 id=\"output-locations\">Output Locations\u003C\u002Fh2>\u003Cp>Crop destinations are one of the core advantages of using Croppy for your projects. They enable you to directly upload any cropped image to various destinations like FTP and WordPress. But to use them effectively, there are a few things to consider.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_an_image_that_travels_to_a_se_2eb8f00c-6abd-4477-a393-1d0a68a5f4c4.webp\" class=\"kg-image\" alt=\"an image that shows informations that flow to various destinations around the world\" loading=\"lazy\" width=\"1154\" height=\"647\" srcset=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_an_image_that_travels_to_a_se_2eb8f00c-6abd-4477-a393-1d0a68a5f4c4.webp 600w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_an_image_that_travels_to_a_se_2eb8f00c-6abd-4477-a393-1d0a68a5f4c4.webp 1000w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_an_image_that_travels_to_a_se_2eb8f00c-6abd-4477-a393-1d0a68a5f4c4.webp 1154w\" sizes=\"(min-width: 720px) 720px\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Server locations can be all around the world.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"security-concerns\">Security Concerns?\u003C\u002Fh3>\u003Cp>Every output location requiring user data is fully encrypted in our database, with this encryption maintained at all times. By implementing this encryption, no one, including us, can access your personal data. We use advanced encryption algorithms and multiple security layers to ensure your data remains safe and intact.\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_a_strong_encryption_0fa5d943-3e07-47f3-a51d-85e9238286af.webp\" class=\"kg-image\" alt=\"an image showing a lock that protects systems\" loading=\"lazy\" width=\"1154\" height=\"647\" srcset=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_a_strong_encryption_0fa5d943-3e07-47f3-a51d-85e9238286af.webp 600w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_a_strong_encryption_0fa5d943-3e07-47f3-a51d-85e9238286af.webp 1000w, \u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_a_strong_encryption_0fa5d943-3e07-47f3-a51d-85e9238286af.webp 1154w\" sizes=\"(min-width: 720px) 720px\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Cybersecurity is an important topic.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"using-local-download\">Using \"Local Download\"\u003C\u002Fh3>\u003Cp>The standard option. Every cropped image will be downloaded directly onto your machine. No need to worry about anything, this output location works out of the box.\u003C\u002Fp>\u003Ch3 id=\"using-ftp\">Using \"FTP\"\u003C\u002Fh3>\u003Cp>Setting up FTP on Croppy is simple. While creating or editing a website, choose \"FTP-Upload\" as the output location. Enter your server URL, the directory for file uploads, and your username and password. Test the connection, and if successful, you can save the website. This ensures every cropped image is uploaded correctly.\u003C\u002Fp>\u003Ch3 id=\"using-wordpress\">Using \"WordPress\"\u003C\u002Fh3>\u003Cp>There are two ways to set up WordPress as output location. \u003C\u002Fp>\u003Cp>The easiest is to use our self-written \u003Ca href=\"https:\u002F\u002Fseadev-studios.atlassian.net\u002Fwiki\u002Fspaces\u002FCD\u002Fpages\u002F3051388929\u002FDownload+the+new+WordPress-Plugin\" rel=\"noreferrer\">WordPress-Plugin\u003C\u002Fa> that you simply install and click on connect to Croppy. You will be guided through each step. That's it, full power of Croppy directly on WordPress.\u003C\u002Fp>\u003Cp>The second way is entering your WordPress data manually. To do that, you need to create an application password for the user that you want Croppy to use (we recommend using a custom user for Croppy). After creating the credentials, simply copy and paste them onto the Croppy admin panel. Test the connection and you are ready to go. \u003C\u002Fp>\u003Cp>A detailed step-by-step guide can be \u003Ca href=\"https:\u002F\u002Fseadev-studios.atlassian.net\u002Fwiki\u002Fspaces\u002FCD\u002Fpages\u002F2960687366\u002FConnecting+to+Wordpress\" rel=\"noreferrer\">found here.\u003C\u002Fa>\u003C\u002Fp>\u003Chr>\u003Ch2 id=\"bulk-upload\">Bulk-Upload\u003C\u002Fh2>\u003Cp>Enabling users to upload and process an unlimited amount of images at the same time was one of the  most wished features to include into Croppy. We got you covered!\u003C\u002Fp>\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\u003Cimg src=\"\u002Fimages\u002Fblog\u002Fhow-to-perfectly-utilize-croppy-seadev_studios_an_image_depicting_bulk_upload_and_processing_of_c34b7ff7-46ec-4378-9fe4-23515227e5ed.webp\" class=\"kg-image\" alt=\"an image depicting bulk upload\" loading=\"lazy\" width=\"550\" height=\"308\">\u003Cfigcaption>\u003Cspan style=\"white-space: pre-wrap;\">Uploading hundreds of images is easier than ever.\u003C\u002Fspan>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>You can upload any number of images, in any size, and in any supported file format. Next, decide what you want to do with your cropped images. If an output location other than \"Local Download\" is configured, you can still select the local download option directly within the cropping interface. This provides full flexibility in managing your images. Once you've made your choice, the Cropper remembers it and applies the same process to each image.\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cstrong>Interested? \u003C\u002Fstrong>You can try it out for free \u003Ca href=\"https:\u002F\u002Fadmin.croppy.at\u002F\" rel=\"noreferrer\">here\u003C\u002Fa>!\u003Cbr>To be updated all the time, just sign up!\u003C\u002Fp>\u003Cp>\u003Cstrong>Thank you for reading, stay tuned.\u003C\u002Fstrong>\u003C\u002Fp>\u003Cdiv class=\"kg-card kg-signup-card kg-width-wide \" data-lexical-signup-form=\"\" style=\"background-color: #F0F0F0; display: none;\">\n            \n            \u003Cdiv class=\"kg-signup-card-content\">\n                \n                \u003Cdiv class=\"kg-signup-card-text \">\n                    \u003Ch2 class=\"kg-signup-card-heading\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">Sign up for SEADEV Studios Blog\u003C\u002Fspan>\u003C\u002Fh2>\n                    \u003Cp class=\"kg-signup-card-subheading\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">News, Updates, Learnings & Insights\u003C\u002Fspan>\u003C\u002Fp>\n                    \n        \u003Cform class=\"kg-signup-card-form\" data-members-form=\"signup\">\n            \n            \u003Cdiv class=\"kg-signup-card-fields\">\n                \u003Cinput class=\"kg-signup-card-input\" id=\"email\" data-members-email=\"\" type=\"email\" required=\"true\" placeholder=\"Your email\">\n                \u003Cbutton class=\"kg-signup-card-button kg-style-accent\" style=\"color: #FFFFFF;\" type=\"submit\">\n                    \u003Cspan class=\"kg-signup-card-button-default\">Subscribe\u003C\u002Fspan>\n                    \u003Cspan class=\"kg-signup-card-button-loading\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" height=\"24\" width=\"24\" viewBox=\"0 0 24 24\">\n        \u003Cg stroke-linecap=\"round\" stroke-width=\"2\" fill=\"currentColor\" stroke=\"none\" stroke-linejoin=\"round\" class=\"nc-icon-wrapper\">\n            \u003Cg class=\"nc-loop-dots-4-24-icon-o\">\n                \u003Ccircle cx=\"4\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n                \u003Ccircle cx=\"12\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n                \u003Ccircle cx=\"20\" cy=\"12\" r=\"3\">\u003C\u002Fcircle>\n            \u003C\u002Fg>\n            \u003Cstyle data-cap=\"butt\">\n                .nc-loop-dots-4-24-icon-o{--animation-duration:0.8s}\n                .nc-loop-dots-4-24-icon-o *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite}\n                .nc-loop-dots-4-24-icon-o :nth-child(1){transform-origin:4px 12px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)\u002F-2.666)}\n                .nc-loop-dots-4-24-icon-o :nth-child(2){transform-origin:12px 12px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)\u002F-5.333)}\n                .nc-loop-dots-4-24-icon-o :nth-child(3){transform-origin:20px 12px}\n                @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}\n            \u003C\u002Fstyle>\n        \u003C\u002Fg>\n    \u003C\u002Fsvg>\u003C\u002Fspan>\n                \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"kg-signup-card-success\" style=\"color: #000000;\">\n                Email sent! Check your inbox to complete your signup.\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"kg-signup-card-error\" style=\"color: #000000;\" data-members-error=\"\">\u003C\u002Fdiv>\n        \u003C\u002Fform>\n        \n                    \u003Cp class=\"kg-signup-card-disclaimer\" style=\"color: #000000;\">\u003Cspan style=\"white-space: pre-wrap;\">No spam. Unsubscribe anytime.\u003C\u002Fspan>\u003C\u002Fp>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>"]