Category: Code Snippets ⁄ Chris Yee

Output Original Image Size in WordPress

Here’s how you can output the original image size using the wp_get_attachment_image() function: The key is to use original_image as the size attribute. This will output the original image with no scaling applied. This should be used sparingly because original images are usually a large file size. Alternatively using full as the size attribute will […]

Code Snippets

Smooth Image Zoom on Hover with CSS

This simple CSS hover effect will subtly & smoothly scale an image 20% larger on hover. HTML CSS

Code Snippets

Full Width Container with CSS

Here’s how you make a full-browser-width container when we’re inside a max-width/limited wrapper. HTML Full width parent container In this example my parent container is set at a max-width of 100% with a nested content wrapper. Constrained parent container In this example my parent container (.site-main) is set at a max-width of 1800px with a […]

Code Snippets

Responsive Google Slides & YouTube Embeds with CSS

Here’s a simple way using only CSS to make your Google Slides & YouTube/Vimeo embeds look great on your website. The Solution Add the following CSS to your website. These CSS selectors will target any iFrame’s with the domains of docs.google.com, youtube.com, and player.vimeo.com and make them responsive with the aspect ratio of 16 / […]

Code Snippets

Responsive Google Slides

By default, Google Slides won’t look very good when embedded on your responsive site. Fortunately, this issue is very easy to remedy with a bit of HTML & CSS. The Solution 👉 Heads up! There’s a easier & more modern solution using only CSS here. Just wrap the Google Slides embed code in a <div> […]