CPT Bootstrap Carousel - Version 1.4

Version Description

  • Fix: Bug limited carousel to only 10 images. Now displays all images.
  • Fix: Specifying interval didn't always worked. Re-written javascript to make it more reliable
  • Added id shortcode attribute to specify a single image for the carousel
  • Restructured the readme file to make usage clearer
Download this release

Release Info

Developer tallphil
Plugin Icon 128x128 CPT Bootstrap Carousel
Version 1.4
Comparing to
See all releases

Code changes from version 1.3 to 1.4

Files changed (2) hide show
  1. cpt-bootstrap-carousel.php +13 -14
  2. readme.txt +74 -36
cpt-bootstrap-carousel.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: CPT Bootstrap Carousel
4
  Plugin URI: http://www.tallphil.co.uk/bootstrap-carousel/
5
  Description: A custom post type for choosing images and content which outputs <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" target="_blank">Bootstrap Carousel</a> from a shortcode. Requires Bootstrap javascript and CSS to be loaded separately.
6
- Version: 1.3
7
  Author: Phil Ewels
8
  Author URI: http://phil.ewels.co.uk
9
  License: GPLv2
@@ -130,6 +130,7 @@ function cptbc_shortcode($atts, $content = null) {
130
  'orderby' => 'menu_order',
131
  'order' => 'ASC',
132
  'category' => '',
 
133
  'twbs' => '2'
134
  );
135
 
@@ -143,10 +144,13 @@ add_shortcode('image-carousel', 'cptbc_shortcode');
143
  // Display carousel
144
  function cptbc_frontend($atts){
145
  $id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
146
- $args = array( 'post_type' => 'cptbc', 'orderby' => $atts['orderby'], 'order' => $atts['order']);
147
  if($atts['category'] != ''){
148
  $args['carousel_category'] = $atts['category'];
149
  }
 
 
 
150
  $loop = new WP_Query( $args );
151
  $images = array();
152
  while ( $loop->have_posts() ) {
@@ -198,6 +202,13 @@ function cptbc_frontend($atts){
198
  <a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
199
  <?php } ?>
200
  </div>
 
 
 
 
 
 
 
201
  <?php }
202
  $output = ob_get_contents();
203
  ob_end_clean();
@@ -208,16 +219,4 @@ function cptbc_frontend($atts){
208
  return $output;
209
  }
210
 
211
- // Call the carousel in javascript, else it won't start scrolling on its own
212
- function cptbc_footer_js() {
213
- ?>
214
- <script type="text/javascript">
215
- jQuery(function(){
216
- jQuery('.carousel').carousel()
217
- });
218
- </script>
219
- <?php
220
- }
221
- add_action('wp_footer', 'cptbc_footer_js');
222
-
223
  ?>
3
  Plugin Name: CPT Bootstrap Carousel
4
  Plugin URI: http://www.tallphil.co.uk/bootstrap-carousel/
5
  Description: A custom post type for choosing images and content which outputs <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" target="_blank">Bootstrap Carousel</a> from a shortcode. Requires Bootstrap javascript and CSS to be loaded separately.
6
+ Version: 1.4
7
  Author: Phil Ewels
8
  Author URI: http://phil.ewels.co.uk
9
  License: GPLv2
130
  'orderby' => 'menu_order',
131
  'order' => 'ASC',
132
  'category' => '',
133
+ 'id' => '',
134
  'twbs' => '2'
135
  );
136
 
144
  // Display carousel
145
  function cptbc_frontend($atts){
146
  $id = rand(0, 999); // use a random ID so that the CSS IDs work with multiple on one page
147
+ $args = array( 'post_type' => 'cptbc', 'posts_per_page' => '-1', 'orderby' => $atts['orderby'], 'order' => $atts['order']);
148
  if($atts['category'] != ''){
149
  $args['carousel_category'] = $atts['category'];
150
  }
151
+ if($atts['id'] != ''){
152
+ $args['p'] = $atts['id'];
153
+ }
154
  $loop = new WP_Query( $args );
155
  $images = array();
156
  while ( $loop->have_posts() ) {
202
  <a class="right carousel-control" href="#cptbc_<?php echo $id; ?>" data-slide="next">›</a>
203
  <?php } ?>
204
  </div>
205
+ <script type="text/javascript">
206
+ jQuery(document).ready(function() {
207
+ jQuery('#cptbc_<?php echo $id; ?>').carousel({
208
+ interval: <?php echo $atts['interval']; ?>
209
+ });
210
+ });
211
+ </script>
212
  <?php }
