Image Frames Shortcodes

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

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]

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]

Grid