AustinGil

/*
 * This first function maps shortcodes to their respective resources,
 * then checks whether those shortcodes exist in the content,
 * then stores the required resource handles in a custom field.
 * This way, we aren't running resource-intensive functions on every page load.
 */
function check_post_shortcodes($post_id) {

	// Map conditional shortcodes to their respective resource handle
	// Remember to manually dequeue resource handles below as well.

AustinGil

.fluid-oembed {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.fluid-oembed iframe,
.fluid-oembed object,
.fluid-oembed embed {

AustinGil

/* 
 * Note: you will need to add width and height to your container elements. 
 * These classes are designed to be helpers to get add the styles needed.
 */

/* Set common styles for the container elements */
.img-cover,
.img-contain,
.img-circle {
    position: relative;

AustinGil

<?php while (have_posts()) : the_post(); ?>
	<?php 
	// Get the placeholder image and full size image URLs
	if ( has_post_thumbnail() ) {
		$image_id = get_post_thumbnail_id();

		$full_size_image = wp_get_attachment_image_src( $image_id,'full', true);
		$full_size_image_url = $full_size_image[0];

		$placeholder_image = wp_get_attachment_image_src( $image_id,'thumbnail', true);