Image Frames

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.


Hover Styles

The thumbnail details can be displayed in different styles.

Default
Default Lighten
No Zoom
With Title and Type
Centered Icons
Icons Colors
<
h5 style="text-align: left" class="vc_custom_heading text-semibold text-uppercase">Push Horizontally h5>
With Captions
Project TitleProject TypeLorem ipsum dolor sit amet, consectetur adipiscing elit.
Hide Info Hover
Project TitleProject Type
Side Image Left
PROJECT TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Side Image Right
PROJECT TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
No Borders

Grid


[type='text']
[type='text']
[type='password']
[type='password']
[gravityform id="1" title="true" description="true" ajax="true"]
<div class='gf_browser_unknown gform_wrapper register-free-wrappper_wrapper' id='gform_wrapper_1' ><a id='gf_1' class='gform_anchor' ></a><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_1' id='gform_1' class='register-free-wrappper' action='/image-frames/#gf_1'> <div class='gform_heading'> <h3 class='gform_title'>Register</h3> <span class='gform_description'>Create a free account and access<span> free slides weekly</span> </span> </div> <div class='gform_body'><ul id='gform_fields_1' class='gform_fields right_label form_sublabel_below description_below'><li id='field_1_1' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_1' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_1_1' type='text' value='' class='large' tabindex='1' placeholder='Username' aria-required="true" aria-invalid="false" /></div></li><li id='field_1_7' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_7_3' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gfield_trigger_change' id='input_1_7'> <span id='input_1_7_3_container' class='name_first' > <input type='text' name='input_7.3' id='input_1_7_3' value='' aria-label='First name' tabindex='3' aria-required="true" aria-invalid="false" placeholder='First Name'/> <label for='input_1_7_3' >First</label> </span> <span id='input_1_7_6_container' class='name_last' > <input type='text' name='input_7.6' id='input_1_7_6' value='' aria-label='Last name' tabindex='5' aria-required="true" aria-invalid="false" placeholder='Last Name'/> <label for='input_1_7_6' >Last</label> </span> </div></li><li id='field_1_3' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_3' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_3' id='input_1_3' type='text' value='' class='large' tabindex='7' placeholder='Email'/> </div></li><li id='field_1_4' class='gfield register-password gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_4' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container ginput_container_password' id='input_1_4_container'> <span id='input_1_4_1_container' class='ginput_left'> <input type='password' name='input_4' id='input_1_4' value='' tabindex='8' placeholder='Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4' >Enter Password</label> </span> <span id='input_1_4_2_container' class='ginput_right'> <input type='password' name='input_4_2' id='input_1_4_2' value='' tabindex='9' placeholder='Confirm Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4_2' >Confirm Password</label> </span> <div class='gf_clear gf_clear_complex'></div> </div></li><li id='field_1_8' class='gfield gform_validation_container field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_8' >Comments</label><div class='ginput_container'><input name='input_8' id='input_1_8' type='text' value='' /></div><div class='gfield_description'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer right_label'> <input type='submit' id='gform_submit_button_1' class='gform_button button' value='SIGN UP' tabindex='10' onclick='if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; jQuery("#gform_1").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=1&amp;title=1&amp;description=1&amp;tabindex=1' /> <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='1' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjdmODFjYTNhMTJmMmM4MWZhZGQ3ZTQ4YWQ2ZGNjMjJhIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_1' id='gform_ajax_frame_1'>This iframe contains the logic required to handle AJAX powered Gravity Forms.</iframe> <script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_1').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_1');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_1').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;if(is_form){jQuery('#gform_wrapper_1').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_1').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_1').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_1').offset().top); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_1').val();gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [1, current_page]);window['gf_submitting_1'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message_1').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_1').replaceWith('<' + 'div id=\'gforms_confirmation_message_1\' class=\'gform_confirmation_message_1 gforms_confirmation_message\'' + '>' + confirmation_content + '<' + '/div' + '>');jQuery(document).scrollTop(jQuery('#gforms_confirmation_message_1').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [1]);window['gf_submitting_1'] = false;}, 50);}else{jQuery('#gform_1').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [1, current_page]);} );} );</script><script type='text/javascript'> if(typeof gf_global == 'undefined') var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2},"base_url":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms\/images\/spinner.gif"};jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 1) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [1, 1]) } ); </script>