bt image gallery · bt shortcode is a smart joomla plugin to help ... use shortcode with custom...
TRANSCRIPT
BT SHORTCODE
JOOMLA EXTENSION User Manual Version 1.0
Copyright © 2014 Bowthemes.com
www.bowthemes.com
1
Table of Contents
INTRODUCTION ................................................................................................................................ 2
INSTALLING AND UPGRADING ..................................................................................................... 4
1. System Requirement .....................................................................................................................................4
2. Downloading .....................................................................................................................................................4
3. Manual Installation ........................................................................................................................................4
4. Plugin Upgrading .............................................................................................................................................6
5. Uninstalling ........................................................................................................................................................6
HOW TO USE ...................................................................................................................................... 7
1. Add shortcode to content ................................................................................................................................7
2. Search and Filter ..................................................................................................................................................8
3. Use controllers with sample shortcodes ..................................................................................................9
4. Select Style ........................................................................................................................................................... 10
5. Choose Color with Color Picker ................................................................................................................. 10
6. Icon Picker ........................................................................................................................................................... 11
7. Setting number with slider .......................................................................................................................... 12
8. Textbox and other controller types ......................................................................................................... 13
9. Preview ................................................................................................................................................................. 13
10. Carousel shortcode with Image Source option ............................................................................... 14
11. Setting shortcode up by typing ............................................................................................................... 22
12. Make article’s layout with Columns Shortcode ............................................................................... 23
13. Shortcode in shortcode ............................................................................................................................... 25
14. Save and load presets .................................................................................................................................. 27
15. Customize style with additional class .................................................................................................. 29
CONTACTING BOWTHEMES ........................................................................................................ 32
www.bowthemes.com
2
Introduction
BT Shortcode is a smart Joomla plugin to help effortlessly customize your own
content by using shortcodes without HTML code knowledge. It supports Joomla
Content, K2, Easy Blog component as well as Custom HTML module. This plugin
comes with 22 built-in shortcodes, you can freely create nice and complex content.
Just using additional classes and you can easily make your site be unique.
Product Features
Responsive support: Any shortcodes are fully responsive on desktops,
smartphones and tablets for Joomla 2.5.x and 3.x
Easy customization: Shortcode is easily customized with using additional classes
or overriding original styles
Various content types support:
- Flexible column layout: You are freely to create up to 6 columns for flexible
column layout with Columns Shortcode.
- Impressive image galleries support: Image galleries smoothly show images
with Lightbox, Slideshow and Carousel support
- Great text styles support: Styles of text are flawlessly added with Label,
Tooltip, DropCap, Heading… support
- Fantastic grouped content support: Content in Accordion, Tabs or Table…is
grouped perfectly.
- Other essential shortcodes support: Shortcodes of Price Table, Google Map,
Buttons is available for use and customization.
Extension demo: http://demo.bowthemes.com/bt-medical/en/shortcodes/shortcode-1
Extension details: http://bowthemes.com/joomla-extensions/bt-shortcode.html
Support forum: http://bowthemes.com/forums/65-bt-shortcode-plugin/
www.bowthemes.com
3
Powerful management: Visual Preview and live search is supported for almost
shortcodes. In addition to searching modules, you can easily preview almost
modules before publishing them online. Also, you can save your time thanks to
saving presets of shortcodes features.
Multiple cross-browser support: Firefox, IE9+, Opera 9.5, Safari, Netscape, Google
Chrome, Camino, Flock 0.7+.
Detailed user guide and great support: This extension came with the detailed pdf
manual, video tutorials and great support.
www.bowthemes.com
4
Installing and Upgrading
1. System Requirement
Server requirements
PHP 5.0 or above with GD library is enabled. Please follow this
link to check it
MySQL 5.0 or above
Joomla 2.5.x or above;
Client requirements Firefox 2.x, 3.0.x, 3.5.x, Internet Explorer 8+.
2. Downloading
BT Shortcode is a free extension. Feel free to download it here.
3. Manual Installation
Please follow these steps to install the product:
Step 1: Go to Extension Manager
Step 2: Browse the install package
Step 3: Click “Upload & Install”
www.bowthemes.com
5
Figure 1: Upload and install extension
Illustrated image of successful installation:
Figure 2: Installation is successful
www.bowthemes.com
6
4. Plugin Upgrading
Upgrading of this extension to newest version can be easily done by following again
installation steps above. But we recommend you to back up your changes of source code
and language files in this extension before starting any upgrades.
5. Uninstalling
For uninstalling the product, please follow these steps:
Step 1: Go to “Extension Manager”
Step 2: Click to “Manage” tab
Step 3: Choose “Package” type or more quickly with searching “BT Shortcode”
Step 4: Mark checkbox of the package
Step 5: Click “Uninstall” button
Figure 3: Uninstall package
www.bowthemes.com
7
How to use
1. Add shortcode to content
BT Shortcode is a system plugin so you can add shortcode to any content type as long as
you see “Insert Shortcode” button under the editor tool like this image. Of course, you can
use shortcode with Custom HTML module.
Figure 4: Insert Shortcode Button
www.bowthemes.com
8
A modal box will be showed up after you click the button
Figure 5: Shortcode List on modal box
2. Search and Filter
This modal contains all shortcodes that are supported by BT Shortcode. You can use search
box and filter bar to find out shortcode that you want.
Figure 6: Search box is supported
www.bowthemes.com
9
Figure 7: Use filter bar to find shortcodes in a group
3. Use controllers with sample shortcodes
There are many types of controllers that help you configure a shortcode before inserting it
to content. Almost of them are not only simple controllers such as text box, text area, select
box etc… but also few special types like icon picker, tabs generator …
We will see all of them and understand how to configure a shortcode by following few
popular ones.
Let’s begin with “Icon box” shortcode that will be showed like this image
Figure 8: Icon Box - Style: "Icon on top - Out Side"
www.bowthemes.com
10
4. Select Style
Some shortcodes come with many styles, you can choose one of them, such as Icon Box has
5 styles
Default
Icon Inleft – Circle
Icon Inleft – Square
Icon On Top – Inside
Icon On Top – Outside
Figure 9: Some shortcode supports many styles
5. Choose Color with Color Picker
Icon box shortcode allows you set main title and its color.
After setting a title and clicking to Title Color textbox, a color picker will appear. You can
drag two circles on picker to get a color. You can click outside to hide it after you got a
favorite color.
www.bowthemes.com
11
Figure 10: Color Picker
6. Icon Picker
Icon Picker which is one of the coolest controllers supports you get Font Awesome Icon
quickly without remembering its code. More flexibly, the picker also supports you get an
image from Joomla’s folder instead of an icon with button “Select Media”. This button
works like “Image” button under Text Editor.
www.bowthemes.com
12
Figure 11: Font Awesome Icon Picker
7. Setting number with slider
In BT Shortcode, all number type controllers are changed to slider type. You can set number
by dragging the slider or inserting value directly to a text box as the following image.
Figure 12 Slider Controller
www.bowthemes.com
13
8. Textbox and other controller types
The shortcode has many parameters under textbox, text area, toggle button types… All of
them have available description, so you will understand what they are used to set for.
Take a look to all parameters of “Icon box”.
Name Type Description
Style Dropdown List Choose one style for icon box
Title Textbox Set box’s main title
Title Color Color picker Choose title’s color
Icon Icon picker Choose box’s icon
Icon size Slider Set icon’s size in pixels
Font-size Slider Set font size for main title and sub text with formula Main title’s size = font size + 6
Text color Color Picker Choose sub text’s color
Read more Link
Text box Add a read more button to the box with an URL
Class Textbox Add extra class to icon box. It helps you create other style for the box.
Content Text area Set content of sub text
9. Preview
After configuration, you can use “Preview” button to see the shortcode before
inserting it to content.
www.bowthemes.com
14
Figure 13: Preview Button
If the shortcode is generated as you want, click “Insert Shortcode” to insert it to
content. If not, scroll up or click “Go Up” button to continue setting up.
Note: Almost changing that you do on the page will change preview immediately
10. Carousel shortcode with Image Source option
BT Shortcode has 2 two shortcodes that use this parameter. It allows users choose one or
more images from Joomla Folder, Content Category and upload them from local computer.
Figure 14: Select Image Source dropdown box
www.bowthemes.com
15
Step 1: Choose a source from dropdown:
- Media: This source allows you to get images from “images” folder under Joomla root
folder and its sub.
- Categories: It allows you to get intro image or first image of articles that are in
selected category.
After choosing source, new dropdown box will appear to allow you to choose folder or
category, following is two buttons:
- Load Images: Display all available images in selected folder
- Upload more photos: Upload image from your local computer
Figure 15: Choose a source and load available images
Step 2: Choose a folder or a category.
Step 3: Click “Load Image” button, all available images are listed as the following image
www.bowthemes.com
16
By default, all loaded images are selected to add to carousel or slideshow but you can
deselect any images by clicking “Deselect” button on top right corner of each thumbnail
image.
Step 4: Click Add Selected Images
www.bowthemes.com
17
Step 5: Upload more photos from your computer if you want.
Figure 16: Upload more photos
www.bowthemes.com
18
After choosing one or more photos, you can see that they are uploaded with progress
message as the following image.
Figure 17: Uploading progress
www.bowthemes.com
19
Step 6: Order images by dragging and dropping them to new position.
Figure 18: Drag and drop images to order
Step 7: Edit images’ information. An image’s name will be hashed after getting or
uploading. And it is also used for image’s title. So you should edit image’s title with right
bottom button. Clicking the button will display a modal form. You also can set link to
images with this form.
www.bowthemes.com
20
Figure 19: Edit Image's title and link
Other parameters of carousel shortcode you should to know
Name Description
Links target
Set target for images’ link. There are 3 options: Current Page New tab/window Popup window
Width Set width for the carousel. Set it by 0 if you want to for auto width and responsive mode.
Thumbnail Width Set thumbnail width in pixels
Thumbnail Height Set thumbnail height in pixels
www.bowthemes.com
21
Scroll Per
Set a way to scroll carousel. If you set it by “Item” carousel will scroll by item one by one. If you set it by “Page” carousel will scroll by page. This parameter is applied to next/prev buttons, mouse/touch event but navigate bullet.
Show title Show/Hide image title
Center Align the carousel center when it has specified width that you set with “Width” parameter.
Arrows Show next/back arrow buttons
Pagination Show/Hide carousel pagination and you can choose its type with 2 options: Number and Bullet.
Autoplay Set interval time between each animation. Set it by 0 if you don’t want the carousel auto play. The unit is millisecond
Speed Set animation speed. The unit is millisecond.
Class Set Extra Class that help you customize style for whole carousel
Finally, after setting something up, you click preview button and view your work.
Figure 20: Carousel ShortCode
www.bowthemes.com
22
11. Setting shortcode up by typing
As you know with previous shortcode, there is a parameter called “Content” at the end of
setting page. With Icon box, it is only a simple text, however, with carousel, it is set of
“child” shortcode “image”.
Figure 21: List of child shortcode
You also see this with other shortcode like Tabs – that has many [bt_tab] child shortcodes
or Accordion with [bt_spoiler].
With these shortcodes, you flawlessly add more images and tabs by copying and typing a
new child shortcode to Content parameter when installing shortcode or after inserting
shortcode to article’s content.
Each shortcode has many attributes. Some of them are important but some of them are not.
Example with [bt_image], src attribute is important.
So you need to insert
[bt_image src=”images/image_path”]
To add new image to carousel without getting image steps above.
Of course, you can remove image by deleting a [bt_image] shortcode
One more thing, you can not only add new image or tab but also change shortcode
configuration by typing. After clicking Insert Shortcode button, take a look to article
content and you will see shortcode is generator like that
www.bowthemes.com
23
Figure 22: Full shortcode in editor
As you see, the first open tag contains anything that you set up as tag’s attributes, it means
you can re-configure the shortcode by changing their value.
12. Make article’s layout with Columns Shortcode
Columns shortcode helps you create multi-columns layout for article content’s without
using bored HTML Table or creating DIV by your hand. Specially, BT Shortcode uses
Boostrap 3.2.0, so the columns are complete responsive.
Take a look to Columns setting page
It has only main parameter “Set Columns”
Figure 23: Set number of columns
www.bowthemes.com
24
The shortcode supports max 6 columns and allows you merge columns to create some
special layout such as 1/3 and 2/3 columns or 1/4 and 3/4 columns.
Click number buttons above to initialize layouts with same number of columns, then click
arrow button of top right corner of each column to merge it with next one.
Example:
Initialize layout with 4 columns
Figure 24: Four columns layout
Merge the first column with the second one to make 2/4, 1/4 and 1/4 layout
Figure 25: 2/4, 1/4 and 1/4 columns layout
www.bowthemes.com
25
Continue merging (the first + the second) column with the third one to make 3/4 and 1/4
layout
Figure 26: 3/4 and 1/4 columns layout
Finally, edit columns’ content with Content parameter as you know about Iconbox and
Carousel shortcodes
Figure 27: Edit column's content
13. Shortcode in shortcode
After you insert many shortcode to your article, you will see that they are displayed row by
row, you can’t align it left, right or same row.
Columns shortcode solves this problem
Instead of plain text, you can add a shortcode to [bt_column] shortcode as content by
typing.
www.bowthemes.com
26
Example:
Figure 28: Quote in column shortcode
This is result image
Figure 29: Quote shortcode in 1/2 column
www.bowthemes.com
27
14. Save and load presets
On a website, maybe you will need to add many shortcodes with same styles, it means you
need create and set shortcode up many times.
“Presets” button will be saved your time, with it, you can save configuration of shortcode.
You need to choose a shortcode then load saved preset, all parameters will be set value
automatically.
Follow these steps to load or save a preset
Step 1: After configuring a shortcode, click button Presets and a modal will appears. It
contains “Save current settings as preset” and list of saved preset.
Figure 30: Presets button
www.bowthemes.com
28
Step 2:
Click “Save current settings as preset” button, new modal will appears. Set name for
preset then click “OK”
Figure 31: Set preset's name
Or click to a saved preset to load its configuration
Figure 32: Load a preset
www.bowthemes.com
29
15. Customize style with additional class
You are bored with default style of shortcode and you want create your own style.
There are two ways to do this:
Override BT Shortcode’s CSS files. This way helps you replace default style of shortcodes
with new styles for each your template.
Follow these steps to override the files
1. Open folder /templates/{your_template}/html
2. Create sub folder “bt_shortcode_system”
3. Copy folder “plugins/system/bt_shortcode_system/css” to new folder
In “css” folder, there are many files and you should edit following three files:
box-shortcodes.css
content-shortcode.css
galleries-shortcode.css
These files contain style for all shortcodes
Adding new style by using additional class.
Every shortcode has a “Class” parameter, it helps you add more classes to shortcode.
Then you can use these new classes to create some CSS rules to style shortcodes. You can
add these CSS rules to any your CSS files that are loaded to webpage. But we recommend
you to use both ways and add new rules to copied files.
www.bowthemes.com
30
Example:
This is original default CSS style of Tabs shortcode – Verticle Default
Figure 33: Tabs shortcode in default vertical style
And here is one of many CSS rules that is used to style tab buttons
.bt-tabs-nav span { border-top-left-radius: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; display: inline-block; font-size: 13px; line-height: 20px; margin-right: 3px; min-height: 40px; padding: 10px 15px; transition: all 0.2s ease 0s; }
You add “your-class” to the “Class” parameter then add some CSS rules to your css file. One
of them is:
.your-class .bt-tabs-nav span { border-bottom: 1px solid #f2f2f2; border-radius: 0; color: #666 !important; font-size: 14px; }
www.bowthemes.com
31
New rule will remove tab button rounded corner and change font a little like following
image:
Figure 34: Customized style with new class
www.bowthemes.com
32
Contacting Bowthemes
All Bowthemes products include forum support, email support and ticket support.
Please refer your membership package to select the compatible kind of support, as we may
be able to solve the problem without delay.
Website: http://bowthemes.com
Forum support: http://bowthemes.com/forums/65-bt-shortcode-plugin/
Email support: [email protected]
Ticket support: http://bowthemes.com/submit-a-ticket
If you encounter any issues with Bowthemes extensions and templates, email us at
[email protected] and we would like to answer your questions.
This document is proprietary and confidential. No part of this document may be disclosed in any
manner to a third party without the prior written consent of Bowthemes Team.