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]