Images

Index

• Change image aspect ratios
• Change the "image behind" solid overlay to a gradient

---

Change image aspect ratios

Changes landscape images in the Homepage Posts block, Archives and Search from 4:3 to 16:9.

The aspect ratio is set using the bottom padding, padding-bottom: 56.25%; in the example. It can be updated to a different aspect ratio; you can calculate the percentrage to use for Landscape images with height / width * 100 (eg. 9 / 16 * 100 = 56.25).

/**
 * Image Shapes
 * Switch landscape images to 16:9
 */
.wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail a,
.archive .post-thumbnail a, 
.blog .post-thumbnail a, 
.search .post-thumbnail a {
	display: block;
	margin-bottom: 1em;
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
}

.wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail img, 
.archive .post-thumbnail img, 
.blog .post-thumbnail img,
.search .post-thumbnail img {
	height: 100%;
	left: 50%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

---

Change the "image behind" solid overlay to a gradient

This example includes an optional text shadow for each style; these aren't always necessary, but can be helpful to make the text more legible against the photo background.

Homepage Posts Block

.wpnbha.image-alignbehind .post-has-image  {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

div.wpnbha.image-alignbehind .post-has-image .post-thumbnail::after { 
	background: linear-gradient(0deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 60%); 
}

Single Post - Featured Image Behind

.featured-image-behind {
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.featured-image-behind:before { 
	background: linear-gradient(0deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 60%); 
}