Skip to content

Images

Jump to bottom
Laurel edited this page Sep 7, 2022 · 6 revisions

Index

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;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
}

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

/* Image Shapes - Fixes for the Customizer, not needed for front-end */
.newspack-customizer .wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail img,
.newspack-customizer.archive .post-thumbnail img,
.newspack-customizer.blog .post-thumbnail img,
.newspack-customizer.search .post-thumbnail img,
.newspack-customizer .wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail amp-img,
.newspack-customizer.archive .post-thumbnail amp-img,
.newspack-customizer.blog .post-thumbnail amp-img,
.newspack-customizer.search .post-thumbnail amp-img,
.newspack-customizer .wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail amp-img *,
.newspack-customizer.archive .post-thumbnail amp-img *,
.newspack-customizer.blog .post-thumbnail amp-img *,
.newspack-customizer.search .post-thumbnail amp-img * {
    height: 100%;
}

.newspack-customizer .wpnbha.is-landscape:not(.image-alignbehind) .post-thumbnail amp-img img,
.newspack-customizer.archive .post-thumbnail amp-img img,
.newspack-customizer.blog .post-thumbnail amp-img img,
.newspack-customizer.search .post-thumbnail amp-img img {
    left: 0;
    object-fit:cover;
    transform: none;
    top: 0;
}

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%); 
}
Clone this wiki locally