search

10up / simple-local-avatars

Adds an avatar upload field to user profiles. Generates requested sizes on demand just like Gravatar!
https://wordpress.org/plugins/simple-local-avatars/
GNU General Public License v2.0
216 stars 44 forks source link

Crop area does not appear sometimes. #100

Closed faisal-alvi closed 1 year ago

faisal-alvi commented 2 years ago

Describe the bug

The avatar crop feature was recently introduced in #83. It is noted that the crop area does not appear sometimes. Also noticed the behavior - when changing a window size slightly, the crop area appears!

Steps to Reproduce

  1. Upload a wide image and keep the window size narrow or vice versa.
  2. Try to select and crop the image.
  3. The crop area does not appear.
  4. Slightly change the window size.
  5. Crop are appears.
  6. Check the below video.

Screenshots, screen recording, code snippet

https://www.screencast.com/t/PhQmfpPL7dO7

Environment information

` ### wp-core ### version: 5.9.1 site_language: en_US user_language: en_US timezone: Asia/Kolkata permalink: /%postname%/ https_status: true multisite: false user_registration: 0 blog_public: 1 default_comment_status: open environment_type: local user_count: 11 dotorg_communication: true ### wp-paths-sizes ### wordpress_path: /Users/faisalalvi/LocalSites/wpne/app/public wordpress_size: 43.74 MB (45862139 bytes) uploads_path: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content/uploads uploads_size: 6.46 MB (6776453 bytes) themes_path: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content/themes themes_size: 6.47 MB (6780262 bytes) plugins_path: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content/plugins plugins_size: 2.91 GB (3122292916 bytes) database_size: 47.20 MB (49496064 bytes) total_size: 3.01 GB (3231207834 bytes) ### wp-active-theme ### name: Twenty Twenty-One (twentytwentyone) version: 1.4 (latest version: 1.5) author: the WordPress team author_website: https://wordpress.org/ parent_theme: none theme_features: core-block-patterns, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, woocommerce, widgets-block-editor, post-thumbnails, automatic-feed-links, title-tag, post-formats, menus, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, custom-background, editor-color-palette, editor-gradient-presets, responsive-embeds, custom-line-height, experimental-link-color, custom-spacing, custom-units, widgets theme_path: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content/themes/twentytwentyone auto_update: Disabled ### wp-themes-inactive (10) ### Newspack Joseph: version: 1.0.0-alpha.33, author: Automattic, Auto-updates disabled Newspack Katharine: version: 1.0.0-alpha.33, author: Automattic, Auto-updates disabled Newspack Nelson: version: 1.0.0-alpha.33, author: Automattic, Auto-updates disabled Newspack Sacha: version: 1.0.0-alpha.33, author: Automattic, Auto-updates disabled Newspack Scott: version: 1.0.0-alpha.33, author: Automattic, Auto-updates disabled Newspack: version: 1.53.2, author: Automattic, Auto-updates disabled Storefront: version: 3.9.1, author: Automattic, Auto-updates disabled Twenty Nineteen: version: 2.1, author: the WordPress team (latest version: 2.2), Auto-updates disabled Twenty Twenty: version: 1.8, author: the WordPress team (latest version: 1.9), Auto-updates disabled Twenty Twenty-Two: version: 1.0, author: the WordPress team (latest version: 1.1), Auto-updates disabled ### wp-mu-plugins (1) ### ngrok.php: author: (undefined), version: (undefined) ### wp-plugins-active (4) ### 10up Block Library: version: 1.0.1, author: 10up, Auto-updates disabled Simple Local Avatars: version: 2.2.0, author: Jake Goldman, 10up, Auto-updates disabled WooCommerce: version: 5.9.0, author: Automattic (latest version: 6.2.1), Auto-updates disabled WooCommerce Bookings: version: 1.15.52, author: WooCommerce, Auto-updates disabled ### wp-plugins-inactive (40) ### Accessibility CheckUp: version: 1.2.0, author: 10up, Auto-updates disabled Ads.txt Manager: version: 1.3.0, author: 10up, Auto-updates disabled AMP: version: 2.1.4, author: AMP Project Contributors (latest version: 2.2.1), Auto-updates disabled Block for Apple Maps: version: 1.0.1, author: 10up (latest version: 1.0.2), Auto-updates disabled Bookings Generator: version: 1.0.0, author: WooCommerce, Auto-updates disabled Bookings Helper: version: 1.0.3, author: WooCommerce, Auto-updates disabled Distributor: version: 1.6.7, author: 10up Inc., Auto-updates disabled Dokan: version: 3.3.2, author: weDevs (latest version: 3.3.9), Auto-updates disabled Jetpack: version: 10.3, author: Automattic (latest version: 10.6), Auto-updates disabled Members: version: 3.1.7, author: MemberPress, Auto-updates disabled Newspack: version: 1.67.0-alpha.2, author: Automattic, Auto-updates disabled Newspack Blocks: version: 1.42.1, author: Automattic, Auto-updates disabled Newspack Newsletters: version: 1.36.1, author: Automattic (latest version: 1.41.0), Auto-updates disabled ProfilePress: version: 3.2.8, author: ProfilePress Team, Auto-updates disabled Publisher Media Kit: version: 1.0.0, author: 10up, Auto-updates disabled PWA: version: 0.6.0, author: PWA Plugin Contributors, Auto-updates disabled Query Monitor: version: 3.7.1, author: John Blackbourn (latest version: 3.8.2), Auto-updates disabled Repeat Order for Woocommerce: version: 1.2.0, author: polyres, Auto-updates disabled Restricted Site Access: version: 7.2.0, author: Jake Goldman, 10up, Oomph (latest version: 7.3.0), Auto-updates disabled Simple Podcasting: version: 1.2.0, author: 10up (latest version: 1.2.1), Auto-updates disabled Site Kit by Google: version: 1.45.0, author: Google (latest version: 1.69.0), Auto-updates disabled User Switching: version: 1.5.8, author: John Blackbourn & contributors, Auto-updates disabled W3 Total Cache: version: 2.1.9, author: BoldGrid (latest version: 2.2.1), Auto-updates disabled WooCommerce Accommodation Bookings: version: 1.1.26, author: WooCommerce, Auto-updates disabled WooCommerce Amazon Pay: version: 2.1.1, author: WooCommerce, Auto-updates disabled WooCommerce Blocks: version: 7.1.0-dev, author: Automattic, Auto-updates disabled WooCommerce Bookings Availability: version: 1.1.19, author: WooCommerce, Auto-updates disabled WooCommerce Deposits: version: 1.5.8, author: WooCommerce, Auto-updates disabled WooCommerce EU VAT Number: version: 2.4.1, author: WooCommerce, Auto-updates disabled WooCommerce Memberships: version: 1.22.1, author: SkyVerge, Auto-updates disabled WooCommerce Multi-currency: version: 2.14.3, author: TIV.NET INC, Auto-updates disabled WooCommerce Pre-Orders: version: 1.6.0, author: WooCommerce, Auto-updates disabled WooCommerce Product Add-ons: version: 4.7.0, author: WooCommerce, Auto-updates disabled WooCommerce Product Vendors: version: 2.1.58, author: WooCommerce, Auto-updates disabled WooCommerce Square: version: 2.9.0, author: WooCommerce, Auto-updates disabled WooCommerce Stripe Gateway: version: 6.1.0, author: WooCommerce (latest version: 6.2.0), Auto-updates disabled WooCommerce Xero Integration: version: 1.7.41, author: WooCommerce, Auto-updates disabled WP Crontrol: version: 1.12.0, author: John Blackbourn & crontributors, Auto-updates disabled XT Quick View for WooCommerce: version: 1.9.4, author: XplodedThemes (latest version: 1.9.5), Auto-updates disabled Yoast SEO: version: 17.6, author: Team Yoast (latest version: 18.2), Auto-updates disabled ### wp-media ### image_editor: WP_Image_Editor_GD imagick_module_version: Not available imagemagick_version: Not available imagick_version: Not available file_uploads: File uploads is turned off post_max_size: 1000M upload_max_filesize: 300M max_effective_size: 300 MB max_file_uploads: 20 gd_version: bundled (2.1.0 compatible) gd_formats: GIF, JPEG, PNG, BMP ghostscript_version: not available ### wp-server ### server_architecture: Darwin 21.3.0 x86_64 httpd_software: nginx/1.16.0 php_version: 7.3.5 64bit php_sapi: fpm-fcgi max_input_variables: 4000 time_limit: 1200 memory_limit: 256M max_input_time: 600 upload_max_filesize: 300M php_post_max_size: 1000M curl_version: 7.77.0 (SecureTransport) LibreSSL/2.8.3 suhosin: false imagick_availability: false pretty_permalinks: true htaccess_extra_rules: false ### wp-database ### extension: mysqli server_version: 8.0.16 client_version: mysqlnd 5.0.12-dev - 20150407 - $Id: 7cc7cc96e675f6d72e5cf0f267f48e167c2abb23 $ max_allowed_packet: 16777216 max_connections: 151 ### wp-constants ### WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content WP_PLUGIN_DIR: /Users/faisalalvi/LocalSites/wpne/app/public/wp-content/plugins WP_MEMORY_LIMIT: 40M WP_MAX_MEMORY_LIMIT: 256M WP_DEBUG: true WP_DEBUG_DISPLAY: true WP_DEBUG_LOG: false SCRIPT_DEBUG: true WP_CACHE: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_ENVIRONMENT_TYPE: local DB_CHARSET: utf8 DB_COLLATE: undefined ### wp-filesystem ### wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable mu-plugins: writable `

