Description

You can create various types of images to insert into your pages. Images can be resized to the dimensions specified and positioned around content.

Styled Images

Create theme styled images using the styled_image shortcode and optional settings for image dimensions, links, etc. You can also add captions and lightbox effects as needed.

[styled_image w="400" h="300" lightbox="yes" image="http://mysite.com/myimage.jpg"]

This is an example of the [styled_image] shortcode with a caption added by inserting the parameter caption.

Parameters

w

(integer) Image width. Exclude parameter for proportional adjustment based on height setting or set to “0” for original width.

h

(integer) Image height. Exclude parameter for proportional adjustment based on width setting or set to “0” for original height.

image

(integer/string) ID of the desired media file or URL of the image file.

align

(string) (Optional) Image alignment: left, right, center.

alt

(string) (Optional) Image description or alternate text.

caption

(string) (Optional) Caption text displayed below the image.

link

(string) (Optional) URL for the image link.

lightbox

(string) (Optional) Open link in a lightbox: Yes, No. If opening the full size version of the image being resized the “link” parameter is not needed.

rel

(string) (Optional) Text for link’s “rel” tag. Multiple images with the same rel tag will be connected through the lightbox next/previous buttons.

Samples

Basic styled images.

The images below use the styled image shortcode with lightbox enabled. They are linked together in the lightbox with a matching rel parameter and the lightbox description text is added with the alt parameter.

Plain Image

A basic image resized and output to the specified width and height.

[plain_image w="400" h="300" image="http://mysite.com/myimage.jpg"]

Parameters

w

(integer) Image width. Set to “0” for original width.

h

(integer) Image height. Set to “0” for original height.

image

(integer/string) ID of the desired media file or URL of the image file.

align

(string) (Optional) Image alignment: left, right, center.

alt

(string) (Optional) Image description or alternate text.

Samples

Resized Image URL

Returns the full URL to create a resized image at the size specified. This is useful for inserting a resized image path into other shortcodes or widgets.

[resized_image_path w="400" h="300" image="http://mysite.com/myimage.jpg"]

Parameters

w

(integer) Image width. Set to “0” for original width.

h

(integer) Image height. Set to “0” for original height.

image

(integer/string) ID of the desired media file or URL of the image file.

Samples

http://para.llel.us/themes/mingle-wp/wp-content/themes/parallelus-mingle/assets/images/placeholder.jpg

Description

Insert a standard HTML submit input or button. Buttons can also be created using links with anchor tags to direct users to other pages or sites.

Buttons

.demoBtn .btn {min-width: 138px;} .demoBtn .btn.large {min-width: 185px;}

Impact Button

Impact buttons are specially designed to draw attention. They are large and use the heading font to set them apart from other buttons. Impact buttons are used in the “Call to Action” shortcode.

[button style="impactBtn" onclick="alert('An impact button');"]Impact Button[/button]

Standard Button

[button]Button Text[/button]

Parameters (Standard Button)

style

(string) (Optional) The button color and size, e.g. “white large”. This may contain any combination of size and color.

Size: small, medium (default), large
Color: dark, white, gray, orange, red, blue, green, black, impactBtn

title

(string) (Optional) Title attribute.

class

(string) (Optional) Class attribute.

id

(string) (Optional) ID attribute.

onclick

(string) (Optional) JavaScript onclick functionality.

name

(string) (Optional) Forms object name attribute.

value

(string) (Optional) Forms object value attribute.

Link Button

[button_link url="http://www.mysite.com"]Button Text[/button_link]

Parameters (Link Button)

url

(string) Link to follow when clicked.

target

(string) (Optional) Link target attribute: blank, parent, self, top.

style

(string) (Optional) The button color and size, e.g. “white large”. This may contain any combination of size and color.

Size: small, medium (default), large
Color: dark, white, gray, orange, red, blue, green, black

title

(string) (Optional) Title attribute.

class

(string) (Optional) Class attribute.

id

(string) (Optional) ID attribute.

onclick

(string) (Optional) JavaScript onclick functionality.

Description

Single Icon

[icon size="large" icon="star"]

Parameters

size

(string) (Optional) Icon size. Values: small, medium, large

icon

(string) The image icon.

