I often work for designers that provide their own icon sets. Any chance on including an option to add custom sets?

Comments

drupa11y’s picture

Yes this woule be awesome.

TomDude48’s picture

This is a good idea. I have implemented a way of defining custom iconsets in the latest dev release. Icon sets are described using hook_socialmedia_iconset_info(). You can configure a custom set of icons using this hook.

To implement follow the implementation found in the socialmedia_socialmedia_iconset_info() function in the socialmedia.iconset.inc file.

I would like to implement some alternative ways of doing this in future versions. Particularly one that would allow themes to implement a custom iconset. I will have to think through how to do it though.

Tom

tlangston’s picture

Just want to thank you TomDude48 for this sweet module!

sardbaba’s picture

Hi, I've got the same requirement and I simply solved with few lines of CSS in my theme. For example, the facebook icon can be replaced using that code:

#widgets-element-socialmedia_socialmedia-facebook-profile-button {
	background: transparent url('my/social/iconset/path/under/my/theme/facebook.png') 50% 50% no-repeat;
}
#widgets-element-socialmedia_socialmedia-facebook-profile-button a { float: left; width: 32px; height: 32px; }
#widgets-element-socialmedia_socialmedia-facebook-profile-button a img { display: none; }

Repeating the same code for each icon to be replaced, the job is done.
Sure, this is just a workaround but it is done, in my opinion, in a clean way.

broon’s picture

Visually this might work, but the hidden (original) image will still be loaded by the browser which means an unnecessary request for each icon and thus might result in slower page load time.

I would still prefer a solution by which icon sets could be included within the sites/all/library folder.

Thumbs up for this great module! I prefer it over the alternatives due to combining both share and profile sets.

TomDude48’s picture

I wrote a blog post about how to add custom icon sets using the API: http://www.leveltendesign.com/blog/tom/adding-custom-icon-sets-social-me...

jiddisch’s picture

Thank you Tom,
some questions:
- How do I remove some icons from the icons-set?
- How can I change the icon by hovering the icon? only with JavaScript?

polishyourimage’s picture

I also need this feature - thanks for the great module though!

It'd be great if I could just drop some icons into a specific directory structure and have the module automatically recognize them, or better yet upload the images through the UI...

polishyourimage’s picture

thank you sardbaba for the css

bskibinski’s picture

Issue summary: View changes

Just an update for people looking for this:

The blog TomDude48 wrote about this has a new URL:
http://getlevelten.com/blog/tom/adding-custom-icon-sets-social-media-module

Be aware when copy/pasting the code! there is a small typo in the first codeblock, fixed in below example:

function example_socialmedia_iconset_info() {
  $icons['myicons'] = array(
    'name' => 'My Icons', // name of your icon set
    'publisher' => 'Me', // name of publisher
    'publisher url' => 'http://www.mysite.com', // url to publisher's site
    'styles' => array( // different variants of icons available
      '16x16' => '16x16',
      '32x32' => '32x32',
      '48x48' => '48x48',
    ),
    'path callback' => 'example_icon_path_myicons', // callback for icon urls
  );
  return $icons;
}

Would still be cool if these could be done through the module itself :)

drupa11y’s picture

Cool.

RKopacz’s picture

I am trying to implement this, and it seems as though the code is as instructed but I cannot get the icons to show up in the list of available icon sets.

<?php
function saxton_socialmedia_iconset_info() {
$icons['myicons'] = array(
'name' => 'My Icons', // name of your icon set
'publisher' => 'Me', // name of publisher
'publisher url' => 'http://www.mysite.com', // url to publisher's site
'styles' => array( // different variants of icons available
'32x32' => '32x32',
),
'path callback' => 'saxton_icon_path_myicons', // callback for icon urls
);
return $icons;
}

function saxton_icon_path_myicons($platform = 'twitter', $style = NULL) {
$style = isset($style) ? $style : '32x32';
$path = drupal_get_path('module', 'socialmedia') . '/icons/myicons/' . $style . '/' . ((isset($pt[$platform]))? $pt[$platform] : $platform) . '.png';
return $path;
}

The icons are in the icons folder in the social media module, inside a subdirectory called 32x32. I've tried putting them both in the myicons directory and in that 32x32 subdirectory, without success.

The sole module file is called saxton.module, it is inside a directory called 'saxton' which is inside a folder called 'custom' which is inside the sites/all/modules directory.

I have only four iconsets at the moment: linkedin, twitter, facebook, and googleplus. all are pngs and all follow the naming conventions.

What have I missed?

RKopacz’s picture

Please disregard my comment #12. It was staring me in the face & is fixed.

RKopacz’s picture

Just a question, by jiggering around with the path to icons line n the callback, I can choose to point the path to a directory in the custom module and not the socialmedia module? I just updated the Social media module and it wiped out my icons folder on the update. I understand that's normal, but it would be good to be able to point the to a directory inside the custom module.

I'm going to give it a try and if it works I will post here.

dalemoore’s picture

Were you able to get the paths in a different folder? And also, what was the issue that was staring you in the face? I tried using your code, and the code on the link way up above, and none of them allow an icon set to show for me. Does it have to have ALL of the icons? I am using just the Facebook and Twitter icons, and it seems to check that the Twitter one is there in order to 'activate' so to speak.

tsukasa666’s picture

hello all, i was testing trying to use my own icon set but not luck, so i try to use one of those free available for download, i get the hand drawn icon set, istall the file "Social icons Hand Drawn" inside sites/all/modules/socialmedia/icons/theg-force/, but even using those steps dint show the icons so imnot able to use them, is there any other tutorial that i can follow from cero to make this work, or i better use the css method?

jcl324’s picture

@dalemoore, @RKopacz, here is what I did to put my icons in the libraries structure:

  $path = libraries_get_path('socialmedia') . '/icons/setname/' . $style . '/' .
    ((isset($pt[$platform]))? $pt[$platform] : $platform) . '.png';

where setname = whatever you want your path to be. Notice I used libraries_get_path instead of drupal_get_path and also added a dependency in the .info file.

b-reid’s picture

Status: Active » Postponed

We will look into implementing this into version 2 of this module.