further inline svg handling refinements
This commit is contained in:
parent
9c38938bf4
commit
5e3c175ec0
|
|
@ -20,23 +20,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
// // for navbar-brand logo, could be used for other non-icon SVGs with an extra class to controll the size
|
||||
// .logo {
|
||||
// display: inline-flex;
|
||||
// align-self: center;
|
||||
// }
|
||||
|
||||
// .logo svg,
|
||||
// .logo img {
|
||||
// height: 5.3rem;
|
||||
// fill: currentColor;
|
||||
// }
|
||||
|
||||
// .logo.baseline svg,
|
||||
// .logo img {
|
||||
// top: 0.15em;
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
svg {
|
||||
&.img {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ import '../css/app.scss'
|
|||
// import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
|
||||
import "../raw/rdnyc-logo.svg"; // rdnyc logo
|
||||
// other:
|
||||
import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
|
||||
import "../../node_modules/@mdi/svg/svg/home.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
|
||||
// import "../../node_modules/@mdi/svg/svg/home.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/information.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/account.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
|
||||
import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
|
||||
import "../../node_modules/@mdi/svg/svg/typewriter.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/typewriter.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
|
||||
// import "../../node_modules/@mdi/svg/svg/rss.svg";
|
||||
|
|
|
|||
|
|
@ -1,37 +1,52 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Function to support inline SVG icons by name with div wrapper
|
||||
* example inline SVG function args array supported keys
|
||||
*/
|
||||
// function svg_icon_use($icon_name, $div_class = '') {
|
||||
// $div_class .= ' icon';
|
||||
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
// return $output . "</svg></div>";
|
||||
// };
|
||||
// array(
|
||||
// 'div_class' => 'icon baseline', // or 'img logo' or something
|
||||
// 'svg_class' => '',
|
||||
// 'svg_title' => '',
|
||||
// 'role_img' => false,
|
||||
// 'aria_hidden' => true
|
||||
// )
|
||||
|
||||
// function svg_logo_use($icon_name, $div_class = '', $svg_title = 'Logo') {
|
||||
// $div_class .= ' logo';
|
||||
// $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" role=\"img\"><title>$svg_title</title>";
|
||||
// $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icon-sprites.svg#$icon_name\"></use>";
|
||||
// return $output . "</svg></div>";
|
||||
// };
|
||||
/**
|
||||
* inline SVG function
|
||||
* desired SVG must exist in ./dist/images,
|
||||
* preferably by import in main.js and processing by webpack
|
||||
*/
|
||||
function inline_svg( $svg_name, $args = array() ) {
|
||||
// load args or defaults
|
||||
$div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : '';
|
||||
$svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : '';
|
||||
$svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : '';
|
||||
$svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false;
|
||||
$svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true;
|
||||
|
||||
function inline_svg(
|
||||
$svg_name,
|
||||
$div_class = 'icon',
|
||||
$svg_class = '',
|
||||
$svg_title = '',
|
||||
$svg_role_img = false,
|
||||
$svg_aria_hidden = true) {
|
||||
// load initial svg content
|
||||
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
|
||||
$to_replace = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
|
||||
$svg_content = str_replace($to_replace, $svg_class, $svg_content);
|
||||
|
||||
// set svg class
|
||||
$class_target = $svg_class == '' ? 'class="{{class-placeholder}}"' : '{{class-placeholder}}';
|
||||
|
||||
// replace svg class
|
||||
$svg_content = str_replace($class_target, $svg_class, $svg_content);
|
||||
|
||||
// handle if role=img
|
||||
$svg_content = $svg_role_img ? str_replace('<svg ', '<svg role="img" ', $svg_content) : $svg_content;
|
||||
|
||||
// handle if aria_hidden
|
||||
$svg_content = $svg_aria_hidden ? str_replace('<svg ', '<svg aria-hidden="true" ', $svg_content) : $svg_content;
|
||||
|
||||
// handle svg title
|
||||
$svg_title = $svg_title == '' ? '' : '<title>' . $svg_title . '</title>';
|
||||
$svg_content = substr_replace($svg_content, $svg_title, strpos($svg_content,'>') + 1, 0);
|
||||
|
||||
// handle if div class
|
||||
$svg_content = $div_class == '' ? $svg_content : '<div class="' . $div_class . '">' . $svg_content . '</div>';
|
||||
|
||||
// return assembled svg (or div>svg)
|
||||
return $svg_content;
|
||||
};
|
||||
|
||||
|
|
|
|||
18
header.php
18
header.php
|
|
@ -48,14 +48,14 @@ namespace WP_RDNYC;
|
|||
esc_url( home_url( '/' ) )
|
||||
);
|
||||
|
||||
// printf( '<span class="font-handbrush">%1$s</span>',
|
||||
// esc_html( get_bloginfo( 'name' ) )
|
||||
// );
|
||||
// echo svg_logo_use("rdnyc-logo", "", "Recovery Dharma New York City");
|
||||
echo inline_svg( 'svg-rdnyc-logo', '', 'img header-logo', 'Recovery Dharma New York City', true, false );
|
||||
// echo '<div class="logo">' . file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ) . '</div>';
|
||||
// echo str_replace("{{class-name}}", 'logo',
|
||||
// file_get_contents( get_template_directory_uri() . '/dist/images/svg-rdnyc-logo.svg' ));
|
||||
echo inline_svg( 'svg-rdnyc-logo',
|
||||
array(
|
||||
'svg_class' => 'img header-logo',
|
||||
'svg_title' => 'Recovery Dharma New York City',
|
||||
'svg_role_img' => true,
|
||||
'svg_aria_hidden' => false
|
||||
)
|
||||
);
|
||||
|
||||
echo "</a>";
|
||||
?>
|
||||
|
|
@ -88,8 +88,6 @@ namespace WP_RDNYC;
|
|||
'menu_class' => 'navbar-nav',
|
||||
'menu_item_class' => 'nav-item',
|
||||
'link_class' => 'nav-link font-monospace fs-6'
|
||||
// 'link_before' => '<span>',
|
||||
// 'link_after' => '</span>'
|
||||
]);
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
|
|||
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
||||
<button type="submit" class="btn btn-outline-light" title="Search">
|
||||
<?php echo inline_svg('mdi-magnify', 'icon baseline') ?>
|
||||
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ) ?>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -49,48 +49,3 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
|
|||
}
|
||||
return $atts;
|
||||
}, 2, 3 );
|
||||
|
||||
// /**
|
||||
// * Filter to add icons to navbar menu items
|
||||
// */
|
||||
// add_filter( 'wp_nav_menu_objects', function($items, $args) {
|
||||
// $svgicon_prefix = 'icon-';
|
||||
// foreach ( $items as $k => $object ) {
|
||||
// foreach ($object->classes as $c) {
|
||||
// if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
|
||||
// $icon_slug = str_replace($svgicon_prefix, '', $c);
|
||||
// $object->title = svg_icon_use($icon_slug, 'baseline') . "\\" . $object->title;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return $items;
|
||||
// }, 1, 2 );
|
||||
|
||||
// /**
|
||||
// * Filter to remove syntax-highlighting-code-block plugin styles from frontend
|
||||
// */
|
||||
// add_filter('syntax_highlighting_code_block_styling', '__return_false');
|
||||
|
||||
|
||||
// /**
|
||||
// * Set document title (in html head) to be reversed with '\' separator
|
||||
// */
|
||||
// add_filter( 'document_title_separator', function ( $separator ) {
|
||||
// return '\\';
|
||||
// } );
|
||||
// add_filter('document_title_parts', function ($title) {
|
||||
// return (is_home() || is_front_page()) ? $title : array_reverse($title);
|
||||
// });
|
||||
|
||||
|
||||
// /**
|
||||
// * Exclude pages from WordPress Search
|
||||
// */
|
||||
// if (!is_admin()) {
|
||||
// add_filter('pre_get_posts',function($query) {
|
||||
// if ($query->is_search) {
|
||||
// $query->set('post_type', 'post');
|
||||
// }
|
||||
// return $query;
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in a new issue