Style My Gallery
Please support development of this plugin by making a donation.
Welcome to the home page for the Style My Gallery WordPress plugin.
This plugin will style galleries attached to your WordPress page or post using popular scripts. It displays a simple thumbnail list if Javascript is disabled. Style My Gallery supports multiple galleries on a single page.
Scripts currently supported:
- FlexSlider, an awesome, fully responsive jQuery slider plugin by Tyler Smith.
- ImageFlow, an unobtrusive and user friendly JavaScript image gallery by Finn Rudolph.
Installation
- Download and unzip to the /wp-content/plugins/ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- No configuration is necessary!
Adding a gallery to your page/post
- Upload images using the WordPress image uploader on your post or page or into the media library.
- Use the shortcode [style-my-gallery] anywhere in the post or page
Options:
The first set of options are the standard WordPress gallery options:
- id
- order (Default is ASC)
- orderby (Default is menu_order ID)
- include
- exclude
- size (Default is large. Choose thumbnail, medium, large or full)
The following options are specific to this plugin:
- style – Default is ‘FlexSlider’. Also supports ‘ImageFlow’.
- css – Adds the given CSS styles to containing box. Example [style-my-gallery css="max-width: 400px;"]
- options – Adds the given options to the JavaScript object. Example [style-my-gallery options='animation: "fade", controlNav: false,']
- mediatag – Works with the Media Tags plugin by Paul Menard. This option will pull matching media out of your media library and include it in the gallery
Note – if using the “slide” animation with FlexSlider, you must specify ‘controlsContainer: “.flex-container”‘ in your option list.
Examples
[style-my-gallery css="max-width:300px;margin-bottom:30px;"]
Fish slide description
Dolphin slide description
Swan slide description
Horse slide description
[style-my-gallery style="ImageFlow" size='medium' css='max-width: 600px;background-color:#000;' options='slideshowAutoplay: true, slideshow: true']
Changelog
Version 1.0 (January 14, 2012)
- Initial version
Version 1.1 (January 17, 2012)
- Fix the display of FlexSlider direction arrows when using the slide animation by adding a new outer div with class .flex-container
Hey Bev, great plugin (and perfect timing for my needs).
I did however notice a problem when using the FlexSlider animation:”slide” option.
Apparently FlexSlider requires different markup depending if animation is set to ‘fade’ or ‘slide’ mode. Take a look at Tyler’s source comments here flex.madebymufffin.com/demo/. It also needs the controlsContainer parameter.
When using the additional div.flex-container we should also create a new css style method for the attr shortcode. For now I added a ‘containercss’ in the shortcode_atts array (line 128).
I then added it to line 191:
$output = ‘smg_instance . ‘” class=”flexslider” ‘;
But this is a total hack (and wrong)…it would be great if there were something like a few new attrs in the smg shortcode (perhaps animation=’fade’|'slide’, and containercss=’%css%’).
Another tweak I ended up doing (not sure if you care to implement) was to the addScripts function…pointing to my template URL so the scripts and styles point to the theme directory.
Let me know if you need any help testing!
Regards,
Shant
Hi Shant,
Thanks for the heads up. I will add this to my to-do list!
Bev
Try version 1.1. I added the flex-container box and apply the configured CSS to that box. That should solve the issue with the nav arrows on the FlexSlider slider animation.
Why is it not showing me anything even though I have the short code ( [style-my-gallery] ) in the post?
You must not have any images attached to the post. The images found by this plugin are the same images that will be found by the [gallery] shortcode.
Hi! Good job to this very usufeul plugin. If you could help me with my problem, I swear to donate
Is there a way that I can put image map to the images in the slideshow? TIA
There is no way for the plugin to automatically add an image map. That would require some custom coding.
Hi Bev,
Thx for this cool simple gallery plugin!
I’m wondering if it’s possible to add a links to the high res image on each image of the gallery. Could be nice, isn’t it?
I’ll try to add this myself on the plugin…
See ya!
You can choose the linked image from the “size” option – choose thumbnail, medium, large or full.
Thx for your answer, but I’m looking for adding an alink to each images, that open it high-res in a lightbox-style
I’m not sure which style you are using, but ImageFlow is supposed to be able to hook into Lightbox. I haven’t tried it myself. I do have another plugin, WP-Imageflow2, which supports a Lightbox effect.
Hallo Bev, very nice PlugIn, is there a way to integrate the Slider in a WPtheme as a headerslider?
Here is the answer:
To allow shortcodes in sidebar widgets, simply edit the functions.php file from your them and add the following code:
add_filter(‘widget_text’, ‘do_shortcode’);
Once you saved the file, you can now add as many shortcodes as you want in sidebar widgets.
Hello Bev, thanks for leading me into this great plugin of yours. I think my question is almost similar to the one above. How do I add the shortcode inside the theme file? Like I wanted it to display in the header area. Should I make a page first then add all the images? But how will I tell the code to use the images from that page? It would really be appreciated if you can help me on this.
Thanks,
Ton
Hi Zton, To add the gallery in your header you would need to first put the images in the media library and use the Media Tags plugin to tag them. Then you can insert the shortcode anywhere in your template using do_shortcode.
So you might end up with something like this:
echo do_shortcode('[style-my-gallery mediatag="headerimages"]');This isn’t working at all for me using FlexSlider
I’d need more information to help figure out the problem.
Hi Bev,
Thanks a lot for this plugin.
I’m having an little issue though. I think I’m close to solve the problem.
I want to use the attachements fields of images in wordpress and display them as caption.
I tried something like :
$longdesc = $attachment->post_content;
It’s ok but it seems to explode the code. I think it’s because there is some in the $longdesc value…
Do you have an idea of what I can do ? May be I’m using it in the wrong way.
Thanks,
Jennifer
It would help to see a sample page. Which script are you trying to use?
Hi Bev,
I’m sorry for answering so late.
I can’t get you a live an exemple so I’m made a screenshot of the code. You can find it here : http://jennini.free.fr/display-descr-image-wordpress.jpg
Thanks,
Jennifer
Hello Bev,
I did some research and it looks like, the line breaks are include in my post_content attachement.
I used the imageflow script without wordpress and you can have HTML tags in your alt attribute.
I tried to allow line break with strip_tags but it doesn’t seem to change anything : $descriptionImage = trim(strip_tags( $attachment->post_content, ” ));
So do you know what I can do or modify ? Does it have something to do with PHP_EOL ?
Thanks again,
Jennifer
Hi Jennifer,
Try using apply_filters instead of trim. Something like the following:
$content = $content_post->post_content;$content = apply_filters('the_content', $content);
$content = strip_tags($content);
Hi Bev, your plugin is exactly what I was looking for, however, I need a way to let the user link to a page when they click on an image. Is there any way to do this? I am not having any luck.
Thank you very much!
Linda
Hi Linda, If you are using the Imageflow script you could try my other plugin, WP-Imageflow2, which supports linking to another page. If you are using Flexslider then I’m afraid that feature is not available at this time.
Hi Bev
Im using your plugin as a rotating header for my weaver ii site, its the only one I’ve found that allows for dynamic width change, i can’t seem to remove the left and right arrows from the plugin, i can move the slider select buttons from the bottom using controlNav: false,’ in the short code, I’ve tried directional: false,’ and keyboardNav: false,’ but to no avail the arrows still remain, i also get a white border which i can’t remove at the moment, but that could be theme related, this is the code that I’m using.
style-my-gallery mediatag=header css=”max-width: 1016px; border-style: none;” options=’animation: “fade”, controlNav: false,’ directionNav: false,’ keyboardNav: false,’]
any chance you could tell me how to remove the arrows?
If i can get this to work this would be a real boon for me as i haven’t found anything else that can do dynamic widths.
Cheers
Rob Foster
http://www.print2textile.co.uk/
Hi Rob, You are lucky I found your comment at the top of my spam list! The problem is your use of quotation marks – your single quote after controlNav:false is terminating the string. Try this:
[style-my-gallery mediatag=header css=”max-width: 1016px; border-style: none;” options=’animation: “fade”, controlNav: false, directionNav: false, keyboardNav: false,’]You can remove the border on the flexslider class in your CSS:
.flexslider { border: none; }Bev you are a genius! Thats Brilliant, Wow , what a plugin.
Thanks Very Much
Rob
Hi Bev
Just following on from my last email, my site that I’m working on has a mobile view built into it. It’s a weaver ii pro WordPress theme. On the mobile view the slider is trying to position itself up and to the right. I appreciate that this may well be something to do with the theme, but I’m wondering if there’s anything I could put in the code to force the slider to justify to the bottom and to the left. This way it might position itself correctly on the mobile view.
Thanks very much
Rob