Skip to main content

Image Frames Shortcodes

You can show your images in different layout styles with Porto Image Frame shortcodes.

[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Default

By default, Bootstrap’s thumbnails are designed to showcase linked images with minimal required markup.

[porto_image_frame el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project.jpg”][/porto_image_frame]
[porto_image_frame shape=”circle” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg”][/porto_image_frame]
[porto_image_frame shape=”thumbnail” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg”][/porto_image_frame]
[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Hover Styles

The thumbnail details can be displayed in different styles.

Default
[porto_image_frame type=”hover-style” link=”url:%23||” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project.jpg”][/porto_image_frame]
Default Lighten
[porto_image_frame type=”hover-style” hover_bg=”lighten” link=”url:%23||” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg”][/porto_image_frame]
No Zoom
[porto_image_frame type=”hover-style” hover_img=”no-zoom” link=”url:%23||” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg”][/porto_image_frame]
With Title and Type
[porto_image_frame type=”hover-style” link=”url:%23||” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”][/porto_image_frame]
Centered Icons
[porto_image_frame type=”hover-style” centered_icons=”yes” link=”url:%23||” icons=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-play-circle%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22popup_iframe%22%2C%22popup_iframe%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0O2aH4XLbto%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-plus%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-5.jpg”][/porto_image_frame]
Icons Colors
[porto_image_frame type=”hover-style” centered_icons=”yes” link=”url:%23||” icons=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-play-circle%22%2C%22skin%22%3A%22primary%22%2C%22action%22%3A%22popup_iframe%22%2C%22popup_iframe%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0O2aH4XLbto%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-plus%22%2C%22skin%22%3A%22secondary%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-link%22%2C%22skin%22%3A%22tertiary%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-ellipsis-h%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-6.jpg”][/porto_image_frame]
Centered Info
[porto_image_frame type=”hover-style” view_type=”centered-info” link=”url:%23||” title=”Project Title” sub_title=”Project Type” date=”09/19/2016″ el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-7.jpg”][/porto_image_frame]
Bottom Info
[porto_image_frame type=”hover-style” view_type=”bottom-info” hover_bg=”lighten” centered_icons=”yes” link=”url:%23||” icons=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-play-circle%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22popup_iframe%22%2C%22popup_iframe%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0O2aH4XLbto%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-plus%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project.jpg”][/porto_image_frame]
Bottom Info Dark
[porto_image_frame type=”hover-style” view_type=”bottom-info-dark” hover_bg=”lighten” centered_icons=”yes” link=”url:%23||” icons=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-play-circle%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22popup_iframe%22%2C%22popup_iframe%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0O2aH4XLbto%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-plus%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg”][/porto_image_frame]
Push Horizontally[porto_image_frame type=”hover-style” view_type=”centered-info” hover_bg=”lighten” hover_img=”push-hor” link=”url:%23||” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”][/porto_image_frame]
With Captions
[porto_image_frame type=”hover-style” hover_bg=”hide-wrapper-bg” show_socials=”yes” link=”||” title=”Project Title” sub_title=”Project Type” socials=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-facebook%22%2C%22skin%22%3A%22primary%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-twitter%22%2C%22skin%22%3A%22primary%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-linkedin%22%2C%22skin%22%3A%22primary%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/porto_image_frame]
Hide Info Hover
[porto_image_frame type=”hover-style” view_type=”hide-info-hover” link=”||” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project.jpg”][/porto_image_frame]
Side Image Left
[porto_image_frame type=”hover-style” view_type=”side-image” hover_bg=”hide-wrapper-bg” hover_img=”no-zoom” sub_title=”PROJECT TITLE” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/porto_image_frame]
Side Image Right
[porto_image_frame type=”hover-style” view_type=”side-image-right” hover_bg=”hide-wrapper-bg” hover_img=”no-zoom” sub_title=”PROJECT TITLE” link=”||” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/porto_image_frame]
No Borders
[porto_image_frame type=”hover-style” view_type=”centered-info” hover_bg=”lighten” noborders=”yes” link=”||” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg”][/porto_image_frame]
[porto_image_frame type=”hover-style” noborders=”yes” link=”url:%23||” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg”][/porto_image_frame]
[porto_image_frame type=”hover-style” view_type=”bottom-info-dark” hover_bg=”lighten” noborders=”yes” centered_icons=”yes” link=”url:%23||” icons=”%5B%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-play-circle%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22popup_iframe%22%2C%22popup_iframe%22%3A%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0O2aH4XLbto%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%2C%7B%22icon_type%22%3A%22fontawesome%22%2C%22icon%22%3A%22fa%20fa-plus%22%2C%22skin%22%3A%22light%22%2C%22action%22%3A%22open_link%22%2C%22open_link%22%3A%22url%3A%2523%7C%7C%22%2C%22popup_size%22%3A%22md%22%2C%22popup_animation%22%3A%22mfp-fade%22%7D%5D” title=”Project Title” sub_title=”Project Type” el_class=”m-b-xl” label=”” image_url=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg”][/porto_image_frame]
[vc_separator color=”custom” gap=”tall” gradient=”yes”]

Grid

[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-1.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-2.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-3.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-4.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-5.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-6.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-1.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-b-none” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-2.png” label=””]
[vc_empty_space height=”22px”][vc_separator color=”custom” gap=”tall” gradient=”yes”]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-1.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-2.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-3.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-5.png” label
=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-6.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-1.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-2.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-1.png” label=””]
[vc_single_image source=”external_link” alignment=”center” el_class=”m-t-sm m-b-sm” custom_src=”http://sw-themes.com/porto_dummy/wp-content/uploads/images/logo-6.png” label=””]