{"id":1964922,"date":"2025-05-05T05:07:41","date_gmt":"2025-05-05T09:07:41","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1964922"},"modified":"2025-05-05T05:07:44","modified_gmt":"2025-05-05T09:07:44","slug":"customizing-photo-view-grid-option-ratio","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-photo-view-grid-option-ratio\/","title":{"rendered":"Customizing Photo View Grid option ratio"},"content":{"rendered":"\n<p>\u200bThe Events Calendar Pro has introduced a new feature that enhances the visual presentation of events in the Photo View. This feature allows you to display event images in a uniform grid layout, providing a cleaner and more organized appearance.\u200b<\/p>\n\n\n\n<p>To enable this feature:\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>Events \u2192 Settings \u2192 Display<\/strong> in your WordPress dashboard.\u200b<\/li>\n\n\n\n<li>Locate the option labeled <strong>\u201cDisplay images as a grid on Photo View\u201d<\/strong>.\u200b<\/li>\n\n\n\n<li>Check this option to activate the grid layout.\u200b<\/li>\n<\/ol>\n\n\n\n<p>Once enabled, event images in the Photo View will be displayed in a consistent 16:9 aspect ratio, ensuring a harmonious and professional look across your events calendar.<\/p>\n\n\n\n<p>If the default 16:9 aspect ratio doesn&#8217;t align with your design preferences, you can easily adjust it using CSS. For instance, to change the aspect ratio to 4:3, you can add custom CSS either by editing your theme\u2019s <strong>style.css<\/strong> file directly or by going to <strong>Appearance > Customize > Additional CSS<\/strong> in your WordPress dashboard, which provides a safer and easier way to apply CSS changes without modifying theme files.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-view--photo.tribe-events-pro.tribe-events-pro-photo--grid \n.tribe-events-pro-photo__event \n.tribe-events-pro-photo__event-featured-image-link {\n    padding-top: 75%;\n}\n<\/pre><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Here&#8217;s how the calculation works:\u200b<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For a 4:3 aspect ratio: (3 \/ 4) * 100 = 75%\u200b<\/li>\n\n\n\n<li>For the default 16:9 aspect ratio: (9 \/ 16) * 100 = 56.25%\u200b<\/li>\n<\/ul>\n\n\n\n<p>By adjusting the <code>padding-top<\/code> value, you can set the desired aspect ratio for your event images, allowing for greater flexibility in your calendar&#8217;s design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u200bThe Events Calendar Pro has introduced a new feature that enhances the visual presentation of events in the Photo View. This feature allows you to display event images in a uniform grid layout, providing a cleaner and more organized appearance.\u200b To enable this feature:\u200b Once enabled, event images in the Photo View will be displayed&#8230;<\/p>\n","protected":false},"author":60,"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":[116,24],"tags":[23,25],"stellar-product-taxonomy":[158],"class_list":["post-1964922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","category-customizing","tag-css","tag-customizations","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"},{"value":24,"label":"Customizations"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Atousa","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/atousa\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS &amp; Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","category_parent":24},{"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}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"},{"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"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964922","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\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1964922"}],"version-history":[{"count":3,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964922\/revisions"}],"predecessor-version":[{"id":1965068,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1964922\/revisions\/1965068"}],"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=1964922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1964922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1964922"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1964922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}