michaelschal
ed77f30c96
Add camera capture functionality for media uploads
...
Adds a camera icon button to the media upload component, enabling users to capture photos/videos directly using their device's camera. This involves integrating an input element for camera capture and a handler function to process the captured media, triggering the upload mutation. The existing "Browse" button is now complemented by this new camera functionality, enhancing the media uploading experience.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/fGL9Pd7
2025-10-14 08:00:51 +00:00
michaelschal
21a13a7275
Improve media loading performance and user experience
...
Add `loading="lazy"` attribute to image elements in MediaUpload component for improved performance.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/fGL9Pd7
2025-10-14 07:57:36 +00:00
michaelschal
9a375a2291
Update media upload to prioritize Facebook feed images
...
Modify MediaUpload component to use `facebookFeedUrl` if available, otherwise fallback to `originalUrl` for image display.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/F3F3s9V
2025-10-14 07:56:59 +00:00
michaelschal
3c2e0f169b
Improve media grid layout for better visibility on smaller screens
...
Adjust the `NewPost` component's media grid to use a responsive column layout, defaulting to 2 columns on small screens and 3 on larger screens.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/F3F3s9V
2025-10-14 07:56:18 +00:00
michaelschal
a2379b2f79
Improve media loading performance for posts by enabling lazy loading
...
Added 'loading="lazy"' attribute to media elements in the new-post page to optimize image and video loading.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/F3F3s9V
2025-10-14 07:55:51 +00:00
michaelschal
db45b98e5d
Improve image display by prioritizing Facebook feed URLs
...
Update image rendering in the new post page to use `facebookFeedUrl` when available, otherwise fallback to `originalUrl`.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/F3F3s9V
2025-10-14 07:55:17 +00:00
michaelschal
f5d2249633
Adjust initial media display based on screen size
...
Initialize `visibleMediaCount` state based on window width to display 6 media items on mobile and 12 on desktop.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/F3F3s9V
2025-10-14 07:54:34 +00:00
michaelschal
68ed5d52d4
Enable video playback in post previews for better visualization
...
Update `PreviewModal.tsx` to conditionally render either a video element with controls or an image based on the media type, resolving an issue where videos were not displayed in previews.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 12:03:11 +00:00
michaelschal
942dd25d59
Improve media preview to show videos correctly in the interface
...
Fix an issue in the MediaUpload component where videos were not being rendered correctly in the preview, ensuring all media types are displayed as expected.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 12:01:34 +00:00
michaelschal
da2a1211d6
Add ability to upload multiple images to the media library at once
...
Enable multiple file uploads in the media library component, allowing users to upload several images simultaneously. This commit modifies the `useDropzone` configuration to accept multiple files and updates the `onDrop` function to handle parallel uploads. It also introduces UI feedback for ongoing uploads.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 07:59:24 +00:00
michaelschal
4ec1e3ef33
Adjust image editor ribbon position slightly to the left
...
Update CSS transform property in `ImageEditor` component to adjust ribbon positioning, shifting it 2px to the left.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:42:10 +00:00
michaelschal
2b36c3fa6a
Adjust text position in image editor for better alignment
...
Update CSS transform properties in `image-editor.tsx` to shift text horizontally by adjusting `translateX` values, improving visual presentation.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:40:48 +00:00
michaelschal
44ebe0dfaa
Adjust ribbon position for better image editor display
...
Modify CSS `transform` property in `image-editor.tsx` to adjust the vertical positioning of the ribbon element.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:39:57 +00:00
michaelschal
91f9f4f9e2
Adjust the position of the text overlay on product images
...
Update the CSS `transform` property in `image-editor.tsx` to adjust the positioning of the "Stock limité" ribbon text for rotated elements.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:39:06 +00:00
michaelschal
6919ae9873
Adjust text positioning and rotation for product stock limited banners
...
Update CSS `transform` property in `ImageEditor` component to handle specific translations, rotations, and line heights for "Stock limité" ribbon text based on its position.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:38:10 +00:00
michaelschal
b8bb605d04
Adjust text spacing on product banners for better visual appeal
...
Update CSS for image editor component to add padding to limited stock banners, improving text alignment and readability.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:36:58 +00:00
michaelschal
1dbdee5d12
Center text within the banner element
...
Adjusted CSS for `.ribbon-text` and related classes in `client/src/pages/image-editor.tsx` to center the text content.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:36:11 +00:00
michaelschal
15fbda3006
Adjust text positioning to prevent it from overlapping images
...
Update CSS transformations in `image-editor.tsx` to modify the positioning of ribbon labels for better visual presentation.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:34:04 +00:00
michaelschal
bfd73ac7c9
Adjust image editor ribbon text position
...
Update CSS for ribbon-container north_west and north_east to adjust the translated position of the ribbon-label, shifting it down by 15px.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:33:20 +00:00
michaelschal
fedcea5a19
Adjust ribbon text position and styling within the image editor
...
Refactor CSS classes and HTML structure for ribbon text (`.ribbon-text` to `.ribbon-label`) in the image editor, repositioning the text to be within the banner and preventing it from being too close to the edges.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
2025-10-13 06:32:47 +00:00
michaelschal
f208d26d5b
Center and enlarge "Stock limité" text in banner
...
Adjust font size, line height, and text alignment for "Stock limité" ribbon text in the image editor component.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Z8vED4L
2025-10-13 06:26:16 +00:00
michaelschal
38ce01eec3
Improve display of limited stock messages on images
...
Adjust font size and line height for "Stock limité" text in image editor to display on two lines.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Z8vED4L
2025-10-13 06:24:24 +00:00
michaelschal
7d9b5b1a82
Increase the font size of text displayed on banners
...
Adjusted font sizes within the image editor component to make banner text larger based on its length.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Z8vED4L
2025-10-13 06:14:51 +00:00
michaelschal
29bed1d447
Add "Stock limité" option to image editor promotional text
...
Update the `Ribbon` interface and image editor UI to include "Stock limité" as a selectable option for promotional text.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Z8vED4L
2025-10-13 06:09:32 +00:00
michaelschal
2bdb19b597
Add more image editing filters and improve existing effects
...
Enhance image editor with new filters (vibrance, hue, gamma, vignette, incognito, athena, audrey) and refine the vintage effect implementation using Cloudinary transformations.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/mIWJXC9
2025-10-11 11:41:41 +00:00
michaelschal
6954c6f5ad
Created a checkpoint
...
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/mIWJXC9
2025-10-11 11:39:17 +00:00
michaelschal
dd43753d6d
Update image editor to display currency symbol correctly after price
...
Remove ribbon generation functionality and adjust currency symbol placement in image editor.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/mIWJXC9
2025-10-11 11:33:30 +00:00
michaelschal
a4686ab588
Add zoom functionality to view original images in the media library
...
Adds a zoom icon to each image in the media library, opening a modal to display the original image. Also includes a state variable and dialog component for the zoom functionality.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/RUoRc2A
2025-10-11 11:03:56 +00:00
michaelschal
4f678bd3ea
Improve image capture to prevent zooming and ensure accurate file sizes
...
Refactor image editor to use `html-to-image` with a pixel ratio of 1, capturing the preview exactly as displayed. Adjust compression logic to ensure output blobs remain under the Cloudinary size limit, re-encoding with a quality of 0.8 when necessary.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/RUoRc2A
2025-10-11 10:51:23 +00:00
michaelschal
f78341a345
Improve image export quality and reduce file size
...
Adjust image export settings in the editor to limit resolution, apply JPEG compression, and re-encode large images to ensure optimal file size and quality.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/RUoRc2A
2025-10-11 10:49:06 +00:00
michaelschal
b9c61e2f62
Improve image editing by using a new capture method
...
Replace html2canvas with html-to-image for DOM capture in the image editor.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/RUoRc2A
2025-10-11 10:25:20 +00:00
michaelschal
c0e082a460
Update image editor to process overlays on the client-side
...
Refactors the image editor to perform overlay processing (ribbon, price badge) on the client-side using canvas, removing the server-side dependency for image manipulation.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:58:23 +00:00
michaelschal
e60000bca4
Improve image processing by using original image quality
...
Update image editor to use original image URLs for overlay configuration, ensuring full image dimensions and quality are preserved in server-side processing.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:44:39 +00:00
michaelschal
83dbd98c8e
Process image edits server-side for consistent results
...
Refactor client-side image editing to server-side processing using Sharp for applying overlays and text, ensuring consistency between the editor preview and saved image.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:31:14 +00:00
michaelschal
04408ee895
Adjust image editor to correctly place overlays on original media
...
Modify the image editor component to ensure overlays are applied to the original image, not a padded version, by updating image rendering logic and CSS classes in `client/src/pages/image-editor.tsx`.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:27:53 +00:00
michaelschal
ffffa18244
Update image editing to use original image dimensions
...
Modify the image editor to load the original image source instead of a preview URL, ensuring accurate dimensions are used for edits and overlays.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:26:27 +00:00
michaelschal
0d4d847421
Improve image editor by correctly displaying ribbons on uploaded images
...
Update client/src/pages/image-editor.tsx to fix ribbon positioning logic and ensure ribbons are displayed correctly based on user-defined positions.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:24:57 +00:00
michaelschal
838c2079a6
Fix image scaling and ribbon positioning in the editor
...
Refactor image saving logic in `image-editor.tsx` to use a canvas element for accurate scaling and positioning of the image and overlaid elements like ribbons and price badges.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:21:39 +00:00
michaelschal
48452300e8
Adjust image editing to accurately capture original dimensions
...
Fixes an issue where image dimensions were incorrectly scaled, causing overlays to misalign. This commit modifies the image capture process to utilize the image's natural dimensions, ensuring accurate placement of text, ribbons, and price badges.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:19:26 +00:00
michaelschal
efd479dbcb
Improve text positioning in price badges and banners
...
Fixes an issue where text in price badges and banners was not rendering correctly after image editing, ensuring proper alignment and display by adjusting CSS properties and document cloning during canvas generation.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:17:03 +00:00
michaelschal
1ac47b5d4b
Fix image generation to correctly align text in the editor
...
Update image editor canvas properties including width, height, x, and y to resolve text alignment issues.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR
2025-10-11 09:15:47 +00:00
michaelschal
b764cdfc48
Add ability to save edited images with overlays to the media library
...
Implement a new endpoint for uploading edited images, converting them to a JPEG blob using html2canvas, and storing them in Cloudinary.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:10:37 +00:00
michaelschal
986d122528
Adjust text size for product arrival and novelty ribbons for better readability
...
Update font sizes in ImageEditor component for ribbon text based on length to improve display of short and medium-length strings.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:07:56 +00:00
michaelschal
6f2433b451
Improve text size in image editor for better visibility
...
Adjust font size dynamically based on ribbon text length in the image editor component.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:07:11 +00:00
michaelschal
7094bc6078
Improve image editor ribbon centering and text size
...
Update CSS for the image editor's ribbon component to ensure text is properly centered and scales with content, using new container classes and flexbox properties.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:04:34 +00:00
michaelschal
d95aef11c5
Adjust text positioning within the image editor for better alignment
...
Update CSS styles in `client/src/pages/image-editor.tsx` to correct the vertical and horizontal positioning of ribbon text elements.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:03:14 +00:00
michaelschal
ecac937e0d
Adjust banner text positioning and size for better visibility
...
Update CSS styles in client/src/pages/image-editor.tsx to correct the positioning and sizing of ribbon text elements for improved banner text display.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:02:30 +00:00
michaelschal
13afecfa45
Improve banner text display and add adjustable price font size
...
Introduce a `size` property to `PriceBadge` interface and update UI components in `image-editor.tsx` to allow users to adjust the font size of the price badge. Implement adaptive text sizing for ribbon text based on length.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 09:01:23 +00:00
michaelschal
59888a064c
Update image editor to fix banner and price display issues
...
Adjusted CSS for ribbon and price badge overlays to ensure correct display and positioning, and modified Cloudinary transformations to exclude these overlays from the image generation URL.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 08:57:45 +00:00
michaelschal
0d6e9b0832
Add a feature to generate and apply corner ribbons to images
...
Introduce a new API endpoint and service for generating triangular ribbon overlays with text using Cloudinary, and integrate this into the image editor.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
2025-10-11 08:55:19 +00:00
michaelschal