The Shiba Gallery Plugin allows you to display a variety of javascript galleries within your WordPress blog. All you need to do is specify the type of gallery you want in your regular WordPress gallery shortcode.
The Shiba Gallery is very flexible and can render post, page, and gallery objects, in addition to image attachments. This article describes some of the cool things that you can achieve with the Shiba Gallery.
[gallery id="10" type="tiny2" size="large" frame="white" tsize="none" autoplay="1"]
December 25th, 2015 – Shiba Gallery 4.4.5
- Fixed lightbox to work with duplicate thumbnail images.
- Tested for WP 4.4.
This is a very big update, so definitely test first before deploying.
Javascript Galleries Supported
Currently, the Shiba WordPress Gallery Plugin includes the following gorgeous Javascript libraries –
TinySlideshow by Michael Leigeber.
Tiny Slideshow is a very slick looking inline gallery that allows users to scroll through the images, or enjoy them in an automatic slideshow mode.
[gallery id=10 type="tiny" caption="title" size="(600, 400)" crop="1" responsive="aspect"]
NoobSlide from EfectoRelativo.net
There is one word to describe the NoobSlide Gallery – Awesome!
If I had two words, I would say Simply Awesome!
With NoobSlide you can easily combine together various gallery type components to create a range of compelling gallery styles.
For example, to the right I have created a NoobSlide version of Galleria. At the bottom I have created a NoobSlide version of SlideViewer.
[gallery id=10 type="noobslide_galleria"]
[gallery id=10 type="noobslide_slideviewer" responsive="aspect"]
Lightbox by Lokesh Dhakar.
Original lightbox gallery. It uses jquery and sizes properly based on browser window.
[gallery id=8162 type=lightbox size="thumbnail" caption="none"]
Slimbox by Christophe Beyls.
Slimbox is an efficient version of Lightbox that is solely based on jQuery. Slimbox will now be used in place of Lytebox.
[gallery id=8162 type=slimbox size="thumbnail" caption="none"]
Lytebox by Markus F. Hay.
Lytebox is not as efficient as Slimbox but it will resize images that are larger than the browser screen.
[gallery id=8162 type=lytebox size="(120,120)" caption="none"]
Popeye 2.0 Gallery by Christoph Schüßler.
Popeye is an awesome inline gallery that allows you to expand images in-place. It also has some very well styled frames which we have also included in the Shiba Gallery Plugin.
[gallery id=10 type=popeye]
Galleria by Aino.
Galleria is a very professional looking image gallery. It is also fast, simple, and easy to use. The classic version shown here is very similar to Tiny Slideshow in terms of functionality. However, there are a variety of other themes that can be bought at the Galleria site that offers many alternative functions and views.
[gallery id=10 type="galleria"]
Navigation List by ShibaShake
A simple list of posts or pages including their thumbnails, associated links, and a short summary. A good way to create a navigation page or navigation widget.
[gallery type="navlist" recent="1" numberposts="5" caption="description" ]
WordPress Native Gallery
The WordPress native gallery is also supported. Just specify the type as native.
[gallery id=10 type=native size="thumbnail" responsive="aspect"]
Expanded WordPress Native Gallery
The previous expanded WordPress Native Gallery has been replaced with the NoobSlide NativeX gallery. It contains thumbnails just as before, but also has a nice preview image and description panel. This gallery is most useful when displaying post, page, or gallery objects.
Just specify the type as noobslide_nativex.
[gallery id=1688 type="noobslide_nativex" size="medium"]
Custom Image Size
You can specify the image size that you want using the standard WordPress gallery shortcode tags – full, large, medium, thumbnail. These sizes are set under Settings >> Media.
Alternatively, you can also specify your own custom size.
[gallery id="1969" type="galleria" size="(300,225)"]
Shiba Gallery Plugin Expanded Short-Codes
- category – List of comma separated category ids to include in the gallery.
[gallery category="109" type="nativex"]
[gallery tag="tag-a,tag-b,tag-c"]
[gallery tag_and="tag-a,tag-b,tag-c"]
[gallery recent="1"]
[gallery category="10" numberposts="15"]
[gallery category="10" numberposts="5" page="2"]
[gallery category="109" type="nativex" numberposts="15" post_type="post"]
[gallery category="109" responsive="aspect" type="tiny"]
[gallery category="109" tsize="(54,54)" type="tiny"]
[gallery category="10" frame="green"]
[gallery category="10" link="none"]
[gallery category="10" caption="description"]
[gallery category="109" cpos="bottom"]
[gallery category="109" clen="500"]
[gallery category="109" crop="1"]
[gallery category="109" active="1"]
[gallery category="109" autoplay="1"]
Note –
Only one of include, category, tag, recent, or id will be used. Include will be checked first, followed by category, followed by tag, and then recent. If none of these are set, id will be used.
Shiba Gallery Default Options
You can specify a default gallery type by going to Media >> Shiba Gallery.
From this screen you may also set the default thumbnail picture, default frame, and default captions. There is also a check box in the Default Frame section that specifies whether this default frame should also be applied to images in your blog.
The default gallery image will be used for posts and galleries that have no thumbnails assigned to them. If you do not have a default image, the plugin will just display an empty black image.
Show Shiba Galleries in Your Widget Areas
To show shiba galleries in your widget areas, simply enable gallery shortcodes for text widgets.
// Add to the init function of your functions.php file add_filter('widget_text', 'do_shortcode');
Call Shiba Gallery Directly from PHP
If we want to call Shiba Gallery directly from PHP rather than use the WordPress gallery shortcode, we may do the following –
global $shiba_gallery; echo $shiba_gallery->parse_gallery_shortcode("", array('id' => "10"));
Shiba Gallery Plugin Updates
Shiba Gallery 4.4
May 3rd, 2014
- Updated plugin paths.
- Added clen as a gallery shortcode attribute for controlling caption length on a gallery by gallery basis.
- Fixed a bunch of gallery CSS styles.
- Remove device check for slimbox javascript.
- Noobslide now using mootools 1.4.5.
- Updated for WordPress 3.9.
- Tested on Chrome, Safari, IE 11.
Shiba Gallery 4.3.3
Sept 23rd, 2013
- Added lightbox 2 gallery by Lokesh Dhakar.
- Fixed sizing bug that occurs when server responsive option is turned off. Thanks to Susan for reporting this.
- Assign better option default values based on gallery type.
Shiba Gallery 4.3
Sept 18th, 2013
- Shiba Gallery is now both client and server responsive. Server responsiveness allows the server to send the right sized images based on device width. Client responsiveness allows image size to change based on browser width.
[More on mobile responsive galleries and images] - Gallery images and links can now be tied to slimbox or lytebox.
- Added new gallery shortcode attributes – crop, active, and cpos.
- Create a slimbox gallery based on captioned images within a post.
- Updated Shiba Gallery settings page.
- Updated for WordPress 3.6.
- Cleaned up styles and fixed a bunch of bugs.
Shiba Gallery 4.0
Jan 12th, 2013
- Galleries and captioned images are now mobile responsive! The plugin uses device width to determine gallery and image sizes.
To turn on the mobile responsive feature, go to Media >> Shiba Gallery, scroll down to the bottom, and click on the “Enable responsive galleries and images” checkbox.
[More on mobile responsive galleries and images and what is used in this plugin]
- Updated for WordPress 3.5.
- Updated Tinyslideshow to version 2. The old version is still available by using type=”tiny1″
- Fixed noobslide fast clicks causing thumbnails and images to get out of sync.
- Collect galleria styles into the main css file.
- Options page is now encapsulated in a class wrapper and also uses the 3.5 new media manager.
- Removed Pslides. There are customization limitations, and the plugin already contains several thumbnail galleries including tiny1, tiny2, galleria, and noobslide.
- A whole bunch of other fixes.
Shiba Gallery 3.7.2
Aug 7th, 2012
- Updated for WordPress 3.4. Fixed default image pop-up menu.
- Updated Shiba Gallery options page with more standardized permissions check.
Shiba Gallery 3.7
May 7th, 2012
- Control thumbnail size. Specify thumbnail size using the tsize parameter. Works with Tiny Slideshow, Picture Slides, and Noobslide.
- Galleria. A new version of Galleria has been added back to the plugin.
- Navigation List. Useful for displaying a set of related posts or pages together with thumbnails, links, and article summaries.
- Default value filter. Hook into the shiba_gallery_defaults filter to alter gallery default values.
- IE8 and IE7 compability. Fixed several IE8 and IE7 compatibility issues. All galleries should now work on these browsers.
Shiba Gallery 3.5
February 15th, 2011
- Gallery links. You now have the option to set your gallery links to file, attachment, or none.
- Expanded WordPress captions. The standard WordPress caption shortcode has been expanded to deal with images and galleries.
- Lytebox. The Lytebox gallery has been added back to the plugin because it resizes large images according to the browser screen whereas Slimbox does not.
- Apostrophe in Titles. Galleries should function properly even if images have the apostrophe symbol in their titles.
Shiba Gallery 3.3
December 2nd, 2010
This is a big release with many new features.
- Gallery frames. You may now assign a variety of styled frames to your WordPress galleries and images.
- Gallery captions. You may now turn gallery captions on and off, as well as show image titles and descriptions.
- Gallery paging. The page attribute is now supported in the gallery shortcode. You may easily enable gallery paging by setting numberposts and page in your gallery shortcode.
- Gallery default options. There is now a gallery options page under Media >> Shiba Gallery. This screen allows you to set default frames, gallery types, captions, and thumbnail.
- New galleries. Some exciting new galleries have been added including Popeye 2.0, Picture Slides, and Slimbox.
- Gallery javascripts are now loaded at the end of the page and only as needed. If no galleries are used, then no gallery javascripts will be loaded. This will help improve page efficiency.
Shiba Gallery Plugin 3.1
April 6th, 2010
- Plugin has been modularized and all functions are encapsulated within wrapper classes.
- I have also integrated Shiba Gallery with the awesome YARPP plugin for showing related articles. By simply using the related tag in your gallery shortcode you may view YARPP results using any of the javascript galleries within the Shiba plugin.
Shiba Gallery Plugin 3.0
- The Shiba Gallery Plugin has been significantly enhanced in this release with the inclusion of NoobSlide; one of the most versatile, compelling, and well-constructed Javascript galleries I have come across.
- With NoobSlide, I was able to construct galleries that are similar in style to the previous Galleria, SlideViewer, and NativeX gallery types. Execution of galleries are now a lot faster, smoother, efficient, and clean.
- I have replaced –
- Galleria – with noobslide_galleria.
- Slide Viewer – with noobslide_slideviewer.
- Nativex – with noobslide_nativex.
- Smooth Gallery – with TinySlideshow.
- There is no longer any need for iframes, or background-image resizing operations. This makes the plugin faster, cleaner, and more secure.
Shiba Gallery 2.7.3
February 15th, 2010
- There is a Fatal error bug in the Shiba Gallery 2.7 release. This is due to a missing function in the plugin. I have fixed it in the latest patch 2.7.3. Please download this important patch.
- Many thanks to Jacob for detecting and reporting it so quickly.
Shiba Gallery Plugin 2.7
- You can now render post, page, and gallery objects using any of the gallery types. Some new gallery short-code options have been added to facilitate this new capability.
- We also expanded the WordPress native gallery and added it as a new gallery type (type=”nativex”).
Shiba Gallery Plugin 2.5
- Added the Slide Viewer javascript gallery by Gian Carlo Mingati.
- Added the ability to specify custom sizes for galleries.
Shiba Gallery Plugin 2.0
- Galleria now works on Google Chrome. It is Schweet!
Shiba Gallery Plugin 1.0
- Detailed description of the Shiba Gallery Plugin with examples.
Future Additions
If you are particularly impressed with a Javascript gallery, please let me know and I will look into including it within the Shiba Gallery Plugin.
Please let me know if you encounter any bugs or compatibility issues. This will help me to improve the plugin and update the compatibility list above.
Thanks to all the Javascript library authors for sharing their very awesome gallery scripts with us!
Ed Fritz says
Hello,
I have really enjoyed using your gallery plug in. It helps to keep gallery content interesting and having one plug in provides access to several gallery styles which is very unique.
I am going to Photoshop World in two weeks as an official PSW blogger. I’d like to add to my site on single posts the content gallery: ‘Related Articles’, based on your plugin and the YaRPP plugin…..much like you have on your posts !!
But I don’t know how to do this in php. I know the short code [gallery type="noobslide_nativex" numberposts="3" related="1" size="(150,100)" ], but I don’t know how to convert this html code to PHP and then I don’t know which template (single-post.php(?) or where and how to call the PHP code. I’ve tried several things on my own, accessing the various posts on your site, but I can’t figure it out.
Can you provide some pointers to help me out, I’d really appreciate it….
Thanks in advance !!
ShibaShake says
You can call it from PHP using the parse_gallery_shortcode function.
http://shibashake.com/wordpress-theme/super-wordpress-gallery-plugin#php
Just include the relevant arguments in the array.
Ed Fritz says
Thx Shibashake,
After a few hours last night, I was able to figure it out, using the parse_gallery_shortcode and some other info on the your site and info over at wordpress codex. You made me work a bit, but I enjoyed trying to figure it out array auguments… It looks like my question was asked before, you were polite to continue to provide instructions and not blow my request off……… I’ve wanted to do this since I first discovered your site a month or so ago. I agree that ‘gallery content’ can complement and can visually improve website and it is now much improved over providing just the Yarrp links. Very clever of you to use Yarpp in your plugin. My next plan is to figure out how to acknowledge your plugins and programming in my site footer. Thanks A million.
fritzimages.com
ShibaShake says
Hello Ed,
Very glad to hear that everything is working.
Yeah I really enjoy figuring out all the little puzzles within WordPress. That is one of the things that makes it such a fun and interesting system. Plus it keeps getting updated and expanded so there are always new puzzles to figure out. 😀
Isi says
Hello,
first of all: your work is amazing and I love to use the shiba gallery on my blog. But is there any chance to intregate the flickr API in the gallery plugin and select a certain album for every post?
Do you maybe have plans in this way already? Thank you in advance for your reply!
ShibaShake says
Hello Isi,
I don’t really use Flickr all that much myself so I haven’t really looked at their API. It will certainly be a useful feature so I will add it onto my to-do list. However, I just got a Sibe puppy recently, which has cut my programming time to about 0. 😀
It will be a while before I get the time to look at the API.
Harry says
Hello,
I installed the Shiba gallery plugin but i don’t get how it works 🙁
I created a simple gallery in one of my posts and then ? Nothing happens… I guess it is kind of a newbie question but could you help me ?
Thank you
Harry
ShibaShake says
Hello Harry,
The plugin uses the standard WordPress gallery shortcode.
http://codex.wordpress.org/Gallery_Shortcode
I also wrote a tutorial on how to create and insert standard WordPress galleries. To add special gallery shortcode parameters I usually go into HTML view in the editor.
Josh Eisenberg says
Hi, I’m having some trouble getting this plugin to work correctly. The images show up just fine, but none of the buttons work (the “prev” or “next” or any of the numbers below the images) when setup for noobslide.
An example of the setup is here: http://www.bergwithfries.com/?page_id=1653
I’ve tried changing the theme to the starter theme, making sure mootools is included in the head and getting rid of jquery that could be interfering, without luck.
Any suggestions you could offer would help.
Thanks.
ShibaShake says
For some reason the javascript for the noobslide galleries (not noobslide.js but the actual javascript function calls to initialize each noobslide gallery) did not get included in the footer.
If you have a test site, I can take a look at it and debug it on site. During debugging I may need to change plugin code, change blog settings, etc., therefore it is only appropriate on a test site. I will need a temporary account with admin privileges. You can send account information to –
http://hubpages.com/_srec/email/user/shibashake
ShibaShake says
Ok – it seems to be a weird environment bug. I have fixed it for now. You can test things out on your test site to make sure everything is working as you want it.
Then, just download a new zip, Patch 3.5.2. Let me know how it goes.
Jeff Tovar says
I’ve got one last question and then I’ll be on my merry way with a satisfied client.
I can’t figure out how the vertical-align works for the noobslide gallery. It seems to be cutting off the bottom of some images when it can clearly fill the white space above.
Case in point…
Gallery – http://ecodivastv.com/images/ishot-24.jpg
Actual Image – http://ecodivastv.com/wp/wp-content/uploads/2011/01/EcoDivas%E2%84%A2-official-Launch-Party-guests.jpg
Is there a way to force the vertical-align to the top so that there is no white space above, or middle so an equal amount of white space is above and below when the image’s height is not enough?
Thanks! You’re awesome for helping out.
ShibaShake says
Ok I looked at –
http://ecodivastv.com/wp/2011/01/2766/
The full window height is sized to fit the largest picture, which in this case is
http://ecodivastv.com/wp/wp-content/uploads/2011/01/Alexa-Vega-Kenneth-Cole-Feed-Bag-Event.jpg
In noobslide, the caption area is partially transparent and floats over the image. Since the ecodivastv caption area is opaque it is blocking out the bottom portion of the image. Look at the shiba-outer container class in shiba-noobslide.php, and try adding some extra height there.
Jeff Tovar says
Hello again,
I’ve got a few galleries that aren’t working properly – they only show one image and no title, though a title is in place for every image. These galleries were also showing all images before I installed the plugin. Here’s a couple examples…
http://ecodivastv.com/wp/2011/01/sundance-by-day-green-suite-hopping-and-all-sorts-of-fabulous-finds-2/ (37 images)
http://ecodivastv.com/wp/2011/01/sundance-by-night-so-many-parties-and-such-good-organic-food/(41 images)
These galleries are all using the same
[gallery size="(637,680]
shortcode. Any idea what’s going on?Thanks.
ShibaShake says
Probably due to mixing multiple gallery javascripts. Try taking out shadowbox.
If your intent is to integrate noobslide and some lightbox gallery, then you may need to manually integrate the javascripts.
Jeff Tovar says
Sorry, but this advice didn’t help. I didn’t think it would because there are some galleries that work properly, yet others aren’t.
Working: http://ecodivastv.com/wp/2011/01/eco-makeover-feature-upcyled-couture/
Not working: http://ecodivastv.com/wp/2011/01/2766/
Jeff Tovar says
Oh, and FYI, I tried removing the shadowbox tag but it didn’t make a difference.
ShibaShake says
I think it has to do with two images –
Matt-Sorenson-Guns-n-Roses-Sundance-2011.jpg
Geena-Davis-Sundance-2011-Levis-.jpg
These images probably have apostrophes in their title? Try replacing it with ' instead. I will fix that in the plugin in the future.
Jeff Tovar says
OK, the apostrophes are the problem, but that just begets another issue that seems to be with WordPress. When I replace the
'
with an'
in the title then save changes, WP appears to parse it and the'
is back again.For now I’m just going to tell my client not to use any apostrophes at all. It’s just the title of a picture. =)
Jeff Tovar says
Ha! Even your site parsed it. I meant “When I replace the ‘ with an '” just to be clear.
phil says
Hey,
Great work!
I have some trouble getting it to work on one server though.
I tested the plugin on localhost and a test server. It worked great on both!
Then I uploaded the site to another server and I can’t get it to work on this one.
Since this is just javascript, it should not depend on the server, right?
I also messed around with file permissions but it didn’t help either…
Any ideas what could cause the problem?
ShibaShake says
Likely a plugin conflict. Try doing this –
1. Edit shiba-gallery.php
2. Go to line 124 or do a search for ‘fix_chrome_bug’
3. Comment out the line. E.g.
// add_action( ‘wp_head’, array(&$this, ‘fix_chrome_bug’), 1);
Phil says
Thanks for your reply.
Unfortunately that did not fix the problem.
I tried deactivating all other plugins too…
Is there any (other) interaction with the server in the script or some kind of server dependency??
ShibaShake says
What gallery type are you using? and what theme are you using?
It could be a conflict between the theme and the gallery javascript. Try using 2010 with no other plugins activated. Also test out different gallery types, e.g. pslides and tiny.
My guess is that it is a conflict with mootools, which means that only the noobslide gallery will be affected.
Phil says
here is the link to a testing page:
This is basically the initial install except I installed the shiba gallery plugin.
here is the link:
http://andrefuckert.de/noobslideTest/
I’m trying to get noobslide to work.
The only type that seem to work is pslide
ShibaShake says
It is very strange – the noobslide javascript is not getting written into the page. It may be easiest for me to debug it on site. If you create me a temporary account with admin privileges, I can take a look at it.
http://hubpages.com/_srec/email/user/shibashake
Phil says
sorry lytebox seem to work
Jeff Tovar says
Greetings,
Great plugin. Was interested to know how I can increase the size of basically everything when using the noobslide_5 shortcode as the default.
http://ecodivastv.com/wp/2011/01/eco-makeover-feature-upcyled-couture/
I’d like the frame to be 100% of the containing div, thereby also increasing the text size to be more readable. I’m sure I can figure this part out through custom CSS, but the frame I’m having a hard time with.
Any advice you can give is greatly appreciated.
Jeff Tovar says
Hello again,
I have a couple more customizing questions if that is okay. I’m not too good with js so this is all a bit of a jumble for me.
Once the frame is larger and taking up more space inside the containing div, the result should be the images having more whitespace around them and thereby having the caption not interfere at the bottom. If not, I’d like to move the caption to its own div below the images, yet still inside the frame.
Also, I’d like to move the “view full image” below the title. I found the line, but cannot order the syntax properly.
new Element('h2').set('html','<a href="'+currentItem.link+'" rel="nofollow">view full image'+currentItem.title).inject(info$shiba_gallery->nsNum);
Thanks again, hope you can help!
ShibaShake says
Just transpose currentItem.title and the view full image link. For example
Jeff Tovar says
My client decided to keep the link up top so we’ll leave it as-is. I do have one more question, however.
I’ve added the
rel="shadowbox"
function to the “view image” link, but it only seems to work on the first image within the gallery. All others simply open the image in the browser window.I’ve adjusted lines 169 and 211 of shiba-noobslide.php to the following:
new Element('h2').set('html','<a href="'+currentItem.link+'" rel="nofollow">view full image'+currentItem.title).inject(info$shiba_gallery->nsNum);
Can you explain how I can get this function to apply to all images of the gallery?
The site in question can be seen here:
http://ecodivastv.com/wp/2011/01/eco-makeover-feature-upcyled-couture/
Thanks!
ShibaShake says
You can add “size” into the gallery shortcode but currently that has to be specified in pixels only. For example –
[gallery size="(470,538)"]
I will add sizing by percentages into my to-do list.
Jeff Tovar says
Awesome, thanks for the help!
Vonz says
Hi awesome work! I am able to get the image to link to the attachment using the native gallery, but not the text under it. I can’t seem to find where in the files it is making this link. Is there a way to have it so everything links to the attachment vs the image? Thanks! Here is the code I am using [gallery type=native size="size(100,100)" caption="permanent" link="permanent" columns="5"]
ShibaShake says
This is my bad. I didn’t use the “link” shortcode argument while creating the caption titles. I will work on fixing that.
Thanks for reporting this Vonz.
kat says
no no, unfortunately this is not the case. You can see what I mean here very well: httpAlso, here is just the code I used to integrate new noobslide galleries into the Shiba plugin. It may be easier to understand than the tutorial.
http://www.parampara.pl/imp/uzbrojenie/. The code used here is [ gallery tag=”broń” columns=5 caption=”title” ]. Thing is that instead of displaying each picture’s title, the gallery (it’s the ‘native’ i’m using here) shows the page’s title, not the picture’s. Caption shows a proper thing (the titles are Kirpan for example, directing to custom page). The problem is with getting image’s title properly in the gallery. Please go to above link so you can see it clearly… Instead of “post_title” I would like to set the image’s title to imageTitle. How to do that?
ShibaShake says
I just visited the page you indicated and the gallery seems to be using the Lightbox plugin (not Shiba Gallery) and there are no captions on the images.
Maybe I am missing something?