Values: digg, googlebuzz, delicious, twitter, dribbble, stumbleupon, youtube, vimeo, skype, facebook, facebooklike, ichat, myspace, dropbox, minus, plus, close, check, star, unstar, folder, tag, bookmark, heart, leftarrow, rightarrow, undo, redo, page, acrobat, acrobat2, word, word2, zip, zip2, powerpoint, powerpoint2, excel, excel2, document, document2, map, map2, marker, image, images, audio, play, film, film2, quicktime, clapboard, microphone, search

link

(string) (Optional) URL of the link for the icon.

title

(string) (Optional) Title attribute.

target

(string) (Optional) Link target attribute: blank, new, etc.

class

(string) (Optional) Custom CSS classes to apply to the list.

Samples

A single icon:

[icon size="large" icon="star"]

Icon Lists

[icon_list size="large" icon="digg, twitter, skype" link="http://digg.com, http://twitter.com, http://skype.com" target="blank"]

Parameters

size

(string) (Optional) Icon size. Values: small, medium, large

icon

(string) The image icon. Can be entered as a comma separated string.

Values: digg, googlebuzz, delicious, twitter, dribbble, stumbleupon, youtube, vimeo, skype, facebook, facebooklike, ichat, myspace, dropbox, minus, plus, close, check, star, unstar, folder, tag, bookmark, heart, leftarrow, rightarrow, undo, redo, page, acrobat, acrobat2, word, word2, zip, zip2, powerpoint, powerpoint2, excel, excel2, document, document2, map, map2, marker, image, images, audio, play, film, film2, quicktime, clapboard, microphone, search

link

(string) (Optional) URL as link for each icon. Entered as a comma separated list.

title

(string) (Optional) Title attribute for each icon link. Entered as a comma separated list.

target

(string) (Optional) Link target attribute: blank, new, etc.

class

(string) (Optional) A custom CSS class to apply to the list.

Samples

Large Icons

Medium Icons

Small Icons

Bulleted Lists

[bullet_list icon="check"]
	<ul>
		<li>Your Text</li>
		<li>Your Text</li>
		<li>Your Text</li>
	</ul>
[/bullet_list]

Parameters

icon

(string) (Optional) The bullet image. Default: “check”.

Values: digg, googlebuzz, delicious, twitter, dribbble, stumbleupon, youtube, vimeo, skype, facebook, facebooklike, ichat, myspace, dropbox, minus, plus, close, check, star, unstar, folder, tag, bookmark, heart, leftarrow, rightarrow, undo, redo, page, acrobat, acrobat2, word, word2, zip, zip2, powerpoint, powerpoint2, excel, excel2, document, document2, map, map2, marker, image, images, audio, play, film, film2, quicktime, clapboard, microphone, search

class

(string) (Optional) A custom CSS class to apply to the list.

indent

(string) (Optional) Left margin of list. Example values: “1em”, “10px”

Samples

Description

There are different boxes and containers you can use to display content for various situations.

Quote Boxes

Show a quote and cite the author.

[quote author="Author Name" image="http://yoursite.com/image.jpg" w="100"]Your quoted text.[/quote]

We knew this would be a winning combination from the very first moment we started working with Salutation. This is really a dream come true.Robert Allen, WebTech.com

[quote author="Robert Allen, WebTech.com" image="2056" w="160" h="180" image_align="left"]We knew this would be a winning combination from the very first moment we started working with Salutation. This is really a dream come true.[/quote]

Parameters

author

(string) (Optional) Author or credited source of the quote.

image

(string) (Optional) The image path or ID of a media file to use.

w

(int) (Optional) The width of the image.

h

(int) (Optional) The height of the image.

image_align

(string) (Optional) The image position: left, right.

Sample

Image aligned right

I told them what I wanted and BAM! They made it happen. What more an I ask for. Salutation rocks!Vanessa, SavvyWeb

[quote author="Vanessa, SavvyWeb" image="2072" w="160" h="170" image_align="left"]I told them what I wanted and BAM! They made it happen. What more an I ask for.[/quote]

No image

