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.
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’.
- 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.
Example
[style-my-gallery css="max-width:300px;margin-bottom:30px;"]
Fish slide description
Dolphin slide description
Swan slide description
Horse slide description
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
Version 1.2 (April 17, 2012)
- Remove ImageFlow due to lack of GPL license
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,
I managed to get the post_content attachements by using the loop attachement in the code, and display them in span tag. Then I catch them in the imageflow.js.
Thanks !
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
It sounds like you need to adjust your CSS for the mobile view. You could put the gallery inside another DIV if you want more control over the positioning. Good luck.
Ok Bev
Thanks very much for that, much appreciated.
Hey nice simple plugin… For some reason I’m getting little black squares at the tops of my images and the seem to bounce or dance a bit when they transition. Also any way to easily implement thumbs? http://marbleheadwind.com/?listing=3-mound-road-marblehead
Thanks
Hi Chris, Your link loads as a 404 error so I can’t see the page. As for thumbnails, if you are using FlexSlider I know that is something people have been asking for. It’s possible the author might include it in a future release.
Nice work! How can I get rid of the fancy apple-like reflection? Tweaking the css didn’t help.
You can turn off Imageflow reflections using reflections:false. A full list of the options can be found at Finn Rudolph’s website http://finnrudolph.de/ImageFlow/Documentation
Can I control the autoplay of FlexSlider via the shortcode, like with ImageFlow? Using ‘slideshowAutoplay: false’ in the shortcode doens’t work.
For the Flexslide, the option to turn off autoplay is slideshow: false. The full set of options can be found on Tyler’s website under Documentation.
Hi Im a serious noob and tying to get it to slide like this:
[style-my-gallery css="max-width: 960px, options='animation: "slide", controlNav: false, controlsContainer: ".flex-container"']
any pointers greatly appreciated
Jimmy
Looks like you’re missing the end quote from the CSS.
[style-my-gallery css="max-width: 960px;" options='animation: "slide", controlNav: false, controlsContainer: ".flex-container"']thanks very much for that,
thing is
ive put it in but the slides are still fading, not sliding
not too sure what ive not done…
Perhaps you could send me a link to your page. Then I can take a look at the code that was generated.
hi there that would be cool if poss it is on the about page of this site http://collab.brazilintel.com/ – under construction so please ignore the mess
You have 2 Flexslider plugins activated, so they are both trying to control the slider. If you disable the other plugin you should have better luck. My plugin controls only the specific slider on the page, but the other plugin is loading more general controls so it is overriding mine.
ok thanks a lot, much appreciated!
Thanks your quick replies!
I would need a loader for the FlexSlider, just like the one in ImageFlow.
I could give it a try myseld but you would need to point me in the right direction. I’m only a graphic designer…
There is no loader image built in to the Flexslider script. You could check out the support forum at the Flexslider home page for some ideas – some people have tried to write a startup script to show a loader. Good luck!
It wasn’t that hard to find out how.
Change line 37 of flexslider.css to
.flexslider {min-height: 500px /*or any height that fits your needs*/; background: #fff url(theme/loader.gif) /*make sure you have a loader.gif file in the theme folder*/ no-repeat center center;}
Again, great plugin!
Awesome. Thanks for sharing.
Hi Bev, really like the plug-in as I am a fan of Imageflow.
Question: Is it possible to hook this into the NextGen Gallery plug-in. With my current workflow- I would love an option to be able to assign where my images come from: WP gallery vs. next-gen gallery and be able to use the sorting, etc functionality. There was an imgflow plug-in that used to hook into NG but it isn’t being supported anymore. Any way you could see this working? I know the wp-imageflow2 will work with directories, but I loose all the NG functionality like sorting.
thanks
Sorry this plugin is designed to work with the WordPress media library only.
Hi Bev
Is there a a way to disable swipe gestures for style my gallery? It’s just that I quite often accidentally swipe the header on my site when resizing, and doing that stops the rotation of the images until I reload the page.
Cheers
Rob
Hi Rob, I’m not sure if you’re using Imageflow or Flexslider. Either way I’d check their websites to see if they provide that option. I don’t know of a way myself.
Its flexslider, ive seen one other person ask the question, ill have to try and find it again.
Thanks
Rob
Hi! Nice simple plugin. But… Images not centered. Why? http://ok-woman.com/2012/03/print-dress-spring-summer-2012/ Help me, please.
Hi Olga, One weakness with Flexslider is that it doesn’t override all the styles it needs to display images cleanly. Looking at your page I can see that you have padding or margins set for ul, ul li, img, and p which need to be disabled within the Flexslider div.
Hi Bev,
This is just the plugin I was looking for. Thanks. Although I do have experience using FlexSlider outside of WordPress, I’m stumped by a few problems that are occuring with the Plugin.
Take a look at this page: http://www.gonesouthblog.com/test/hello-world-2/
The last image in the UL appears on top and will stubbornly try to stay on top when advancing. Also, the nav arrows aren’t aligning properly.
Any thoughts?
Thanks again.
Hi Nick, I took a look but you seem to have the plugin disabled at the moment.
OK, it’s activated again. I was troubleshooting something else. Thanks for taking a look.
Your ligature plugin is translating all occurrences of “fl”. This might be messing up the Flexslider plugin.
Thanks, Bev! That did the trick.
Hi Bev,
Looks like this plugin might be what I need. Is there any way to display certain media tagged images in the media library without having to attach the images to the page?
This plugin supports media tagging via the Media Tags plugin by Paul Menard. See the Options section above for more info.
[...] galleries per page. It pulls images from the media library to display in the slider. View the live demo to see how it works. This plugin is a great option if you need multiple galleries on a single [...]
[...] galleries per page. It pulls images from the media library to display in the slider. View the live demo to see how it works. This plugin is a great option if you need multiple galleries on a single [...]
Hi!
Thank you for this great plugin!!
I was wondering if there is a possibility to use the gallery in a custom field?
Cheers!
You can use the gallery anywhere a shortcode may be used. If you have some kind of plugin or custom post type that uses a custom field you may or may not be able to use the images attached to the main post. In that case you would need to use Media Tags to select images from the library.
Bev,
How did you get the captions in the flexslider?
Great plugin !!
Thanks
The Flexslider captions come from the image description.
Bev, worked like a charm, thanks so much.
More questions:
(1) I’ve copied the style-my-gallery flexslider.css to the child theme directory but changes to this stylesheet are — not showing up — on the slider. Does theme the flexslider.css cannot be altered in the child theme?
(2) This does not work in the header.php:
Is this because the header.php cannot read options?
Anne
typo …meant to say: Does this mean changes to the flexslider.css in the child theme have no affect the slider?
Does your theme include your local version of flexslider.css?
I don’t know what you mean by “local version” of flexslider.css
I do have flexslider.css installed in the child theme and in the style-my-gallery plugin.
Thanks for all your help
OK, I was able to make the changes by using the plugin editor. Would these changes be lost when style-my-gallery is updated ?
Thanks so much.
This does not work in the php.header
Does this mean the plugin shortcode does not allow options in the header.php ?
?php echo do_shortcode([style-my-gallery mediatag="header" options='controlNav: false, directionNav: false,']?
Your syntax is incorrect. Try this:
?php echo do_shortcode('[style-my-gallery mediatag="header" options="controlNav: false, directionNav: false"]'); ?Yes, the syntax was wrong. Works like a charm. Thanks so much for your awesome slider and replies.
Hopefully, one last question.
On my website I’d like to have the bottom slider scroll up.
In other words: slideDirection: “vertical”
How would I change the default from “horizontal” to “vertical”.
Apologies. Unnecessary question. I already had the answer.
Not quite there:
For some reason the code below partly works in the footer.php file, but falls back to the default, animation:”fade”; in other words — animation: “slide”, slideDirection: “vertical” — do not work
echo do_shortcode(‘[style-my-gallery mediatag="footer" options="animation: "slide", controlsContainer: ".flex-container", slideDirection: "vertical", animationLoop: true, controlNav: false, directionNav: false,"]‘);
Most likely there is a syntax problem.
Some help would be great.
Many thanks
Your inner quotes need to be escaped:
echo do_shortcode('[style-my-gallery mediatag="project2" options="animation: \'slide\',controlsContainer: \'.flex-container\', slideDirection: \'vertical\', animationLoop:
true, controlNav: false, directionNav: false,"]');
Great plugin. Would love to be able to make the images clickable i.e. I am using the gallery as a banner on my homepage and would like to make the individual images click through to a page on my site.
Any ideas for how I might go about implementing this?
Hi Ray, There is no way to achieve this without customizing the script. I do have plans to add a way to select posts and use their featured image in the slider, but this won’t happen in the near future.
hi, and thanks for sharing your amazing plugin.
strange but when click for the previous button, the slider de-sycronize presumably because it advance less pixels that required.
please could you verify in http://larabonera2.wexpress.com.ar and click in previous button?
i used [style-my-gallery css="max-width: 1000px;" options='animation: "slide", controlNav: false, animationLoop: true, slideshow: true, slideshowSpeed: 5000, animationDuration: 600, controlsContainer: ".flex-container" ']
any idea??
best regards, pescadito
I’m too late – you’ve switched to a different plugin.