search

evertiro / historical-redux2

A simple, easily extendable options framework for WordPress based on NHP Theme Options Framework.
http://reduxframework.com
Other
105 stars 43 forks source link

Feature Request: Social Icons List and Sort #70

Closed ghost closed 11 years ago

ghost commented 11 years ago

A bit of a feature request. Not sure if this exists out in the wild already? Searched and nothing came up. This is where my inexperience comes in. I'm looking for some help.

Would it be possible to emulate the radio_img option, but include a complete list of social media icons (e.g. all the social media glyphicons)? Then we can have the user click the icon they want to program (like a radio_img), and below the list have a textbox for the URL corresponding to the social media icon?

I suppose we'd also need some way to allow them to sort it to their preference?

Then we would just call the social media array within the theme, is my thought.

I took a look at the radio_img class, but was getting a little lost with how it was being called and how best to modify it.

Any thoughts?

psaikali commented 11 years ago

I actually came up with my own solution for social links, with a predefined list set when declaring the option, each field being draggable. Let me know if you're interested, I'll pull-request some new fields soon or later but can upload this somewhere until then.

        array(
            'id' => 'general_sociallinks',
            'type' => 'text_sortable',
            'title' => __('Social links', Redux_TEXT_DOMAIN),
            'sub_desc' => __('Define and reorder the URL of your social networks.', Redux_TEXT_DOMAIN),
            'options' => array(
                'tw' => 'Twitter',
                'fb' => 'Facebook',
                'gplus' => 'Google+',
                'sky' => 'Skype',
                'lin' => 'LinkedIn',
                'yt' => 'Youtube',
                'vim' => 'Vimeo',
                'inst' => 'Instagram',
                'fli' => 'Flickr',
                'pin' => 'Pinterest',
                'tum' => 'Tumblr'
            )
        ),

screen-2013-01-31-7 25 32 PM

evertiro commented 11 years ago

Definitely interested! If you got the draggable part figured out you want to take a look at issue #32?

ghost commented 11 years ago

This looks great! Even has the draggable sorting list. Would you mind sharing it?

Only concern: with the pre-defined list - any ability for the user to program in custom links? For example if a user wanted to put in Email/RSS/Dribbble, etc?

Thanks

evertiro commented 11 years ago

@availium I've already got some enhancements in mind that would resolve your concern.

ghost commented 11 years ago

@ghost1227 relating to @psaikali code or something else?

psaikali commented 11 years ago

Here it is, copy that in /fields/text_sortable > http://img.saika.li/MZ6J You might want to add some custom css to '.textsortable .drag' to replace the 'DRAG' text. Not sure if I understood your question about custom links: if you look at my code above, you'll see that my 'options' => array(......)_ contains the list of the field, so you can add Email/RSS/Dribble, then code your theme so that if a field is blank, you ignore it.

evertiro commented 11 years ago

@availium Relating to extending his code.

@psaikali I'll commit that officially tonight. Thanks!

psaikali commented 11 years ago

Great man, thx. Again, I'll release a couple of new fields that I coded soon or later, I just want to release a theme first. Then I'll give back to the community ;)

2013/1/31 Ghost1227 notifications@github.com

@availium https://github.com/availium Relating to extending his code.

@psaikali https://github.com/psaikali I'll commit that officially tonight. Thanks!

— Reply to this email directly or view it on GitHubhttps://github.com/ghost1227/Redux-Framework/issues/70#issuecomment-12967215.

Pierre Saïkali psaikali@gmail.com

ghost commented 11 years ago

Perfect, will give this a try. Thanks!

My concern was that the user will be presented with this pre-defined list. They're not going to open up the .php file to add their own custom links. So was wondering if it would be possible to have a "Add More" link where they could manually add the social link that's missing from the default list.

I think @ghost1227 knows what I'm looking for. Will keep an eye out for it!

@ghost1227 I'm excited to see what you can whip together!

evertiro commented 11 years ago

@availium I know exactly what you're looking for, and it's coming within the next day or two! Initial commit based on @psaikali's code will definitely be tonight though!

ghost commented 11 years ago

Hi @psaikali, I have a question about your field_text_sortable.php. I noticed on line 32, that you have:

if (isset($this->value) && is_array($this->value)) {

I am curious if this conditional statement is here just to show the name of the field in the input's placeholder box?

If so, I found that replacing isset with empty worked better because when I click save, the functions create empty values within the database. However if it's empty, then I can still see the placeholder name in the input box.

Other than the placeholder not showing up, I couldn't see what other benefits this had. Just looking to see what you had in mind with it.

Hope this makes sense. Thoughts?

Thanks!

ghost commented 11 years ago

Also wanted to contribute the CSS I put together for this for inclusion. It wasn't in the zip file, so I whipped this together quickly. I used an included glyphicon as the drag image for now. Feel free to change/modify it if you see an error! I placed this at the end of options.css. 

.redux-opts-group-tab .form-table .text_sortable { clear:both; }
.redux-opts-group-tab .form-table .text_sortable label { float:left; display:block; width:100px; }
.redux-opts-group-tab .form-table .text_sortable input { width:200px; }
.text_sortable .drag { color:transparent; margin-left:1em; background: url('../img/icons/glyphicons_186_move.png') no-repeat; background-size: 15px 15px; background-position:center; }
evertiro commented 11 years ago

First attempt committed on the wrong branch. :frowning: However... this has now been pushed to the dev branch with a few tweaks. I modified it to properly trigger the change notification when reordering (not just editing text), and switched from image to iconfont for the drag icon.

evertiro commented 11 years ago

Quick question... Why did you chose that particular sorting plugin?

psaikali commented 11 years ago

Hmm, I found it lightweight and it does the job, do you have any other good alternatives?

evertiro commented 11 years ago

If I recall correctly, there's a sort method in jQuery UI...

psaikali commented 11 years ago

OK, then I'll try to use this one in my pull request. Same thing for the slider field, I used another library, but apparently jQuery UI as a widget for that.

2013/2/1 Ghost1227 notifications@github.com

If I recall correctly, there's a sort method in jQuery UI...

— Reply to this email directly or view it on GitHubhttps://github.com/ghost1227/Redux-Framework/issues/70#issuecomment-12998653.

Pierre Saïkali psaikali@gmail.com

evertiro commented 11 years ago

:smiley:

evertiro commented 11 years ago

The less arbitrary libraries we have to commit the better, at least in my opinion. I'd rather have a few comprehensive ones than a different one for each field.

psaikali commented 11 years ago

Agreed!

2013/2/1 Ghost1227 notifications@github.com

The less arbitrary libraries we have to commit the better, at least in my opinion. I'd rather have a few comprehensive ones than a different one for each field.

— Reply to this email directly or view it on GitHubhttps://github.com/ghost1227/Redux-Framework/issues/70#issuecomment-13001067.

Pierre Saïkali psaikali@gmail.com

ZaheerAbbasAghani commented 8 years ago

Use of undefined constant Redux_TEXT_DOMAIN - assumed 'Redux_TEXT_DOMAIN' in home/vol13_5/base.pk/basep_17328406/htdocs/wp-content/themes/smart/functions/admin-config.php on line612