SVG support

Hi thierry,

I want to use svg in beans, e.g. for Logo Image. But since beans (or wordpress) does not support using svg, I read beans' original header.php and regisiterd this function:

//svg logo
beans_add_smart_action( 'beans_site_branding_prepend_markup', 'svg_logo_image' );

function svg_logo_image() {
 echo beans_selfclose_markup( 'beans_logo_image', 'img', array(
      'class' => 'tm-logo',
     'src' => get_stylesheet_directory_uri().'/assets/images/logo.svg', // Automatically escaped.
      'alt' => bloginfo( 'name' ), // Automatically escaped.
    ) );
}

Yes it works, but are there better solutions?

Incidentally, I have two more silly question.

I want to move footer modifications to footer.php, (also other fragments) copied footer mods and added beans_load_document();

function.php

// Overwrite the credit.
beans_add_smart_action( 'beans_footer_credit_text_output', 'utbc_footer_left' );

function utbc_footer_left() {

 ?>
  © 20xx - <a href="foo" title="Bar">Buz</a>
  © 20xx - <a href="foo" title="Bar">Buz</a>
  <?php

}

// Load Beans document.
beans_load_document();

But It doesn't works. A blank page is displayed although I surely loaded the beans_load_document() last!

Second, I want to shrink header's padding but don't want to remove. Since uk-block is originally responsive I don't want to overwrite in less. However, uikit doesn't seem to have smaller padding option. How do I mod this smartly?

Thanks,

Hi there, welcome to the community 🙂

Well done for going to check into the code and see how things are made. It is important to understand how to overwrite things in Beans. Instead of copy and pasting (as you would usually in Core themes which isn't really efficient), everything can be modified or removed, from very big blocks of codes (usually referred as fragments) to a single HTML class. I would strongly recommend to read this article which is a good overview and points you to other important articles. If you don't understand it 100%, don't sweat, we are here to help.

So in your case, your modifications apply to the header and footer which are going to apply globally on your website. For that reason, you will make your modifications to your child theme functions.php.

To replace the logo, assuming that you didn't add an image in the customizer, you will first remove the text and then prepend your image in the beans_site_title_link markup. If you have done your home work and read the Beans HTML API, you will know there are actions firing around almost every markup on the page so it will be easy to add your image. We still have a problem though, the site title text remains. Well, if you inspect the page (make sure development mode in Admin->Appearance->Settings is enabled) and look at the logo text, you will see that it is wrap in <!-- open output: beans_site_title_text --><!-- close output: beans_site_title_text -->. When you see that it mean that there is a filter called {$output_id}_output. So you could remove it using add_filter( 'beans_site_title_text_output', '__return_false' ); but I prefer to use Beans helper function as you will see in the code snippet below. So now that we know how to do it, let's do to some magic and add the snippet below in the child theme functions.php

// Remove the site title text.
beans_remove_output( 'beans_site_title_text' );

// Prepend the site title/logo link with our image.
add_action( 'beans_site_title_link_prepend_markup', 'example_logo' );

function example_logo() {

  ?><img src="<?php echo esc_url( get_stylesheet_directory_uri().'/assets/images/logo.svg' ); ?>" alt="<?php echo esc_attr( bloginfo( 'name' ) ); ?>"><?php

}

Boom, you have your new logo.

Moving on to overwriting your footer credits, again you wouldn't overwrite the footer.php file but instead, add the modifications into your child theme functions.php. Here are some code snippets which shows how to modify your footer credits 🙂

The only time you will add template files is when your modifications which applies to a specific view and you want to avoid bloating your functions.php and having to adding to many conditional tags (I recommend to read this article regarding template files in Beans)

This is a lot of explanation and probably a lot to take, but once you master it the same logic applies throughout the framework. It was important to demonstrate how you can replace your logo image as an example but it is also good to know that you can simply add support for SVG uploads as follow (at your own risk):

add_filter( 'upload_mimes', 'example_svg_support' );

function example_svg_support( $mimes ) {

  $mimes['svg'] = 'image/svg+xml';

  return $mimes;

}

If anything doesn't make sense to you, feel free to ask 🙂

Cheers,

PS: It would be much appreciate if you could update your profile with your/a name (first name at least)

Hello everybody, if you still have interest with SVG support :

Inline SVG

SVGs or Scaleable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. To be able to control your SVG via CSS, just add the

data-uk-svg

attribute to the image tag. This will turn your image into an inline SVG including all attributes, like IDs, classes, width and height which you can now easily target using CSS.

<img src="my-image.svg" data-uk-svg>

Hi Oliver,

If I understand well, you want to add the attribute data-uk-svg to Beans image markup. If that is the case, you can just add the following line in your child theme functions.php:

beans_add_attribute( 'beans_logo_image', 'data-uk-svg', '' );

Have fun,

thanks a lot Thierry, bis bald