Centric Pro Header Image

[bluebird]

Hi all,

I was wondering if someone could give me an idea on how add/upload an SVG image to the header. I have tried adding custom functions via functions.php in order to enable the uploading of SVG images, but it does not work. I have also tried using a plugin to no avail.

Here are the functions that I tried to use:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

function fix_svg_thumb_display() {
  echo '
    td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
      width: 100% !important;
      height: auto !important;
    }
  ';
}
add_action('admin_head', 'fix_svg_thumb_display');

Thanks in advance to anyone who can assist!

[emasai]

You cannot upload svg files through the uploader, you need to add them via FTP to the images folder and call them from there.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Brad Dalton]

Untested but try this code

There are also 3 other ways to use SVG in the header.

---

Tutorials for StudioPress Themes.

[bluebird]

Hi Emasai and Brad,

Thanks for getting back to me. I tried to add the image by calling it from my images folder like so:

add_theme_support( 'custom-header', array(
    'default-image'   => get_stylesheet_directory_uri() . '/images/logo.svg',
    'width'           => 100,
    'height'          => 100,
    'header-selector' => '.site-title a',
    'header-text'     => false
) );

...and it did not work...

I also tried to add the image via some javascript:

var image = document.createElement("img");
      
      var imageParent = document.querySelector("a");
      var searchPic = new Image(100,100);
       searchPic.src = "images/logo.svg";
      // image.id = "Id";
      // image.className = "class";
      image.src = searchPic.src;
      imageParent.innerHTML = "";
      imageParent.appendChild(image);

With this code the link still works, but the image (even though I can see it referenced in the console) does not appear as it should.

I also tried a plugin to no avail. I also tried the code that is referenced the CSS Tricks link above and that didn't work either.

Sigh....... I'm beginning to think that it's just not possible. Hopefully I'm wrong.

Thanks again:-)

[Author]

Posts