Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Product image gallery (beta) block shows white borders around vertical images #47569

Open
3 of 5 tasks
tomxygen opened this issue May 17, 2024 · 0 comments
Open
3 of 5 tasks
Labels
block: product image gallery Issues related to the Product Image Gallery block. team: Kirigami & Origami type: community contribution type: enhancement The issue is a request for an enhancement.

Comments

@tomxygen
Copy link

Prerequisites

  • I have carried out troubleshooting steps and I believe I have found a bug.
  • I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

When a vertical product image is set (height > width), the image is confined in a square and the width is much smaller, with white borders around it.

The issue is shown in the screenshot below (above the Product image gallery (beta), below the current product image)

Screenshot 2024-05-13 at 5 22 36 PM

Expected behavior

As what happens with the current product image, the width of the image should take up the entire width of the column in which the image is placed.

Actual behavior

White borders are shown around the image.

Steps to reproduce

  1. add the new Product image gallery (beta) into the single product template
  2. create a new product
  3. set the product, with H>W. The greater H, the more the issue is shown.

WordPress Environment

`

WordPress Environment

WordPress address (URL): http://tommasop43.sg-host.com
Site address (URL): http://tommasop43.sg-host.com
WC Version: 8.8.3
REST API Version: ✔ 8.8.3
Action Scheduler Version: ✔ 3.7.4
Log Directory Writable: ✔
WP Version: 6.5.3
WP Multisite: –
WP Memory Limit: 768 MB
WP Debug Mode: –
WP Cron: ✔
Language: it_IT
External object cache: –

Server Environment

Server Info: Apache
PHP Version: 7.4.33
PHP Post Max Size: 256 MB
PHP Time Limit: 120
PHP Max Input Vars: 3000
cURL Version: 8.2.1
OpenSSL/3.1.1

SUHOSIN Installed: –
MySQL Version: 8.0.34-26
Max Upload Size: 256 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 8.8.3
WC Database Prefix: pkm_
Total Database Size: 14.65MB
Database Data Size: 11.44MB
Database Index Size: 3.21MB
pkm_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
pkm_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
pkm_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_actionscheduler_actions: Data: 0.11MB + Index: 0.11MB + Engine InnoDB
pkm_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_comments: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
pkm_gla_attribute_mapping_rules: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_gla_budget_recommendations: Data: 0.19MB + Index: 0.14MB + Engine InnoDB
pkm_gla_merchant_issues: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_gla_shipping_rates: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_gla_shipping_times: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_jetpack_sync_queue: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
pkm_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_automation_run_logs: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_mailpoet_automation_run_subjects: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_automation_runs: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_automation_triggers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_automation_versions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_automations: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_custom_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_dynamic_segment_filters: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_feature_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_forms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_newsletter_links: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_mailpoet_newsletter_option: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_newsletter_option_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_newsletter_posts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_newsletter_segment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_newsletter_templates: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_scheduled_task_subscribers: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_scheduled_tasks: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_segments: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_sending_queues: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_settings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_statistics_bounces: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_mailpoet_statistics_clicks: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_mailpoet_statistics_forms: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_statistics_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_statistics_opens: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
pkm_mailpoet_statistics_unsubscribes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_mailpoet_statistics_woocommerce_purchases: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
pkm_mailpoet_stats_notifications: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_subscriber_custom_field: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_subscriber_ips: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_subscriber_segment: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_subscriber_tag: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_mailpoet_subscribers: Data: 0.02MB + Index: 0.23MB + Engine InnoDB
pkm_mailpoet_tags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_user_agents: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_mailpoet_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_options: Data: 5.06MB + Index: 0.06MB + Engine InnoDB
pkm_postmeta: Data: 0.08MB + Index: 0.03MB + Engine InnoDB
pkm_posts: Data: 1.47MB + Index: 0.06MB + Engine InnoDB
pkm_sgs_log_events: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_sgs_log_visitors: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_usermeta: Data: 0.09MB + Index: 0.03MB + Engine InnoDB
pkm_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_wc_admin_note_actions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
pkm_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
pkm_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
pkm_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
pkm_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
pkm_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
pkm_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
pkm_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
pkm_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
pkm_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
pkm_ycd_subscribers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB

Post Type Counts

attachment: 26
mailpoet_page: 1
page: 7
post: 4
product: 1
revision: 156
wp_block: 1
wp_font_face: 37
wp_font_family: 13
wp_global_styles: 4
wp_navigation: 1
wp_template: 4
wp_template_part: 5
ycdcountdown: 1

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (5)

Countdown Block: by WPDeveloper – 1.2.8
Gutenberg: by Gutenberg Team – 18.3.0
Jetpack: by Automattic – 13.4.1
Speed Optimizer: by SiteGround – 7.5.0
WooCommerce: by Automattic – 8.8.3

Inactive Plugins (6)

Google Listings and Ads: by WooCommerce – 2.6.9
MailPoet: by MailPoet – 4.49.1
Security Optimizer: by SiteGround – 1.4.13
SiteGround Central: by SiteGround – 3.0.2
WooCommerce Legacy REST API: by WooCommerce – 1.0.1
WooPayments: by Automattic – 7.6.0

Settings

API Enabled: ✔
Force SSL: –
Currency: EUR (€)
Currency Position: right_space
Thousand Separator: .
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

Logging

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 11 KB

WC Pages

Shop base: #6 - /shop/
Cart: #7 - /cart/
Checkout: #8 - /checkout/
My account: #9 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty-Three
Version: 1.4
Author URL: https://wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: /home/customer/www/tommasop43.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/error.php
/home/customer/www/tommasop43.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/notice.php
/home/customer/www/tommasop43.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/success.php

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customize-store
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
product-variation-management
product-virtual-downloadable
product-external-affiliate
product-grouped
product-linked
product-pre-publish-modal
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: minified-js
new-product-management-experience
product-custom-fields
settings
async-product-editor-category-field
launch-your-store

Daily Cron: ✔ Next scheduled: 2024-05-17 16:50:35 +00:00
Options: ✔
Notes: 73
Onboarding: completed

Action Scheduler

Complete: 210
Oldest: 2024-04-24 16:50:58 +0000
Newest: 2024-05-17 00:51:33 +0000

Pending: 2
Oldest: 2024-05-17 12:51:33 +0000
Newest: 2024-05-17 20:52:54 +0000

Status report information

Generated at: 2024-05-17 09:21:35 +00:00
`

Isolating the problem

  • I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
  • This bug happens with a default WordPress theme active, or Storefront.
  • I can reproduce this bug consistently using the steps above.
@gigitux gigitux added block: product gallery Issues related to the Product Gallery block. block: product image gallery Issues related to the Product Image Gallery block. type: enhancement The issue is a request for an enhancement. team: Kirigami & Origami and removed block: product gallery Issues related to the Product Gallery block. labels May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block: product image gallery Issues related to the Product Image Gallery block. team: Kirigami & Origami type: community contribution type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

No branches or pull requests

2 participants