Description
[hr]
You can create various types of images to insert into your pages. Images can be resized to the dimensions specified and positioned around content.
[clear]
[clear]
Styled Images
[hr]
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.
[code][styled_image w= »400″ h= »300″ lightbox= »yes » image= »http://mysite.com/myimage.jpg »][/code]
[clear]
[styled_image w= »590″ h= »235″ lightbox= »yes » rel= »styled-2″ align= »left » alt= »Styled Image Shortcode (with caption) » caption= »This is an example of the [styled_image] shortcode with a caption added by inserting the parameter caption. » image= »1997″]
[clear]
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.
[clear]
[clear]
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.
[styled_image w= »285″ h= »200″ lightbox= »yes » align= »left » rel= »styled-1″ alt= »Styled Image Shortcode Sample 1″ image= »1992″]
[styled_image w= »285″ h= »200″ lightbox= »yes » align= »left » rel= »styled-1″ alt= »Styled Image Shortcode Sample 2″ image= »1993″]
[clear]
[clear]
[clear]
Plain Image
[hr]
A basic image resized and output to the specified width and height.
[code][plain_image w= »400″ h= »300″ image= »http://mysite.com/myimage.jpg »][/code]
[clear]
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.
[clear]
[clear]
Samples
[plain_image w= »590″ h= »235″ alt= »Plain Image Shortcode Sample » image= »1994″]
[clear]
[clear]
[clear]
Resized Image URL
[hr]
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.
[code][resized_image_path w= »400″ h= »300″ image= »http://mysite.com/myimage.jpg »][/code]
[clear]
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.
[clear]
[clear]
Samples
[resized_image_path w="400" h="200" image="http://para.llel.us/themes/mingle-wp/wp-content/themes/parallelus-mingle/assets/images/placeholder.jpg"]