Avatar Change Issues Thread

Flight

Flight

Superstar
Supporter
Joined
May 8, 2012
Messages
20,464
Reputation
1,735
Daps
52,147
Reppin
KC
bnew said:
used these dimensions for the default for this Coli avatar image resizer I made with Deepseek-R1-Lite.


WZdY1wi.png





Design and implement a user-centric HTML, CSS, and JavaScript website that enables users to upload and resize images within their compatible Chrome or Firefox browser, utilizing local storage for the resulting image. The website should provide clear instructions and tips on how to use the image resizing feature. Ensure the following requirements are met: - Input: Allow users to upload image files of any size through a file dialog or by pasting (Ctrl-V) image data. - Output: Resize the image to a fixed size of 102x108 pixels or a user-defined size, while maintaining the aspect ratio. - Browser Compatibility: Ensure seamless functionality across compatible Chrome and Firefox browsers, adhering to browser-specific storage limitations. - User Guidance: Offer intuitive instructions and helpful tips for users to effectively utilize the image resizing feature. - Local Storage: Store the resized image locally within the user's browser storage. - Adaptive Reasoning: Incorporate dynamic reasoning processes to handle varying image sizes, user-defined sizes, and browser-specific limitations. upload to local browser storage and the site processes the file from there.

Design and implement a user-centric HTML, CSS, and JavaScript website that enables users to upload and resize images within their compatible Chrome or Firefox browser, utilizing local storage for the resulting image. The website should provide clear instructions and tips on how to use the image resizing feature. Ensure the following requirements are met:

- **Input**: Allow users to upload image files of any size through a file dialog or by pasting (Ctrl-V) image data.
- **Output**: Resize the image to a fixed size of 102x108 pixels or a user-defined size, while maintaining the aspect ratio.
- **Browser Compatibility**: Ensure seamless functionality across compatible Chrome and Firefox browsers, adhering to browser-specific storage limitations.
- **User Guidance**: Offer intuitive instructions and helpful tips for users to effectively utilize the image resizing feature.
- **Local Storage**: Store the resized image locally within the user's browser storage.
- **Adaptive Reasoning**: Incorporate dynamic reasoning processes to handle varying image sizes, user-defined sizes, and browser-specific limitations.
- **Additional Features**:
- **Image Preview**: Allow users to preview the uploaded or pasted image before resizing.
- **Download Button**: Provide a quick download button for the resized image.
- **Remove Button**: Allow users to remove the resized image from local storage to avoid data mishaps.
- **Global Paste Handling**: Enable users to paste images anywhere on the webpage using Ctrl+V.
- **Toast Notifications**: Use brief toast notifications for user feedback (success, error, etc.).
- **Responsive Design**: Ensure the website is responsive and works well on different screen sizes.
- **Error Handling**: Gracefully handle errors (e.g., invalid file types, missing dimensions, etc.).
- **Clear Instructions**: Provide clear and concise instructions for users to follow.
- **Accessibility**: Ensure the website is accessible to all users, including those using screen readers.
- **Cross-Browser Testing**: Test the website thoroughly in Chrome and Firefox to ensure compatibility.
- **Local Storage Management**: Handle cases where local storage is full or the user clears it.

Upload to local browser storage and the site processes the file from there.

Click to expand...

Tried to use this and it ain’t work for me breh.
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,921
Reputation
9,569
Daps
172,295
Flight said:
Coli wouldn’t accept it and I used two different images.
Click to expand...

try using smaller dimensions.

i'm curious, what error message you seen in Dev console/Inspector tool when you try to upload the image?

The console tab should show the error message that site reports when you try to upload an avatar but fail.
open console tab and hit upload.

www.greengeeks.com

How To Use the Inspect Element Tool in Chrome - GreenGeeks

The inspect element tool in Chrome is just one of the many awesome tools the browser offers. This tool allows you to inspect the HTML code of the item.
www.greengeeks.com





Console overview | Chrome DevTools | Chrome for Developers

The main uses of the Chrome DevTools Console are logging messages and running JavaScript.
developer.chrome.com developer.chrome.com

Console overview​

Use the Console to test and debug Javascript web applications.

.
How to log messages in the Console #DevToolsTips



Channel Info Chrome for Developers Subscribers: 780K subscribers

Description
In this episode, Bramus and Jecelyn walk you through the different ways of logging and filtering messages in the Console.

Chapters:
0:00 - Intro
0:35 - Open the Console
0:48 - console.log()
1:02 - Run JavaScript in the Console
1:26 - console.warn() and console.error()
1:50 - Filter messages by log level
2:13 - Filter messages temporarily with the Console sidebar
3:00 - console.clear()
3:12 - Clear messages with the Clear button
3:16 - Log JavaScript variables
3:30 - Log JavaScript object and array
3:43 - console.table()
3:54 - console.dir()
4:10 - console.group()
4:27 - console.groupCollapsed()
4:57 - console.count()
5:03 - console.trace()
5:06 - console.time()

