Tag: CSS

A compilation of embedded posts containing information on how I went about adding support for Co-Authors Plus.

This allowed for multiple authors to work on the same posts/pages and have their names added to a list of links to author archives automatically displayed below their work (which now display every post or page they have authored or co-authored).

Combining my solutions for cropping images into squares and customising embedded posts:

I altered the styles to crop images into squares.

/**
 * Customises the style/colours of embedded posts (David Stockdale).
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed the  custom styles (David Stockdale).
 */
function embed_styles() {
    echo <<<CSS
<style>
	.wp-embed-author {
		margin-top: 0.5em;
	}
	.wp-embed-author a {
		color: #a6191a;
	}
	.wp-embed-author a:hover {
		color: #454545;
 	}
 	.wp-embed-featured-image {
 		width: 150px!important;
		height: 150px!important;
		
 	}
	.wp-embed-featured-image > a > img {
 		width: 150px!important;
		object-fit: cover;
		height: 150px!important;
 	}
</style>
CSS;
}

I then copied “embed-content.php” from “/wp-includes/theme-compat/” to my child themes folder and edited it to force all featured images to be considered squares.

<?php
/**
 * Contains the post embed content template part
 *
 * When a post is embedded in an iframe, this file is used to create the content template part
 * output if the active theme does not include an embed-content.php template.
 *
 * @package WordPress
 * @subpackage Theme_Compat
 * @since 4.5.0
 */
?>
	<div <?php post_class( 'wp-embed' ); ?>>
		<?php
		$thumbnail_id = 0;

		if ( has_post_thumbnail() ) {
			$thumbnail_id = get_post_thumbnail_id();
		}

		if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
			$thumbnail_id = get_the_ID();
		}

		/**
		 * Filters the thumbnail image ID for use in the embed template.
		 *
		 * @since 4.9.0
		 *
		 * @param int $thumbnail_id Attachment ID.
		 */
		$thumbnail_id = apply_filters( 'embed_thumbnail_id', $thumbnail_id );

		if ( $thumbnail_id ) {
			$aspect_ratio = 1;
			$measurements = array( 1, 1 );
			$image_size   = 'full'; // Fallback.

			$meta = wp_get_attachment_metadata( $thumbnail_id );
			if ( ! empty( $meta['sizes'] ) ) {
				foreach ( $meta['sizes'] as $size => $data ) {
					if ( $data['height'] > 0 && $data['width'] / $data['height'] > $aspect_ratio ) {
						$aspect_ratio = $data['width'] / $data['height'];
						$measurements = array( $data['width'], $data['height'] );
						$image_size   = $size;
					}
				}
			}

			/**
			 * Filters the thumbnail image size for use in the embed template.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $image_size   Thumbnail image size.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );

			/**
			 * 
			 * !!!!!! CHANGED TO PREVENT RECTANGLES !!!!!!
			 * 
			 */
			$shape = 'square';

			/**
			 * Filters the thumbnail shape for use in the embed template.
			 *
			 * Rectangular images are shown above the title while square images
			 * are shown next to the content.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $shape        Thumbnail image shape. Either 'rectangular' or 'square'.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );
		}

		if ( $thumbnail_id && 'rectangular' === $shape ) :
			?>
			<div class="wp-embed-featured-image rectangular">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

		<p class="wp-embed-heading">
			<a href="<?php the_permalink(); ?>" target="_top">
				<?php the_title(); ?>
			</a>
		</p>

		<?php if ( $thumbnail_id && 'square' === $shape ) : ?>
			<div class="wp-embed-featured-image square">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

		<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

		<?php
		/**
		 * Prints additional content after the embed excerpt.
		 *
		 * @since 4.4.0
		 */
		do_action( 'embed_content' );
		?>

		<div class="wp-embed-footer">
			<?php the_embed_site_title(); ?>

			<div class="wp-embed-meta">
				<?php
				/**
				 * Prints additional meta content in the embed template.
				 *
				 * @since 4.4.0
				 */
				do_action( 'embed_content_meta' );
				?>
			</div>
		</div>
	</div>
<?php

Thus creating a more uniform look:

After quite a bit of searching I found the easiest way to add custom Gutenberg styles.

This single action contains both the registration of the style and the CSS of the style itself.

Square

The best way to bring uniformity to columns of images.

/**
 * Adds custom Gutenberg Image Block Style "Square" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-square img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;}';
	register_block_style('core/image', [
		'name' => 'square',
		'label' => __('Squared', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Takes the edge off.

/**
 * Adds custom Gutenberg Image Block Style "Circle" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-circle img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle',
		'label' => __('Circled', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

I feel like Circle could be improved…