You can create various types of images to insert into your pages. Images can be resized to the dimensions specified and positioned around content.
[hr]
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.
[clear]
[styled_image image=»3926″ w=»500″ h=»300″ lightbox=»yes» align=»left» alt=»Styled Image Shortcode (with a caption)» caption=»This is an example of the [styled_image] shortcode with a caption added by inserting the parameter caption.»]
[clear]
[code][styled_image w=»500″ h=»300″ lightbox=»yes» align=»left» alt=»Styled Image Shortcode (with a caption)» caption=»This is my caption» image=»http://mysite.com/myimage.jpg»][/code]
[hr]
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.
Special usage: Enter the text ‘featured’ as the image name to automatically insert the assigned feature image for the current page or post.
- 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]
Examples
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=»290″ h=»175″ lightbox=»yes» align=»left» rel=»styled-1″ alt=»Styled Image Shortcode Sample 1″ image=»5642″]
[styled_image w=»290″ h=»175″ lightbox=»yes» align=»left» rel=»styled-1″ alt=»Styled Image Shortcode Sample 2″ image=»5621″]
[clear]
[code][styled_image w=»290″ h=»175″ lightbox=»yes» align=»left» rel=»styled-1″ alt=»Styled Image Shortcode Sample 1″ image=»3942″]
[styled_image w=»290″ h=»175″ lightbox=»yes» align=»left» rel=»styled-1″ alt=»Styled Image Shortcode Sample 2″ image=»3937″][/code]
[clear] [hr]
Plain Image
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]
Example
[plain_image w=»500″ h=»300″ alt=»Plain Image Shortcode Sample» image=»3920″]
[clear]
[code][plain_image w=»500″ h=»300″ alt=»Plain Image Shortcode Sample» image=»3920″][/code]
[hr]
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.
[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/razor-wp/wp-content/themes/parallelus-razor/assets/images/placeholder.jpg"]
[clear]
[code][resized_image_path w=»400″ h=»200″ image=»http://para.llel.us/themes/razor-wp/wp-content/themes/parallelus-razor/assets/images/placeholder.jpg»][/code]