213
  $output = ob_get_contents();
214
  ob_end_clean();
219
  return $output;
220
  }
221
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  ?>
readme.txt CHANGED
@@ -1,10 +1,10 @@
1
  === CPT Bootstrap Carousel ===
2
  Contributors: tallphil, joshgerdes, atnon
3
- Donate Link: http://phil.ewels.co.uk
4
  Tags: carousel, slider, image, bootstrap
5
  Requires at least: 3.0.1
6
- Tested up to: 3.6
7
- Stable tag: 1.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -21,57 +21,85 @@ The plugin assumes that you're already using Bootstrap, so you need to load the
21
  * [Bootstrap CDN](http://www.bootstrapcdn.com/) _(hotlink CSS and javascript files)_
22
  * [Bootstrap Carousel in action](http://getbootstrap.com/javascript/#carousel)
23
 
24
- The carousel can be tweaked using shortcode attributes, eg: `[image-carousel interval="8000" showcaption="false" showcontrols="false"]`
25
-
26
- I may consider adding an option to load the Bootstrap files in the future if there is demand. Let me know if you'd like it!
27
-
28
  If you'd like to contribute to this plugin, you can find it [hosted on GitHub](https://github.com/tallphil/cpt-bootstrap-carousel).
29
 
30
- == Installation ==
31
-
32
- 1. Upload the `cpt-bootstrap-carousel` folder to the `/wp-content/plugins/` directory
33
- 1. Activate the `cpt-bootstrap-carousel` plugin through the 'Plugins' menu in WordPress
34
- 1. Make sure that your theme is loading the [Twitter Bootstrap](http://www.getbootstrap.com) CSS and Carousel javascript
35
- 1. Place the `[image-carousel]` shortcode in a Page or Post
36
- 1. Create new items in the `Carousel` post type, uploading a Featured Image for each.
37
- 1. *Optional:* You can hyperlink each image by entering the desired url `Image Link URL` admin metabox when adding a new carousel image.
38
-
39
  = Shortcode Options =
40
- You can specify how long the carousel pauses for, and whether to display captions and the controls using optional
41
- shortcode attributes:
42
 
43
- 1. `interval` _(default 5000)_
44
  * Length of time for the caption to pause on each image. Time in milliseconds.
45
- 1. `showcaption` _(default true)_
 
 
 
46
  * Whether to display the text caption on each image or not. `true` or `false`.
47
- 1. `showcontrols` _(default true)_
 
 
 
48
  * Whether to display the control arrows or not. `true` or `false`.
49
- 1. `orderby` and `order` _(default `menu_order` `ASC`)_
 
 
 
50
  * What order to display the posts in. Uses [WP_Query terms](http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters).
51
- 1. `category` _(default all)_
 
 
 
 
52
  * Filter carousel items by a comma separated list of carousel category slugs.
53
- 1. `twbs` _(default 2)_
 
 
 
 
 
 
 
 
 
54
  * Output markup for Twitter Bootstrap Version 2 or 3.
 
 
 
 
55
 
56
- For example, to display a carousel with no captions or controls, use the following:
57
- `[image-carousel showcaption="false" showcontrols="false"]`
58
 
59
- To display a carousel which pauses for 8 seconds and shows images in a random order:
60
- `[image-carousel interval="8000" orderby="rand"]`
 
 
61
 
62
- To display a carousel with images from the `global` and `home` categories, with markup for Twitter Bootstrap v3.x:
63
- `[image-carousel category="global,home" twbs="3"]`
 
 
 
 
 
 
 
 
 
 
64
 
65
 
66
  == Frequently Asked Questions ==
67
 
68
- = How do I insert the carousel? =
69
 
70
- First of all, install and activate the plugin. Go to 'Carousel' in the WordPress admin pages and add some images. Then, insert the carousel using the `[image-carousel]` into the body of any page.
 
 
 
 
 
71
 
72
- = Can I customise the way it looks? =
73
 
74
- The carousel shortcode has a number of attributes that you can use to customise the output. These are described on the [Installation](http://wordpress.org/plugins/cpt-bootstrap-carousel/installation/) page.
75
 
76
  = Can I insert the carousel into a WordPress template instead of a page? =
77
 
@@ -86,6 +114,10 @@ You can specify the order that the carousel displays images by using the `orderb
86
 
87
  Yes - create a few categories and add your specific images to a specific category. Then, when inserting the shortcode into the page, specify which category you want it to display images from using the `category` shortcode attribute.
88
 
 
 
 
 
89
  = Help! Nothing is showing up at all =
90
 
91
  1. Is the plugin installed and activated?
@@ -96,11 +128,11 @@ Try writing the shortcode using the 'Text' editor instead of the 'Visual' editor
96
 
97
  = My images are showing but they're all over the place =
98
 
99
- 1. Is your theme loading the Bootstrap CSS and Javascript? _(look for `bootstrap.css` in the source HTML)_
100
 
101
  = The carousel makes the content jump each time it changes =
102
 
103
- 1. You need to make sure that each image is the same height. You can do this by setting an `Aspect ratio` in the `Edit Image` section of the WordPress Media Library and cropping your images.
104
 
105
  == Screenshots ==
106
 
@@ -110,6 +142,12 @@ Try writing the shortcode using the 'Text' editor instead of the 'Visual' editor
110
 
111
  == Changelog ==
112
 
 
 
 
 
 
 
113
  = 1.3 =
114
  * Added support for carousel categories, using filtering with the `category` shortcode
115
  * Added `orderby` shortcode attribute to specify ordering of images
1
  === CPT Bootstrap Carousel ===
2
  Contributors: tallphil, joshgerdes, atnon
3
+ Donate Link: http://www.tallphil.co.uk/bootstrap-carousel/
4
  Tags: carousel, slider, image, bootstrap
5
  Requires at least: 3.0.1
6
+ Tested up to: 3.6.1
7
+ Stable tag: 1.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
21
  * [Bootstrap CDN](http://www.bootstrapcdn.com/) _(hotlink CSS and javascript files)_
22
  * [Bootstrap Carousel in action](http://getbootstrap.com/javascript/#carousel)
23
 
 
 
 
 
24
  If you'd like to contribute to this plugin, you can find it [hosted on GitHub](https://github.com/tallphil/cpt-bootstrap-carousel).
25
 
 
 
 
 
 
 
 
 
 
26
  = Shortcode Options =
27
+ You can specify how long the carousel pauses for, and whether to display captions and the controls using optional shortcode attributes. Most of these can be used in combination.
 
28
 
29
+ * `interval` _(default 5000)_
30
  * Length of time for the caption to pause on each image. Time in milliseconds.
31
+ `[image-carousel interval="12000"]`
32
+
33
+
34
+ * `showcaption` _(default true)_
35
  * Whether to display the text caption on each image or not. `true` or `false`.
36
+ `[image-carousel showcaption="false"]`
37
+
38
+
39
+ * `showcontrols` _(default true)_
40
  * Whether to display the control arrows or not. `true` or `false`.
41
+ `[image-carousel showcontrols="false"]`
42
+
43
+
44
+ * `orderby` and `order` _(default `menu_order` `ASC`)_
45
  * What order to display the posts in. Uses [WP_Query terms](http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters).
46
+ `[image-carousel orderby="rand"]
47
+ [image-carousel orderby="date" orderby="DESC"]`
48
+
49
+
50
+ * `category` _(default all)_
51
  * Filter carousel items by a comma separated list of carousel category slugs.
52
+ `[image-carousel category="homepage,highlights"]`
53
+
54
+
55
+ * `id` _(default all)_
56
+ * Specify the ID of a specific carousel post to display only one image.
57
+ * Find the image ID by looking at the edit post link, eg. post 109 would be `/wp-admin/post.php?post=109&action=edit`
58
+ `[image-carousel id="109"]`
59
+
60
+
61
+ * `twbs` _(default 2)_
62
  * Output markup for Twitter Bootstrap Version 2 or 3.
63
+ `[image-carousel twbs="3"]`
64
+
65
+
66
+ == Installation ==
67
 
68
+ = The easy way: =
 
69
 
70
+ 1. Go to the Plugins Menu in WordPress
71
+ 1. Search for "CPT Bootstrap Carousel"
72
+ 1. Click 'Install'
73
+ 1. Activate the plugin
74
 
75
+ = Manual Installation =
76
+
77
+ 1. Download the plugin file from this page and unzip the contents
78
+ 1. Upload the `cpt-bootstrap-carousel` folder to the `/wp-content/plugins/` directory
79
+ 1. Activate the `cpt-bootstrap-carousel` plugin through the 'Plugins' menu in WordPress
80
+
81
+ = Once Activated =
82
+
83
+ 1. Make sure that your theme is loading the [Twitter Bootstrap](http://www.getbootstrap.com) CSS and Carousel javascript
84
+ 1. Place the `[image-carousel]` shortcode in a Page or Post
85
+ 1. Create new items in the `Carousel` post type, uploading a Featured Image for each.
86
+ 1. *Optional:* You can hyperlink each image by entering the desired url `Image Link URL` admin metabox when adding a new carousel image.
87
 
88
 
89
  == Frequently Asked Questions ==
90
 
91
+ = The carousel doesn't start sliding itself / setting interval doesn't work =
92
 
93
+ This can be caused by having your jQuery and Bootstrap javascript files included in the wrong place.
94
+
95
+ * Make sure that jQuery is only being included once
96
+ * Make sure that the Bootstrap javascript file is being included after jQuery
97
+ * NB: This often means putting it after `wp_head()` in your theme's `header.php` file
98
+ * Make sure that both jQuery and Bootstrap are being included in the theme header, not footer
99
 
100
+ = How do I insert the carousel? =
101
 
102
+ First of all, install and activate the plugin. Go to 'Carousel' in the WordPress admin pages and add some images. Then, insert the carousel using the `[image-carousel]` into the body of any page.
103
 
104
  = Can I insert the carousel into a WordPress template instead of a page? =
105
 
114
 
115
  Yes - create a few categories and add your specific images to a specific category. Then, when inserting the shortcode into the page, specify which category you want it to display images from using the `category` shortcode attribute.
116
 
117
+ = Can I customise the way it looks / works? =
118
+
119
+ The carousel shortcode has a number of attributes that you can use to customise the output. These are described on the main plugin [Description](http://wordpress.org/plugins/cpt-bootstrap-carousel/) page.
120
+
121
  = Help! Nothing is showing up at all =
122
 
123
  1. Is the plugin installed and activated?
128
 
129
  = My images are showing but they're all over the place =
130
 
131
+ Is your theme loading the Bootstrap CSS and Javascript? _(look for `bootstrap.css` in the source HTML)_
132
 
133
  = The carousel makes the content jump each time it changes =
134
 
135
+ You need to make sure that each image is the same height. You can do this by setting an `Aspect ratio` in the `Edit Image` section of the WordPress Media Library and cropping your images.
136
 
137
  == Screenshots ==
138
 
142
 
143
  == Changelog ==
144
 
145
+ = 1.4 =
146
+ * Fix: Bug limited carousel to only 10 images. Now displays all images.
147
+ * Fix: Specifying interval didn't always worked. Re-written javascript to make it more reliable
148
+ * Added `id` shortcode attribute to specify a single image for the carousel
149
+ * Restructured the readme file to make usage clearer
150
+
151
  = 1.3 =
152
  * Added support for carousel categories, using filtering with the `category` shortcode
153
  * Added `orderby` shortcode attribute to specify ordering of images