[quote author="Vanessa, SavvyWeb""]This is the most amazing thing I've seen in a long time. It is incredible and really, really, really, really, really, really great.[/quote]

Pull Quote

Show a pull quote within a paragraph, article or section of text.

[pull_quote]Your quoted text.[/pull_quote]

Parameters

align

(string) (Optional) The position of the quote: left, right.

Samples of Pull Quote Usage

Pull quote aligned right

You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? You think water moves fast? You should see ice.Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.

Pull quote aligned left

The lysine contingency – it’s intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a single faulty enzyme in protein metabolism. The animals can’t manufacture the amino acid lysine. Unless they’re continually supplied with lysine by us, they’ll slip into a coma and die.

Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. It’s curious. Ted did figure it out – time travel.Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.

You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

Text Boxes (icon boxes)

The text box shortcode lets you add a block of text with a title and optional icon. The fonts in a text box are slightly larger than the default body fonts to make them stand out.

[text_box title="My Title"]Your message text.[/text_box]

Parameters

title

(string) (Optional) The main headline text.

icon

(string) (Optional) An icon to display with the text.

Values: calendar, comment, download, gears, globe, groups, image, info, list, mail, search, settings, shuffle, wp

Samples

[text_box title="A Simple Text Box"]You see? It's curious. Ted did figure it out...[/text_box]

The examples below use column containers to create a 2 column layout of text boxes. An example of the code used is at the bottom of the list.

[one_half]

	[text_box title="A Set of Text Boxs with Icons" icon="calendar"]

		The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.

	[/text_box]

[/one_half]

[one_half_last]

	[text_box title="A Set of Text Boxs with Icons" icon="info"]

	The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism.

	[/text_box]

[/one_half_last]

[clear]

Call to Action

The “Call to Action” shortcode is designed to draw attention to a headline and button.

[call_to_action title="Your message text."]

Parameters

title

(string) (Optional) The main headline text.

tag_line

(string) (Optional) The supporting “sub-title” text.

button

(string) (Optional) Text to show on the button. If excluded the button will not appear.

link

(string) (Optional) The URL of the link to use with the button.

Samples

[call_to_action title="Call to Action with a Button..." button="Button Text" link="JavaScript:alert('Woohoo!');"]

[call_to_action title="Call to Action with a Tagline..." tag_line="This is the tagline text below the title." button="Button Text" link="JavaScript:alert('Here we go!');"]

Message Boxes

Message boxes for information and drawing attention to content.

[message_box]Your message text.[/message_box]

Parameters

type

(string) (Optional) Type of message box.

Values: note, info, alert, error, success, inset

icon

(string) (Optional) Show icon associated with the selected box type. “Yes” to display icon, do not include option if icon is not desired.

close

(string) (Optional) Add a close button to the box. The text entered will be used as the button text.

Samples

An inset message box:
Inset message boxes cannot display close buttons or icons.

Tabs

Tabs allow you to show more content on the page using less space. You can have as many tabs as needed. The container will auto-fill the width of the area where it is inserted.

[tabs]
	[tab title="Tab Title"]Tab content...[/tab]
	[tab title="Tab Title"]Tab content...[/tab]
	[tab title="Tab Title"]Tab content...[/tab]
[/tabs]

Parameters

title

(string) The text to display on the tab.

Samples

• First Example Tab
• Second Example Tab
• Third Example Tab

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Nunc posuere aliquet sollicitudin. Proin at pulvinar nibh. Integer euismod ultricies euismod. Nulla ac facilisis arcu. Quisque bibendum suscipit ligula eget placerat. Maecenas volutpat urna eu dui vulputate laoreet. Sed tempus eros quis metus scelerisque ac vestibulum tortor pulvinar. Aliquam sed nisl ut nisi gravida consequat at in metus. Nunc vel erat et mauris malesuada tristique. Quisque mattis elit eros, non facilisis sem. Cras a congue neque. In massa purus, ornare in sagittis id, accumsan ac nisl. Sed sit amet.

Nam libero diam, tincidunt ac volutpat non

Plandit in massa. Sed convallis luctus lorem, quis elementum lacus viverra eu. Aliquam erat turpis, dictum a sodales eu, tempus ac magna. Nam sit amet justo eu lacus commodo rutrum eget a felis. Ut rhoncus faucibus nibh eget scelerisque.

Fusce nec dui turpis sed mollis

Nibh ac blandit porttitor, metus tortor blandit ipsum, eu mattis mi diam ac purus. Integer ornare mattis viverra. Nunc accumsan massa eu ligula pretium id commodo mi aliquet. Nunc gravida purus quis tellus varius consequat. Nullam at diam arcu. Sed urna turpis, pellentesque non venenatis ut, convallis nec velit. Nam placerat imperdiet ornare. Vestibulum faucibus elit sit amet lectus fringilla nec ornare risus faucibus. Sed hendrerit, orci vel varius ornare.

Toggles (FAQs)

Expand and collapse the content inside a container with a title. This is useful for “quick tips” and frequently asked questions pages where the user can navigate a list of questions.

[toggle title="The Question or Title"]The is the answer or content to show...[/toggle]

Parameters

title

(string) The title to be displayed.

Samples

An Another Answer Including Some Images

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Nunc posuere aliquet sollicitudin. Proin at pulvinar nibh. Integer euismod ultricies euismod. Nulla ac facilisis arcu. Quisque bibendum suscipit ligula eget placerat. Maecenas volutpat urna eu dui vulputate laoreet. Sed tempus eros quis metus scelerisque ac vestibulum tortor pulvinar. Aliquam sed nisl ut nisi gravida consequat at in metus. Nunc vel erat et mauris malesuada tristique. Quisque mattis elit eros, non facilisis sem. Cras a congue neque. In massa purus, ornare in sagittis id, accumsan ac nisl. Sed sit amet.

Nam libero diam, tincidunt ac volutpat non

Plandit in massa. Sed convallis luctus lorem, quis elementum lacus viverra eu. Aliquam erat turpis, dictum a sodales eu, tempus ac magna. Nam sit amet justo eu lacus commodo rutrum eget a felis. Ut rhoncus faucibus nibh eget scelerisque.

Fusce nec dui turpis sed mollis

Nibh ac blandit porttitor, metus tortor blandit ipsum, eu mattis mi diam ac purus. Integer ornare mattis viverra. Nunc accumsan massa eu ligula pretium id commodo mi aliquet. Nunc gravida purus quis tellus varius consequat. Nullam at diam arcu. Sed urna turpis, pellentesque non venenatis ut, convallis nec velit. Nam placerat imperdiet ornare. Vestibulum faucibus elit sit amet lectus fringilla nec ornare risus faucibus. Sed hendrerit, orci vel varius ornare.

Description

Display tables with prices and descriptions for products and packages.

[pricing_table columns="3"]
	[pricing_column title="Column 1"]
	    <ul>
		<li>[price_info cost="$14.99"]1 month[/price_info]</li>
		<li>Item description and details...</li>
		<li>Some more info...</li>
		<li>[button_link url=""]Title[/button_link]</li>
	    </ul>
	[/pricing_column]
	[pricing_column title="Column 2" highlight="true"]
	    <ul>
	 	<li>[price_info cost="$24.99"]3 months[/price_info]</li>
		<li>Item description and details...</li>
		<li>Some more info...</li>
		<li>[button_link url="" style="impactBtn"]Title[/button_link]</li>
	    </ul>
	[/pricing_column]
	[pricing_column title="Column 3"] 
	    <ul>
		<li>[price_info cost="$59.99"]6 months[/price_info]</li>
		<li>Item description and details...</li>
		<li>Some more info...</li>
		<li>[button_link url=""]Title[/button_link]</li>
	    </ul>
	[/pricing_column]
[/pricing_table]

Parameters

pricing_table

columns

(integer) (Required) The number of columns being created. Valid settings 2-6

pricing_column

title

(string) The column title.

highlight

(string) (Optional) Highlight this column with accent color and shadow. “true” to make highlight column. Exclude field for regular columns.

price_info

cost

(string) (Optional) The price of the item.

Sample 4 Column – No Highlight

HR Dividers

A physical separators between content.

[hr]

Samples

Orci enim tincidunt odio, vitae tempus ipsum nibh quis est. Donec vehicula nisi sed dolor volutpat commodo. Nullam scelerisque varius tellus, in dapibus velit aliquet sit amet.

Orci enim tincidunt odio, vitae tempus ipsum nibh quis est. Donec vehicula nisi sed dolor volutpat commodo. Nullam scelerisque varius tellus, in dapibus velit aliquet sit amet.

Orci enim tincidunt odio, vitae tempus ipsum nibh quis est. Donec vehicula nisi sed dolor volutpat commodo. Nullam scelerisque varius tellus, in dapibus velit aliquet sit amet.

Clear Dividers

An invisible divider that separates content and corrects alignment issues.

[clear]

2 Column Layout

Add a 2 column layout to a page or post.

[one_half]First column of content.[/one_half]

[one_half_last]Last column of content.[/one_half_last]

Samples

3 Column Layout

Add a 3 column layout to a page or post.

[one_third]First column of content.[/one_third]

[one_third]Second column of content.[/one_third]

[one_third_last]Last column of content.[/one_third_last]

Other variations

[two_third]Your content here.[/two_third]

Samples

4 Column Layout

Add a 4 column layout to a page or post.

[one_fourth]First column of content.[/one_fourth]

[one_fourth]Second column of content.[/one_fourth]

[one_fourth]Third column of content.[/one_fourth]

[one_fourth_last]Last column of content.[/one_fourth_last]

Other variations

[three_fourth]Your content here.[/three_fourth]

Samples

5 Column Layout

Add a 5 column layout to a page or post.

[one_fifth]First column of content.[/one_fifth]

[one_fifth]Second column of content.[/one_fifth]

[one_fifth]Third column of content.[/one_fifth]

[one_fifth]Fourth column of content.[/one_fifth]

[one_fifth_last]Last column of content.[/one_fifth_last]

Other variations

[two_fifth]Your content here.[/two_fifth]
[three_fifth]Your content here.[/three_fifth]
[four_fifth]Your content here.[/four_fifth]

Samples

Description

Insert a blog post list using the blog shortcode. Add the shortcode to a page or other content area to produce a list of blog posts. Optional parameters allow customization of the display.

Example shortcode:

[blog category="1" posts_per_page="2" paging="false" image_width="450" image_height="125" excerpt_length="-1" read_more="-1" orderby="rand"]

Default Usage

[blog]

Blog from Categories

[blog category="7,8,9"]

Parameters

category

(string) The category ID’s to pull posts from. Can be entered as a comma separated list.

images

(bool) (Optional) Show featured image in blog list. (true/false)

image_width

(integer) (Optional) The featured image height. Set to “0” for auto.

image_height

(integer) (Optional) The featured image width. Set to “0” for auto.

post_content

(string) (Optional) Display excerpt or full post. Values: excerpt, full

excerpt_length

(integer) (Optional) The length of the excerpt, number of words to display. Set to “-1″ for no excerpt.

show_date

(bool) (Optional) Show or hide the post date. (true/false)

author_avatar

(bool) (Optional) Show or hide the author avatar image. (true/false)

author_link

(bool) (Optional) Show or hide the author name and link. (true/false)

comments_link

(bool) (Optional) Show or hide the comments link. (true/false)

show_category_list

(bool) (Optional) Show or hide the list of categories assigned to the post. (true/false)

show_tag_list

(bool) (Optional) Show or hide the list of tags assigned to the post. (true/false)

posts_per_page

(integer) (Optional) The number of posts to display on each page.

paging

(bool) (Optional) Enable paging. (true/false)

read_more

(string) (Optional) Shows entered text at the end of the excerpt linking to full post. For example: read_more=”More…”

Examples

Posts from categories with paging and post details:

[blog category="7,8,9" author_avatar="true" show_date="true" paging="true"]

Posts from categories, full post no images:

[blog category="7,8,9" post_content="full" images="false"]

Blog from Pages

Blogs may also be generated from pages using a list of page ID’s or the child pages from a parent page ID.

Page Parameters

post_type

(string) (Required) Directs the query to use pages instead of posts. Must include the value “page”.

page_id

(string) The page ID’s to include. Can be entered as a comma separated list.

post_parent

(integer) (Optional) Show child pages of the selected parent. Similar to using a category for posts.

Examples

Pages from list of page ID’s:

[blog post_type="page" page_id="10,11,12"]

Child pages from parent page ID:

[blog post_type="page" post_parent="9"]

Order and Orderby Parameters

order

(string) (Optional) Designates the ascending or descending order of the “orderby” parameter.

“ASC” – ascending order from lowest to highest values (1, 2, 3; a, b, c).

“DESC” – descending order from highest to lowest values (3, 2, 1; c, b, a).

orderby

(string) (Optional) Sort posts by.

‘none’ – No order.

‘id’ – Order by post id.

‘author’ – Order by author.

‘title’ – Order by title.

‘date’ – Order by date. (default)

‘modified’ – Order by last modified date.

‘parent’ – Order by post/page parent id.

‘rand’ – Random order.

‘comment_count’ – Order by number of comments

‘menu_order’ – Order by Page Order.

Examples

Display random posts:

[blog category="8" orderby="rand"]

Display popular posts:

[blog category="8" orderby="comment_count"]

Additional blog information available on the blog information page »