{"id":1966516,"date":"2025-08-20T05:30:32","date_gmt":"2025-08-20T09:30:32","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1966516"},"modified":"2025-08-20T05:30:33","modified_gmt":"2025-08-20T09:30:33","slug":"how-to-improve-calendar-loading-times-by-optimizing-tooltip-in-month-view","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-improve-calendar-loading-times-by-optimizing-tooltip-in-month-view\/","title":{"rendered":"How to Improve Calendar Loading Times by Optimizing Tooltip in Month View"},"content":{"rendered":"\n

When working with The Events Calendar<\/strong>, you might notice that the event tooltips in Month View<\/strong> load full-size featured images. While this ensures maximum quality, it can also add unnecessary weight to your page, slowing down calendar performance.<\/p>\n\n\n\n

A simple way to improve load times is to use medium-sized images<\/strong> instead of full-size ones for tooltips. This keeps the images sharp while reducing file sizes significantly.<\/p>\n\n\n\n

Locate the Template File<\/h2>\n\n\n\n

The tooltip\u2019s featured image is controlled by a template inside the plugin. You\u2019ll want to override it in your theme so updates to the plugin don\u2019t overwrite your customization<\/a>.<\/p>\n\n\n\n

The original file is located at:<\/p>\n\n\n

\nwp-content\/plugins\/the-events-calendar\/src\/views\/v2\/month\/calendar-body\/day\/calendar-events\/calendar-event\/tooltip\/featured-image.php\n\n<\/pre><\/div>\n\n\n
Step 2: Copy the File to Your Theme<\/h2>\n\n\n\n
Copy this file to your theme or child theme so it can safely be customized:<\/p>\n\n\n
\n[your-theme]\/tribe\/events\/v2\/month\/calendar-body\/day\/calendar-events\/calendar-event\/tooltip\/featured-image.php\n\n<\/pre><\/div>\n\n\n
Update the Image Size<\/h2>\n\n\n\n
In your copied file, look for the line (around line 29) that defines the src<\/code> attribute of the image.
Change it to use the medium thumbnail size<\/strong>:<\/p>\n\n\n
\nsrc="<?php echo esc_url( $event->thumbnail->medium->url ); ?>"\n\n<\/pre><\/div>\n\n\n
Example Updated HTML<\/h2>\n\n\n\n
Here\u2019s how your updated code should look:<\/p>\n\n\n
\n<div class="tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper">\n\t<img\n\t\tclass="tribe-events-calendar-month__calendar-event-tooltip-featured-image"\n\t\tsrc="<?php echo esc_url( $event->thumbnail->medium->url ); ?>" \n\t\t<?php if ( ! empty( $event->thumbnail->srcset ) ) : ?>\n\t\t\tsrcset="<?php echo esc_attr( $event->thumbnail->srcset ); ?>"\n\t\t<?php endif; ?>\n\t\t<?php if ( ! empty( $event->thumbnail->alt ) ) : ?>\n\t\t\talt="<?php echo esc_attr( $event->thumbnail->alt ); ?>"\n\t\t<?php else : ?>\n\t\t\talt=""\n\t\t<?php endif; ?>\n\t\/>\n<\/div>\n\n<\/pre><\/div>\n\n\n
Why This Helps<\/h2>\n\n\n\n
By switching from full-size to medium thumbnails:<\/p>\n\n\n\n
    \n
  • Images load faster, reducing page weight.<\/li>\n\n\n\n
  • Tooltip performance improves, especially on slower connections.<\/li>\n\n\n\n
  • Visitors still see clear, sharp images on the tooltip without the overhead of high-resolution files.<\/li>\n<\/ul>\n\n\n\n
    Tip:<\/strong> If you want even smaller images for tooltips, you can change medium<\/code> to another registered size in WordPress, such as thumbnail<\/code> or a custom size defined in your theme.<\/p>\n","protected":false},"excerpt":{"rendered":"
    When working with The Events Calendar, you might notice that the event tooltips in Month View load full-size featured images. While this ensures maximum quality, it can also add unnecessary weight to your page, slowing down calendar performance. A simple way to improve load times is to use medium-sized images instead of full-size ones for…<\/p>\n","protected":false},"author":64,"featured_media":1955565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[24,84],"tags":[25,207],"stellar-product-taxonomy":[161],"class_list":["post-1966516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","category-theming-overview","tag-customizations","tag-template-override","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizations"},{"value":84,"label":"Templating & Layout"}],"post_tag":[{"value":25,"label":"Customizations"},{"value":207,"label":"Template override"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jes","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jes\/"},"comment_info":0,"category_info":[{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":110,"filter":"raw","term_order":"0","cat_ID":24,"category_count":110,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0},{"term_id":84,"name":"Templating & Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating & Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":207,"name":"Template override","slug":"template-override","term_group":0,"term_taxonomy_id":207,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1966516"}],"version-history":[{"count":3,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966516\/revisions"}],"predecessor-version":[{"id":1966519,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966516\/revisions\/1966519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1966516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1966516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1966516"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1966516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}