Render social-share icons as <img> SVG data URIs
Release / Build & publish plugin zip (push) Successful in 7s
Release / Build & publish plugin zip (push) Successful in 7s
Inline <svg> elements render with their default width/height in browsers even when 'style' and width/height attributes are set (a known quirk in mixed HTML5/SVG content with some CSS specificity scenarios). Switched to <img src='data:image/svg+xml,...'> instead. This is universally well- supported, sizes via standard <img> CSS rules (no namespace/parser edge cases), and the inline 'width=20 height=20 style=width:20px;height:20px' on <img> reliably applies. Added 'img' and 'style' to the kses allowed list so wp_kses() preserves the data: URI src and the inline styles.
This commit is contained in:
Keith Solomon
+27
-9
@@ -350,46 +350,64 @@ function projects_portfolio_social_sharing_buttons( $project_id ) {
|
||||
|
||||
$html = '<div class="project-social-sharing">';
|
||||
|
||||
$svg_icon = function( string $name, string $path ) use ( &$html ) {
|
||||
// Render each social icon as an <img> with an inline SVG data URI.
|
||||
// Using <img> instead of inline <svg> ensures browser CSS sizing and
|
||||
// avoids any namespace/parser quirks with inline SVG in mixed content.
|
||||
$svg = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">' . $path . '</svg>';
|
||||
$data_uri = 'data:image/svg+xml;utf8,' . rawurlencode( $svg );
|
||||
$html .= '<img src="' . esc_attr( $data_uri ) . '" alt="' . esc_attr( $name ) . '" width="20" height="20" style="width:20px;height:20px;display:inline-block;vertical-align:middle;" />';
|
||||
};
|
||||
|
||||
// Facebook.
|
||||
$html .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M7 10v-3a1 1 0 0 1 1 -1h3v-4h4v4h3a1 1 0 0 1 1 1v3h-4v10h-4v-10h-3" /></svg>';
|
||||
$svg_icon( 'Facebook', '<path d="M7 10v-3a1 1 0 0 1 1 -1h3v-4h4v4h3a1 1 0 0 1 1 1v3h-4v10h-4v-10h-3" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// X (Twitter).
|
||||
$html .= '<a href="https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M7 4l10 16m0 -16l-10 16" /></svg>';
|
||||
$svg_icon( 'X', '<path d="M7 4l10 16m0 -16l-10 16" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// LinkedIn.
|
||||
$html .= '<a href="https://www.linkedin.com/sharing/share-offsite/?url=' . $url . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="8" y2="16" /><line x1="8" y1="8" x2="8" y2="8.01" /><line x1="12" y1="16" x2="12" y2="11" /><path d="M16 16v-3a2 2 0 0 0 -4 0" /></svg>';
|
||||
$svg_icon( 'LinkedIn', '<rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="8" y2="16" /><line x1="8" y1="8" x2="8" y2="8.01" /><line x1="12" y1="16" x2="12" y2="11" /><path d="M16 16v-3a2 2 0 0 0 -4 0" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// Reddit.
|
||||
$html .= '<a href="https://www.reddit.com/submit?url=' . $url . '&title=' . $title . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><circle cx="12" cy="12" r="9" /><path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0" /><path d="M12 12h0" /><path d="M8.5 13c.667 .667 1.333 1 2 1s1.333 -.333 2 -1" /></svg>';
|
||||
$svg_icon( 'Reddit', '<circle cx="12" cy="12" r="9" /><path d="M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0" /><path d="M12 12h0" /><path d="M8.5 13c.667 .667 1.333 1 2 1s1.333 -.333 2 -1" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// WhatsApp.
|
||||
$html .= '<a href="https://wa.me/?text=' . $title . '%20' . $url . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M3 21l1.65 -4.75a9 9 0 1 1 3.85 3.85z" /><path d="M9 10c1 2 3 3 5 4" /><path d="M9 13c1 1 2 2 4 3" /></svg>';
|
||||
$svg_icon( 'WhatsApp', '<path d="M3 21l1.65 -4.75a9 9 0 1 1 3.85 3.85z" /><path d="M9 10c1 2 3 3 5 4" /><path d="M9 13c1 1 2 2 4 3" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// Pinterest.
|
||||
$html .= '<a href="https://pinterest.com/pin/create/button/?url=' . $url . '&description=' . $title . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><circle cx="12" cy="12" r="9" /><path d="M8 17c1 -2 1.5 -4 .5 -6s-.5 -4 .5 -6" /><path d="M15 11c.667 -1 1.667 -2.333 3 -4" /></svg>';
|
||||
$svg_icon( 'Pinterest', '<circle cx="12" cy="12" r="9" /><path d="M8 17c1 -2 1.5 -4 .5 -6s-.5 -4 .5 -6" /><path d="M15 11c.667 -1 1.667 -2.333 3 -4" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
// Email.
|
||||
$html .= '<a href="mailto:?subject=' . $title . '&body=' . $url . '" target="_blank" rel="noopener noreferrer">';
|
||||
$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:20px;height:20px;"><path d="M3 7l9 6l9 -6" /><rect x="3" y="5" width="18" height="14" rx="2" /></svg>';
|
||||
$svg_icon( 'Email', '<path d="M3 7l9 6l9 -6" /><rect x="3" y="5" width="18" height="14" rx="2" />' );
|
||||
$html .= '</a>';
|
||||
|
||||
$html .= '</div>';
|
||||
|
||||
// wp_kses_post() strips <svg> by default (the 'post' context doesn't allow it).
|
||||
// Extend the allowed list to keep SVG markup intact so the icons render.
|
||||
// wp_kses_post() strips <svg> tags by default (the 'post' context doesn't
|
||||
// allow them), and would also strip <img> data: URIs we use as a fallback.
|
||||
// Extend the allowed list to keep both forms intact so the icons render.
|
||||
$allowed = wp_kses_allowed_html( 'post' );
|
||||
$allowed['img'] = array(
|
||||
'src' => true,
|
||||
'alt' => true,
|
||||
'width' => true,
|
||||
'height' => true,
|
||||
'style' => true,
|
||||
'aria-hidden' => true,
|
||||
);
|
||||
$allowed['svg'] = array(
|
||||
'xmlns' => true,
|
||||
'class' => true,
|
||||
|
||||
Reference in New Issue
Block a user