WordPress information

No response

Code of Conduct

ajmaurya99 commented 2 years ago

Hey, @faisal-alvi @jeffpaul, It looks like an issue with the WordPress crop feature itself, I tried updating the site icon in the customizer panel, and I see the same problem happening here too.

If I try to use a larger image in a smaller window size, the crop screen doesn't appear, and once I resize the window, the crop screen appears again.

SS - https://share.getcloudapp.com/8LuD4LWm

Could you please try testing it at your end and let me know if it breaks at your end, too? If that's the case, I might need to open an issue in the WordPress Trac.

Dimensions I faced an issue with.

Image size - 2560 by 1707 pixels Screen Size - 780 by 550 pixels

faisal-alvi commented 2 years ago

@ajmaurya99 thanks for the report. I have tested it as per your instructions and the crop issue is occurring in the customizer too.

SLA-100 image link

jeffpaul commented 2 years ago

Related: https://core.trac.wordpress.org/ticket/55377

faisal-alvi commented 2 years ago

@jeffpaul can you please follow up on the core ticket so this gets resolved sooner?

jeffpaul commented 2 years ago

@ajmaurya99 @faisal-alvi curious what happens here in the Site Logo block?

faisal-alvi commented 2 years ago

@jeffpaul Site Logo block does not offer a crop feature inside the media library popup. It simply allows to choose an image, and the crop is performed like this:

sla-100-2

jeffpaul commented 2 years ago

Interesting that the Site Logo block does provide options to crop to a square and other aspect ratios. We don't need to get too fancy in handling this in the media library popup, but even a basic option to crop as square or freeform will probably suffice?

faisal-alvi commented 2 years ago

@jeffpaul Yes, we should provide (initially) 2 options: square and freeform. @cadic has already provided a suggestion on it in https://github.com/10up/simple-local-avatars/pull/130#issuecomment-1133242447, I will look into it. However, we need a design discussion, once I check the feasibility.

Created a separate ticket #131 to discuss this.

faisal-alvi commented 1 year ago

Seems like this is fixed in core, closing!