Add dog breed images to a WordPress site

You can show a dog breed image in WordPress without a plugin. Paste an <img> tag and the credit link into a Custom HTML block, or add a small shortcode to a child theme so any post can print the image with [dog_breed slug="pug" view="front-left"].

Pick the image URL

Every breed has a preview at a predictable address. Use the breed slug, the word default for the main set, a view id, and a size of 512 or 1024:

https://dogimage.dev/api/v1/images/pug/default/front-left?size=512

The address answers with a redirect to a transparent WebP file, and an <img> tag follows it on its own. No key is needed for previews. The images are AI-generated illustrations, not photos, so say so if your readers might expect real dogs. Breed slugs are lowercase with hyphens, such as golden-retriever. You can browse them all on the breeds page.

Way 1: a Custom HTML block

This is the quickest route and fits a single post. In the block editor, add a block, search for "Custom HTML" and paste this:

<figure class="dog-breed-image">
  <img
    src="https://dogimage.dev/api/v1/images/pug/default/front-left?size=512"
    alt="Pug, AI-generated illustration, front three-quarter view"
    width="512"
    height="512"
    loading="lazy"
    style="max-width:100%;height:auto;background:#f4f1ea;border-radius:8px"
  />
  <figcaption>
    <a href="https://dogimage.dev/dogs/pug">Pug image: Dog Image API</a>
  </figcaption>
</figure>

Three points about this snippet:

• The figcaption link is the credit. Free previews may be used for any purpose, commercial included, if a visible link to Dog Image API sits next to the image or on the same page. Each breed page gives you this exact snippet.
• The background is transparent in the file. The #f4f1ea tint is only there so the dog stands out on a white page. Remove it if you do not want it.
• width and height reserve space so the page does not jump while the image loads.

The downside is repetition. Ten breeds means ten pasted blocks. That is where a shortcode helps.

Way 2: a shortcode in a child theme

Edit your child theme, not the parent theme, so an update does not erase the code. If you do not have a child theme yet, the WordPress Theme Handbook explains how to make one. Open the child theme's functions.php and add this at the bottom:

<?php
/**
 * [dog_breed slug="pug" view="front-left" name="Pug"]
 * Prints a Dog Image API preview with the credit link.
 */
function mysite_dog_breed_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'slug' => 'pug',
			'view' => 'front-left',
			'name' => '',
		),
		$atts,
		'dog_breed'
	);

	$views = array(
		'front', 'front-left', 'left', 'rear-left', 'rear',
		'rear-right', 'right', 'front-right', 'head',
	);

	$slug = sanitize_title( $atts['slug'] );
	$view = in_array( $atts['view'], $views, true ) ? $atts['view'] : 'front-left';
	$name = '' !== $atts['name']
		? $atts['name']
		: ucwords( str_replace( '-', ' ', $slug ) );

	if ( '' === $slug ) {
		return '';
	}

	$src  = 'https://dogimage.dev/api/v1/images/' . rawurlencode( $slug ) . '/default/' . $view . '?size=512';
	$page = 'https://dogimage.dev/dogs/' . rawurlencode( $slug );
	$alt  = sprintf( '%s, AI-generated illustration, %s view', $name, $view );

	return sprintf(
		'<figure class="dog-breed-image"><img src="%1$s" alt="%2$s" width="512" height="512" loading="lazy" style="max-width:100%%;height:auto"><figcaption><a href="%3$s">%4$s</a></figcaption></figure>',
		esc_url( $src ),
		esc_attr( $alt ),
		esc_url( $page ),
		esc_html( $name . ' image: Dog Image API' )
	);
}
add_shortcode( 'dog_breed', 'mysite_dog_breed_shortcode' );

Now write this in any post, page or Shortcode block:

[dog_breed slug="pug" view="front-left"]
[dog_breed slug="golden-retriever" view="left" name="Golden Retriever"]

Why the output is escaped

A shortcode attribute comes from whoever edits the post, so treat it as input. The function escapes each value for the place it lands:

• esc_url() for the src and href, which also blocks a javascript: address.
• esc_attr() for the alt text inside an HTML attribute.
• esc_html() for the visible link text.

The view is checked against the nine known ids and falls back to front-left. The slug goes through sanitize_title(), which keeps only lowercase letters, digits and hyphens. Note the %% in the max-width:100%% style: inside sprintf a literal percent sign must be doubled.

Choosing a view

The nine ids are front, front-left, left, rear-left, rear, rear-right, right, front-right and head. Use head for a small avatar next to a comment or a byline, and left for a clean side profile. The left side gallery shows every breed from that angle.

Check it

Preview a post that holds the shortcode. You should see the dog and the caption link. If the page shows the shortcode text instead, the code is not loaded: confirm the file is in the active child theme. If the image is missing, open the image URL in a browser tab and check the slug against the breed list.

Limits to know

Hot-linking previews is fine, and your visitors' browsers fetch them directly. Full-size PNG files are different. They need an API key, count against a monthly plan, and are meant to be downloaded once and stored on your side. Read the license before using either kind in a product, and see the docs for the full list of endpoints.

For a plain JavaScript version of the same idea that works on any site, see the breed autocomplete guide.