Skip to content

Instantly share code, notes, and snippets.

@mountbatt
Created February 10, 2021 09:48
Show Gist options
  • Save mountbatt/7d03deda550db8464edd13da96ecf525 to your computer and use it in GitHub Desktop.
Save mountbatt/7d03deda550db8464edd13da96ecf525 to your computer and use it in GitHub Desktop.
Use a SVG-shape for images in WordPress
<!-- this is our svg in /images/inline-portrait.svg.php. Make sure the filename ends with *.svg.php -->
<!-- in the "pattern" we create a unique identifier with a sanitized url of the image -->
<!-- this "id" is used as "fill" -->
<svg aria-label="<?php the_title(); ?>" role="img" viewBox="0 0 256 257" version="1.1" class="">
<title><?php the_title(); ?></title>
<defs>
<pattern id="imageID-<?php echo trim(preg_replace('/[^a-z0-9]+/i',"", strtolower(htmlspecialchars_decode($url)))); ?>" width="100%" height="100%" patternUnits="userSpaceOnUse">
<image height="100%" width="100%" x="0" xlink:href="<?php echo $url;?>" y="0"></image>
</pattern>
</defs>
<g fill="url(#imageID-<?php echo trim(preg_replace('/[^a-z0-9]+/i',"", strtolower(htmlspecialchars_decode($url)))); ?>)">
<path stroke="" class="strokeWidth" d="M1,128 C-4.92992601,249.698873 87.9635986,256 122.178175,255.590698 C156.392751,255.181395 218.754149,233.573371 243.18795,183.392256 C259.477151,149.938178 259.477151,89.0407775 243.18795,0.700053043 C85.6826007,4.43410214 4.953284,46.8674178 1,128 Z"></path>
</g>
</svg>
<?php
// in your template:
// submit an image url via set_query_var like this
set_query_var('url', get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ));
// get template_part from an svg
get_template_part('images/inline','portrait.svg');
?>
@mountbatt
Copy link
Author

Bildschirmfoto 2021-02-10 um 10 49 01

– Inspired by XING

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment