Support » Plugin: WooCommerce » Unexpected PhotoSwipe-zoom behaviour when setting custom gallery_full_size (2)

  • Resolved Bram Peerlings

    (@brampeerlings)


    (Follow-up / restart of https://wordpress.org/support/topic/unexpected-photoswipe-zoom-behaviour-when-setting-custom-gallery_full_size/.)

    Hi,

    Whenever I set woocommerce_gallery_full_size to large using the code below (per https://docs.woocommerce.com/document/image-sizes-theme-developers/), WooCommerce / PhotoSwipe applies some CSS-transform that causes the image (in the lightbox that opens if you click the product image) to show up notably smaller than intended.

    
    add_filter( 'woocommerce_gallery_full_size', function( $size ) {
    return 'large';
    } );
    

    Image size large is defined as 950 × 950 and shows (in this particular case) as approximately 640 px wide. If I comment/remove the code, image size full is used. For this image, that image size is 1000 px in width – which is shown at 1000 px.

    With the code above active, the relevant HTML-section is the following: https://www.dropbox.com/s/pj6k9kad26mi767/ZoomIssue_1.png?dl=0. With the code not active, we get https://www.dropbox.com/s/qbs3pycfp8lnn4y/ZoomIssue_2.png?dl=0. Besides the difference in image size, note the different CSS transform / scaling factor in the highlighted line.

    Looking forward to any suggestions in order to fix this!

    Per the suggestions in the previous topic, I’ve replicated this behaviour on a simple WP/WC-install. That consists of:
    – WP 5.7.2
    – WC 5.4.1
    – Custom plugin, containing nothing more than the code above

    Status report

    
    ### WordPress Environment ###
    
    WordPress address (URL): http://ah.peerlings.dev
    Site address (URL): http://ah.peerlings.dev
    WC Version: 5.4.1
    REST API Version: ✔ 5.4.1
    WC Blocks Version: ✔ 5.1.0
    Action Scheduler Version: ✔ 3.1.6
    WC Admin Version: ✔ 2.3.1
    Log Directory Writable: ✔
    WP Version: 5.7.2
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_US
    External object cache: –
    
    ### Server Environment ###
    
    Server Info: Apache/2
    PHP Version: 7.4.16
    PHP Post Max Size: 8 MB
    PHP Time Limit: 30
    PHP Max Input Vars: 1000
    cURL Version: 7.71.0
    OpenSSL/1.1.1d
    
    SUHOSIN Installed: –
    MySQL Version: 10.3.24-MariaDB-cll-lve
    Max Upload Size: 2 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 5.4.1
    WC Database Prefix: wp_ahm_
    Total Database Size: 32.67MB
    Database Data Size: 23.31MB
    Database Index Size: 9.36MB
    wp_ahm_woocommerce_sessions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_woocommerce_downloadable_product_permissions: Data: 0.05MB + Index: 0.06MB + Engine InnoDB
    wp_ahm_woocommerce_order_items: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_woocommerce_order_itemmeta: Data: 0.20MB + Index: 0.14MB + Engine InnoDB
    wp_ahm_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
    wp_ahm_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_actionscheduler_actions: Data: 0.11MB + Index: 0.11MB + Engine InnoDB
    wp_ahm_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_actionscheduler_logs: Data: 0.08MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_comments: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
    wp_ahm_ahm_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_ahm_options: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_posts: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
    wp_ahm_ahm_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_ahm_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_ahm_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_aiowps_events: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_aiowps_failed_logins: Data: 0.22MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_aiowps_global_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_aiowps_login_activity: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_aiowps_login_lockdown: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_aiowps_permanent_block: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_alm: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_berocket_termmeta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_blc_filters: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_blc_instances: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_blc_links: Data: 0.06MB + Index: 0.06MB + Engine InnoDB
    wp_ahm_blc_synch: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_braapf_product_stock_status_parent: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_braapf_product_variation_attributes: Data: 0.05MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_braapf_term_taxonomy_hierarchical: Data: 0.05MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_braapf_variation_attributes: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_bravepopup_goal_stats: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_bravepopup_stats: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_bravepopup_submissions: Data: 0.14MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_cartflows_ca_cart_abandonment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_cartflows_ca_email_history: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_cartflows_ca_email_templates: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_cartflows_ca_email_templates_meta: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_cmplz_cookiebanners: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_cmplz_cookies: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_cmplz_services: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_comments: Data: 0.06MB + Index: 0.09MB + Engine InnoDB
    wp_ahm_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mailchimp_jobs: Data: 0.31MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mclean_refs: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mclean_scan: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_mlw_qm_audit_trail: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mlw_questions: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mlw_quizzes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mlw_quiz_theme_settings: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mlw_results: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_mlw_themes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_options: Data: 5.48MB + Index: 0.14MB + Engine InnoDB
    wp_ahm_pda_passwords: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_postmeta: Data: 7.16MB + Index: 4.13MB + Engine InnoDB
    wp_ahm_posts: Data: 3.41MB + Index: 0.17MB + Engine InnoDB
    wp_ahm_relevanssi: Data: 1.52MB + Index: 1.55MB + Engine InnoDB
    wp_ahm_relevanssi_log: Data: 0.45MB + Index: 0.20MB + Engine InnoDB
    wp_ahm_relevanssi_stopwords: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_sfa_abandoned_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_sgpb_subscribers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_sgpb_subscription_error_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_term_relationships: Data: 0.11MB + Index: 0.08MB + Engine InnoDB
    wp_ahm_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_usermeta: Data: 0.19MB + Index: 0.11MB + Engine InnoDB
    wp_ahm_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_wc_order_product_lookup: Data: 0.05MB + Index: 0.06MB + Engine InnoDB
    wp_ahm_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
    wp_ahm_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
    wp_ahm_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_wpforms_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_wpmailsmtp_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wp_ahm_yoast_indexable: Data: 1.52MB + Index: 0.61MB + Engine InnoDB
    wp_ahm_yoast_indexable_hierarchy: Data: 0.09MB + Index: 0.14MB + Engine InnoDB
    wp_ahm_yoast_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
    wp_ahm_yoast_primary_term: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
    wp_ahm_yoast_seo_links: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
    
    ### Post Type Counts ###
    
    attachment: 3
    br_filters_group: 1
    br_product_filter: 8
    custom_css: 3
    mc4wp-form: 1
    nav_menu_item: 34
    oembed_cache: 32
    page: 9
    popup: 1
    popupbuilder: 2
    post: 1
    postman_sent_mail: 250
    product: 1
    product_variation: 2
    qsm_quiz: 2
    revision: 136
    shop_coupon: 8
    shop_order: 111
    wp_block: 4
    wpautoterms_page: 1
    wpforms: 2
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (3) ###
    
    WooCommerce zoom issue: by Bram Peerlings – 1.0
    WooCommerce: by Automattic – 5.4.1
    Logged-in-only: by Drivingralle – 2.1.0
    
    ### Inactive Plugins (53) ###
    
    Abandoned Cart Reports For WooCommerce: by Small Fish Analytics – 2.6.2
    Add From Server: by Dion Hulse – 3.4.5
    Admin Menu Editor: by Janis Elsts – 1.9.10
    Airport History in WooCommerce: by Bram Peerlings – 1.1.2
    All-in-One WP Migration: by ServMask – 7.40
    All-in-One WP Migration Unlimited Extension: by ServMask – 2.39
    All In One WP Security: by Tips and Tricks HQ
    Peter Petreski
    Ruhul
    Ivy – 4.4.8
    
    BackWPup: by Inpsyde GmbH – 3.9.0
    Better Font Awesome: by Mickey Kay – 1.7.4
    Booster for WooCommerce: by Pluggabl LLC – 5.4.2
    Brave Conversion Engine: by Brave – 0.4.6
    Brave Conversion Engine (PRO): by Brave – 0.3.8
    Broken Link Checker: by WPMU DEV – 1.11.15
    Cart Notices for WooCommerce: by BeRocket – 3.5.6
    Complianz | GDPR/CCPA Cookie Consent: by Really Simple Plugins – 5.2.2
    Force Regenerate Thumbnails: by Pedro Elsner – 2.0.6
    Google Analytics for WordPress by MonsterInsights: by MonsterInsights – 7.17.0
    Hummingbird: by WPMU DEV – 3.0.1
    Kirki Customizer Framework: by David Vongries – 3.1.8
    Mailchimp for WooCommerce: by Mailchimp – 2.5.1
    Maintenance: by WebFactory Ltd – 4.02
    MC4WP: Mailchimp for WordPress: by ibericode – 4.8.6
    Media Cleaner: by Jordy Meow – 6.1.8
    New Order Notification for Woocommerce: by Mr.Ebabi – 1.3.3
    Organic Widget Area Block: by Organic Themes – 1.2.3
    Page Links To: by Mark Jaquith – 3.3.5
    Popup Builder: by Sygnoos – 3.84
    Post SMTP: by Yehuda Hassine – 2.0.23
    POWR: by POWR.io – 2.1.0
    Products Suggestions for WooCommerce: by BeRocket – 3.5.6
    Quiz And Survey Master: by ExpressTech – 7.2.1
    Really Simple SSL: by Really Simple Plugins – 4.0.15
    Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.1.5
    Relevanssi: by Mikko Saari – 4.13.2
    Simple Custom Post Order: by Colorlib – 2.5.6
    Theme Check: by Theme Review Team – 20200922.1
    Thumbnail Cleaner: by Kolja Nolte – 1.4.2
    Ultimate Addons for Gutenberg: by Brainstorm Force – 1.23.4
    WaterWoo PDF Premium: by Little Package – 3.2
    Widget Clone: by 93digital – 1.1.3
    Widget Context: by Kaspars Dambis – 1.3.2
    WooCommerce AJAX Products Filter: by BeRocket – 3.0.3.9
    WooCommerce Cart Abandonment Recovery: by CartFlows Inc – 1.2.12
    WooCommerce Grid/List View: by BeRocket – 3.0.2.3
    WooCommerce Load More Products: by BeRocket – 3.1.6.3
    WooCommerce Products Image Watermark: by BeRocket – 3.0.5.1
    WooCommerce Shipping & Tax: by WooCommerce – 1.25.15 (update to version 1.25.16 is available)
    WP-Sweep: by Lester 'GaMerZ' Chan – 1.1.3
    WP AutoTerms: by WP AutoTerms – 2.4.5
    WP External Links: by WebFactory Ltd – 2.48
    WPForms Lite: by WPForms – 1.6.7.3
    WPFront Notification Bar: by Syam Mohan – 1.9.1.04012
    Yoast SEO: by Team Yoast – 16.6.1
    
    ### Settings ###
    
    API Enabled: –
    Force SSL: –
    Currency: USD ($)
    Currency Position: left
    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: –
    
    ### WC Pages ###
    
    Shop base: #79 - /shop/
    Cart: #80 - /cart/
    Checkout: #81 - /checkout/
    My account: #82 - /my-account/
    Terms and conditions: #1357 - /terms-and-conditions/
    
    ### Theme ###
    
    Name: Twenty Twenty-One
    Version: 1.1 (update to version 1.3 is available)
    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: –
    
    ### Action Scheduler ###
    
    Complete: 262
    Oldest: 2021-06-13 14:11:14 +0000
    Newest: 2021-07-11 14:39:42 +0000
    
    Pending: 1
    Oldest: 2021-07-11 14:44:51 +0000
    Newest: 2021-07-11 14:44:51 +0000
    
    ### Status report information ###
    
    Generated at: 2021-07-11 10:44:11 -04:00
    

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support con

    (@conschneider)

    Engineer

    Hi there,

    Image size large is defined as 950 × 950 and shows (in this particular case) as approximately 640 px wide.

    Is the 640px format one that is registered with the site? Or is this dynamically scaled? In other words does your lightbox pick another WordPress image size or does it choose to make the image smaller by scaling the 950 × 950 iage?

    Kind regards,

    Thread Starter Bram Peerlings

    (@brampeerlings)

    Hi,

    Thanks for your reply. When I insert the quoted code, two things happen:
    – The full-size image (file) is replaced by a 950px-version (different media size). This is as intended.
    – The CSS-transform that scales the Lightbox-preview (div.pswp__zoom-wrap, to be exact) gets a different value. That is not as intended.

    Regards,

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi @brampeerlings 👋

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

    Cheers.

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

    Thread Starter Bram Peerlings

    (@brampeerlings)

    Hi Gabriel,

    I’m most certainly “ready to continue”, but awaiting a reply from either you or one of your colleagues.

    Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Unexpected PhotoSwipe-zoom behaviour when setting custom gallery_full_size (2)’ is closed to new replies.