In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the “fade in” work (changing opacity from 0 to 1). Easy cheesy and just a dollop of JavaScript.<\/p>\n
It should be noted that on the live version of the site unfortunately this cool technique wouldn’t work. In order for it to be really effective, we need to know the aspect ratio of the image server-side, we can can create the grid instantly with the correct placeholders. Unfortunately we don’t have that information available to us in the real gallery. We can use PHP to get the dimensions, but it’s very slow. Instead, we wait for all the images to load and then fade in their opacity. Not quite as cool and a bit slower, but at least less loading janky-ness.<\/p>\n","protected":false},"excerpt":{"rendered":"
In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18351,"url":"https:\/\/css-tricks.com\/lodge\/v10\/051-smooth-loading-gallery-part-1\/","url_meta":{"origin":18353,"position":0},"title":"#051: Smooth Loading Gallery, Part 1","date":"September 18, 2012","format":false,"excerpt":"We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don't have a width\/height to\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18562,"url":"https:\/\/css-tricks.com\/lodge\/v10\/93-an-attempt-at-smooth-loading-gallery-pages\/","url_meta":{"origin":18353,"position":1},"title":"#93: An Attempt at Smooth Loading Gallery Pages","date":"September 30, 2012","format":false,"excerpt":"We spent all this time in our static mockup making some clever JavaScript that would \"smooth load\" the images in the Gallery. Now that we have the real Gallery going with real images, that is gone. Essentially, we need to get our image wrappers having a padding-top of the aspect\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332875,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","url_meta":{"origin":18353,"position":2},"title":"aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":20642,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/031-limiting-the-slider-height-for-desktop\/","url_meta":{"origin":18353,"position":3},"title":"#031 – Limiting the Slider Height for Desktop","date":"March 18, 2013","format":false,"excerpt":"When the browser window gets larger, the slider at the top of the homepage gets ridiculously big. This is a mobile first series, but since the mobile version of the slider is already working well (perhaps we should load smaller images, but functionally it's cool) we can focus on making\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18228,"url":"https:\/\/css-tricks.com\/lodge\/v10\/029-integrating-fitvids-js\/","url_meta":{"origin":18353,"position":4},"title":"#029: Integrating FitVids.js","date":"September 12, 2012","format":false,"excerpt":"Images aren't the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of , but\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195512,"url":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","url_meta":{"origin":18353,"position":5},"title":"Maintain Aspect Ratio Mixin","date":"February 10, 2015","format":false,"excerpt":"This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here's a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: \"\"; width: 100%; padding-top: ($height \/ $width)\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18353"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18353"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18353\/revisions"}],"predecessor-version":[{"id":209394,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18353\/revisions\/209394"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18353"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}