Links:
Console API reference → Console API reference | Chrome DevTools | Chrome for Developers
Log messages in the Console → Log messages in the Console | Chrome DevTools | Chrome for Developers
Run JavaScript in the Console → Run JavaScript in the Console | Chrome DevTools | Chrome for Developers

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Catch more DevTools Tips → Developer Tooling Tips
Subscribe to Google Chrome Developers → Chrome for Developers

#DevToolsTips #Chrome #Developer
 
Last edited:
Crumple

Crumple

All Star
Joined
Jul 12, 2014
Messages
7,465
Reputation
760
Daps
8,888
bnew said:
same image you tried before? if yes than it's likely that there was a internal 500 server error and you just needed to repeatedly try to upload if that was the case.
Click to expand...

Good job! It didn't work for me - yet - but I'm going to try further.

You're definitely on to something.

Do you know why it's so hard to change? The site code, or ppls browsers?
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,921
Reputation
9,569
Daps
172,295
Crumple said:
Good job! It didn't work for me - yet - but I'm going to try further.

You're definitely on to something.

Do you know why it's so hard to change? The site code, or ppls browsers?
Click to expand...

I don't know exactly because i never tried updating my profile avatar before but when he said that it worked after previously trying, I suspected it must have been with an issue I deal with anytime I try to post 8,000+ characters on the coli. basically the site server rejects the POST request and you get a 500 internal server error. so because I posted frequently I realized that some posts of the same length weren't going through while some were and a few years ago I tried repeatedly pressing the post button and sure enough after a dozen or so clicks the post went through so i think it's an issue with how the server is configured. this thread is over 3 years old and it would be wild if that was the same posting error that was causing avatars not to be uploaded on first attempts.

i think it's a timing issue so if you keep pressing the post button in rapid succession you'll eventually get the request to go through.

9FTqf90.png

Yyp7tLO.png
[/hr][/hr]

edit :

I might be right about the "solution" to he problem since the error was mentioned back in January 2023.

TheKongoEmpire said:
Oops! We ran into some problems. Please try again later. More error details may be in the browser console.
Click to expand...
 
Last edited:
Crumple

Crumple

All Star
Joined
Jul 12, 2014
Messages
7,465
Reputation
760
Daps
8,888
bnew said:
I don't know exactly because i never tried updating my profile avatar before but when he said that it worked after previously trying, I suspected it must have been with an issue I deal with anytime I try to post 8,000+ characters on the coli. basically the site server rejects the POST request and you get a 500 internal server error. so because I posted frequently I realized that some posts of the same length weren't going through while some were and a few years ago I tried repeatedly pressing the post button and sure enough after a dozen or so clicks the post went through so i think it's an issue with how the server is configured. this thread is over 3 years old and it would be wild if that was the same posting error that was causing avatars not to be uploaded on first attempts.

i think it's a timing issue so if you keep pressing the post button in rapid succession you'll eventually get the request to go through.

9FTqf90.png

Yyp7tLO.png
[/hr][/hr]

edit :

I might be right about the "solution" to he problem since the error was mentioned back in January 2023.
Click to expand...

Word, you're doing great work! I'm at work now, but will try again when I get home. 👍👍👍✅✅✅💰💰💰💫💫💫
 
B

bnew

Veteran
Joined
Nov 1, 2015
Messages
62,921
Reputation
9,569
Daps
172,295
The userscript enhances XenForo forums by displaying the date when a user's avatar was last updated.
Here's a breakdown:
  1. Targeted Application:
    • It works on XenForo forums, specifically on thread pages as determined by @include https://*/threads/*.
  2. Functionality:
    • It fetches the "Last-Modified" date of user avatars.
    • It adds this date to the user's information section in each post.
  3. Key features
    • It displays the formatted last-modified date next to each user's avatar, enhancing the forum's user interface by providing additional information about avatar updates.
Here's how it accomplishes this:
  • Initialization and Caching:
    • It initializes a cache (window.avatarDateCache) to store the avatar update dates. The cache has a limited size (100 entries) to prevent memory leaks.
  • Processing Avatars:
    • It finds all user avatars on the page.
    • For each avatar, it extracts the user ID.
    • It checks if the avatar's update date is already cached. If so, it displays the cached date.
    • If the date is not cached, it fetches the "Last-Modified" header from the avatar image URL.
    • It formats the date and adds it to the user's information section.
  • DOM Manipulation:
    • It adds the avatar update date to the user's information section in each post. It looks for specific HTML elements (message-userExtras or message-userDetails) to insert the date. If those elements are not found, it skips adding the date for that user.
  • Performance Optimization:
    • It uses a throttled function (processAllAvatars) to avoid excessive processing.
    • It uses a MutationObserver to detect new posts and update their avatar dates dynamically. The observer only monitors changes to image src attributes for efficiency.
  • User Experience:
    • It provides visual feedback by highlighting the added date.
    • It avoids scrolling the page when adding the date.
  • Error Handling:
    • It includes error handling to gracefully manage issues like missing user IDs or failed network requests.
    • It skips processing avatars if the required HTML elements are not found in the page's structure.
  • Compatibility
    • It focuses on compatibility, utilizing core XenForo classes for reliability across different themes.

d48z5mZ.png



pastebin.com/WnS1mS8Z
 
You must log in or register to reply here.
Top