Fix avatar and social icons with bulletproof rendering
Release / Build & publish plugin zip (push) Successful in 7s

Root cause of social icons rendering as alt text: wp_kses() stripped
the 'data:' prefix from data: URIs in img.src, leaving a relative URL
that 404s. Switched to real .svg files under assets/icons/ referenced
via plugins_url() — kses passes img tags with relative URLs cleanly,
and the icons load as standard images.

Root cause of avatar still being cropped: layout-side issues with
inline-styled <img> in a flex layout. Switched to a <span> with
inline background-image, background-size: cover, background-position:
center — no <img> element, no object-fit reliance, no way to crop wrong.

Also removed the outer <a> wrapper around the .project-owner div
(block-level element inside inline <a> is invalid HTML and was likely
contributing to layout weirdness). The owner name is now an explicit
<a> inside its own span.

Reverted kses to the default wp_kses_post() since we're back to
standard HTML elements only — no SVG, no data URIs, no inline styles
that need a custom allowed list.
This commit is contained in:
Keith Solomon
2026-08-12 17:04:15 -05:00
parent 60db82e459
commit 426d60b692
9 changed files with 25 additions and 79 deletions
+2 -7
View File
@@ -141,15 +141,10 @@ if ( $last_updated ) {
</div>
<?php if ( $settings['templates']['github_owner'] && $owner_avatar && $owner_name ) : ?>
<a href="<?php echo esc_url( $browse_url ); ?>">
<div class="project-owner">
<span class="project-owner-avatar">
<img src="<?php echo esc_url( $owner_avatar ); ?>" alt="<?php esc_attr_e( $owner_name ); ?>" class="owner-avatar" style="display:block;width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0;margin:0;" />
</span>
<span class="project-owner-avatar" style="display:block;width:50px;height:50px;border-radius:50%;background-image:url('<?php echo esc_url( $owner_avatar ); ?>');background-size:cover;background-position:center center;flex-shrink:0;" aria-label="<?php echo esc_attr( $owner_name ); ?>" role="img"></span>
<span class="project-owner-name">
<strong>
<a href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( $owner_name ); ?></a>
</strong>
<a href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html( $owner_name ); ?></a>
</span>
<span class="project-owner-follow">
<a class="button project-follow-button" href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Follow', 'projects-wp' ); ?></a>