Technical assignment: Integration of Cloudinary with HEIC support, limits of 15MB and total WebP. Project: Bulletin board on the Tamaranga v2 engine. Goal: To transfer the logic of uploading, processing, and displaying user photos to the Cloudinary cloud service. This is necessary to unload the server, support the HEIC format from iPhone, bypass old engine limits, and speed up the site using the WebP format [link]. Modifications are performed locally in the frontend and theming templates, without interfering with the backend core. 1. Requirements for uploading and validation (Frontend) UI replacement: Replace the standard Tamaranga uploader with the official Cloudinary Upload Widget JavaScript widget. Widget functionality: Inside the widget, the following should be active: loading indicator (loader), preview of selected photos, and an adaptive cropping tool (cropper), fully controlled by fingers on smartphones. File validation (Restrictions): Set strict limits directly within the widget: Minimum resolution of the original photo: 600px on the shorter side. Maximum resolution of the original photo: 8000px. Maximum file size: 15MB. If limits are violated, the widget should display a clear error message to the user in Russian. 2. Optimization of cloud storage Incoming Transformation: Set up automatic compression of originals upon incoming flow in the Cloudinary personal account. All uploaded files (including heavy photos up to 15MB and HEIC format) should be automatically optimized and scaled on the cloud side to a maximum working resolution of 1920px (original/zoom size) to save disk space on the free plan. 3. Total conversion to WebP and new preview grid In the announcement output templates (on the main page, in categories, on the announcement page itself), replace the generation of old local images with dynamic Cloudinary URL links. All images should be generated on the fly with mandatory use of the f_auto flag (automatic conversion to WebP/AVIF for modern browsers) and the q_auto flag (automatic smart quality compression without visible loss of clarity) [link]. New preview sizes (instead of old s98/m180): s200 (small preview): link of the form .../w_200,h_200,c_fill,f_auto,q_auto/... (strict square 200x200px with center cropping). m640 (medium preview): link of the form .../w_640,c_limit,f_auto,q_auto/... (proportional reduction to 640px in width). view1280 (main photo): link of the form .../w_1280,c_limit,f_auto,q_auto/.... zoom1920 (enlargement): link of the form .../w_1920,c_limit,f_auto,q_auto/.... original1920 (original): link of the form .../w_1920,c_limit,f_auto,q_auto/.... 4. Integration with the Tamaranga v2 backend The text URL links to the uploaded images received from Cloudinary should be passed to the standard form fields of Tamaranga, which the engine already knows how to accept. Implement a substitution so that the backend records only the text path (URL string) in the database. Backward compatibility: Old announcements uploaded before this modification should not break. They continue to display old local previews from server folders
For clarity improvement (Retina and Premium): Add the dpr_auto parameter to the output links of all images on the site, so that on Retina screens (iPhone, modern smartphones, and laptops) previews are automatically displayed in higher clarity [link]. For Premium announcements and the main list of announcements (announcement search) and the gallery inside the product card, use the maximum quality mode q_auto:best [link], and also apply the adaptive sharpness enhancement filter e_sharpen:50 to visually highlight them against the background of the regular list. For standard announcements in the list, keep the basic mode q_auto (or q_auto:good) [link].
