How to use Breadcrumbs

By default the breadcrumbs is developed with Schema.org markups for Google Rich snippets and Bootstrap style. No problem if you don't have Bootstrap in your site, this class accepts your personal customization for your purpose or you can put this code in your style css: 
	.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{content:"/\00a0";padding:0 5px;color:#ccc}.breadcrumb>.active{color:#777}
For add ItalyStrap Breadcrumbs put the code below in your theme files (single.php and page.php, optional in archive.php, 404.php or where you want to show it) 
<?php if ( class_exists('ItalyStrapBreadcrumbs') ) {
	
	    new ItalyStrapBreadcrumbs();
	
	} ?>
This will show breadcrumbs like this (if you have Bootstrap css):
  1. Blog info name
  2. Category
  3. Breadcrumbs
If you don't have Bootstrap CSS the breadcrumbs will show as a list (you will have to develop your own style, remember, add separator in CSS style, read this):
  1. Blog info name
  2. Category
  3. Breadcrumbs
This is the HTML code for basic breadcrumbs: 
<ol class="breadcrumb">
  <li><a href="#">Blog info name</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
And this is code with Schema.org markup: 
<ol itemtype="http://schema.org/BreadcrumbList" itemscope="" class="breadcrumb">
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <a title="ItalyStrap" href="http://192.168.1.10/italystrap" itemprop="item">
            <span itemprop="name">Blog info name</span>
            <meta content="ItalyStrap" itemprop="name">
        </a>
        <meta content="1" itemprop="position">
    </li>
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <a title="Senza categoria" href="http://192.168.1.10/italystrap/category/senza-categoria" itemprop="item">
            <span itemprop="name">Senza categoria</span>
        </a>
        <meta content="2" itemprop="position">
    </li>
    <li itemtype="http://schema.org/ListItem" itemscope="" itemprop="itemListElement">
        <span itemprop="name">Breadcrumbs</span>
        <meta content="3" itemprop="position">
    </li>
</ol>
The breadcrumbs class accepts an optional array for your personal customizations with this default parameters: 
$defaults = array(
 'home' => $bloginfo_name,
 'open_wrapper' => '<ol class="breadcrumb"  itemscope itemtype="http://schema.org/BreadcrumbList">',
 'closed_wrapper' => '</ol>',
 'before_element' => '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">',
 'before_element_active'    =>  '<li class="active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">',
 'after_element' => '</li>',
 'wrapper_name' => '<span itemprop="name">',
 'close_wrapper_name' => '</span>'
 );
Example to show Bootstrap Glyphicon instead of Home (If you have it): 
<?php if ( class_exists('ItalyStrapBreadcrumbs') ) {
	
	    $defaults = array(
	        'home'    =>  '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>'
	    );
	
	    new ItalyStrapBreadcrumbs( $defaults );
	
	}?>
It will show breadcrumbs like this:
  1. ­
  2. Category
  3. Breadcrumbs

How Bootstrap Carousel works with Gallery Shortcode

(This functionality is forked from Agnosa Bootstrap Carousel) Add attribute type="carousel" at gallery shortcode, this will show Bootstrap Carousel based on the selected images and their titles and descriptions, otherwise It will show standard WordPress Gallery. For more informations about WordPress Gallery see these links: http://codex.WordPress.org/The_WordPress_Gallery http://codex.WordPress.org/Gallery_Shortcode
This plugin assumes either your theme includes the necessary Bootstrap javascript and CSS files to display the carousel properly, or that you have included those files on your own. It will not include the files for you, so if they are not present, the carousel will not work and you will only obtain its bare HTML.
The Carousel adds Schema.org markup for ImageObject and exifData. If you want show different image size in different device (tablet or phone) you can add sizetablet and/or sizephone attribute to shortcode, see below for more informations.

Example:

[gallery type="carousel" ids="1,2,3,4,5"] You can add a type parameter directly from the Insert Media screen on the gallery tab. You can also select an image size only for standard carousel, for responsive size add it directly in the code, see below or see screenshot n°5 in plugin screenshot page.

Optional attributes:

  • name: any name. String will be sanitize to be used as an HTML ID. Recommended when you want to have more than one carousel in the same page. Default: italystrap-bootstrap-carousel. Example:[gallery type="carousel" ids="61,60,59" name="myCarousel"]
  • indicators: indicators position. Accepted values: before-inner, after-inner, after-control, false (hides indicators). Default: before-inner. Example:[gallery type="carousel" ids="61,60,59" indicators="after-inner"]
  • width: carousel container width, in px or %. Default: not set. Example:[gallery type="carousel" ids="61,60,59" width="800px"]
  • height: carousel item height, in px or %. Default: not set. Example:[gallery type="carousel" ids="61,60,59" height="400px"]
  • titletag: define HTML tag for image title. Default: h4. Example:[gallery type="carousel" ids="61,60,59" titletag="h2"]
  • wpautop: auto-format text. Default: true. Example:[gallery type="carousel" ids="61,60,59" wpautop="false"]
  • title: show or hide image title. Set false to hide. Default: true. Example:[gallery type="carousel" ids="61,60,59" title="false"]
  • text: show or hide image text. Set false to hide. Default: true. Example:[gallery type="carousel" ids="61,60,59" text="false"]
  • containerclass: extra class for carousel container. Default: not set. Example:[gallery type="carousel" ids="61,60,59" containerclass="container"]
  • itemclass: extra class for carousel item. Default: not set. Example:[gallery type="carousel" ids="61,60,59" itemclass="container"]
  • captionclass: extra class for item caption. Default: not set. Example:[gallery type="carousel" ids="61,60,59" captionclass="container"]
  • control: control arrows display. Accepted values: true (to show), false (to hide). Default: true. Example:[gallery type="carousel" ids="61,60,59" control="false"]
  • interval: the amount of time to delay between automatically cycling an item in milliseconds. Example 5000 = 5 seconds. If 0, carousel will not automatically cycle. Default: 0. (In this link yuou find why is set to 0 by default) Example:[gallery type="carousel" ids="61,60,59" interval="2000"]
  • pause: pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. Default: "hover". Example:[gallery type="carousel" ids="61,60,59" interval="hover"]
  • size: size for image attachment. Accepted values: thumbnail, medium, large, full. Default: full or your own custom name added in add_image_size function. See wp_get_attachment_image_src() for further reference. Example:[gallery type="carousel" ids="61,60,59" size="full"]
  • responsive: Activate responsive image. Accepted values: true, false. Default false. It works only if you add sizetablet and sizephone attribute. See below. Example:[gallery type="carousel" ids="61,60,59" responsive="true" size="medium"]
  • sizetablet: Size image for tablet device. Accepted values: thumbnail, medium, large, full or your own custom name added in add_image_size function. Default: large. Example:[gallery type="carousel" ids="61,60,59" responsive="true" size="full" sizetablet="large"]
  • sizephone: Size image for phone device. Accepted values: thumbnail, medium, large, full or your own custom name added in add_image_size function. Default: medium. Example:[gallery type="carousel" ids="61,60,59" responsive="true" size="full" sizephone="medium"]

Native supported attributes:

  • orderby: Alternative order for your images. Example:[gallery type="carousel" ids="61,60,59" orderby="rand"]
  • link: where your image titles will link to. Accepted values: file, none and empty. An empty value will link to your attachment's page. Example:[gallery type="carousel" ids="61,60,59" link="file"]

Lazy Load Documentation

How to activate Lazy Load for images

For activate Lazy Load there is new page "Option" in ItalyStrap panel, in that page there is a checkbox, check on LazyLoad and that the magic begin :-P

How do I change the placeholder image in Lazy Load functionality

add_filter( 'ItalyStrapLazyload_placeholder_image', 'my_custom_lazyload_placeholder_image' );
 function my_custom_lazyload_placeholder_image( $image ) {
 return 'http://url/to/image';
 }

How do I lazy load other images in my theme?

You can use the italystrap_get_apply_lazyload helper function: 
if ( function_exists( 'italystrap_get_apply_lazyload' ) )
    $content = italystrap_get_apply_lazyload( $content );
Or, you can add an attribute called "data-src" with the source of the image URL and set the actual image URL to a transparent 1x1 pixel. You can also use italystrap_apply_lazyload helper function for print content: 
if ( function_exists( 'italystrap_apply_lazyload' ) )
    italystrap_apply_lazyload( $content );
Otherwise you can also use output buffering, though this isn't recommended: 
if ( function_exists( 'italystrap_get_apply_lazyload' ) )
 ob_start( 'italystrap_get_apply_lazyload' );
This will lazy load all your images.

This plugin is using JavaScript. What about visitors without JS?

No worries. They get the original element in a noscript element. No Lazy Loading for them, though.

I'm using a CDN. Will this plugin interfere?

Lazy loading works just fine. The images will still load from your CDN. If you have any problem please open a ticket :-)

How can I verify that the plugin is working?

Check your HTML source or see the magic at work in Web Inspector, FireBug or similar.

I'm using my custom Bootstrap Carousel, why doesn't the second image appear?

Put the code below in your file js and type your Bootstrap Carousell ID in place of "#YOURCAROUSELID" 
var cHeight = 0;$("#YOURCAROUSELID").on("slide.bs.carousel", function(){var $nextImage = $(".active.item", this).next(".item").find("img");var src = $nextImage.data("src");if (typeof src !== "undefined" && src !== ""){$nextImage.attr("src", src);$nextImage.data("src", "");}});

I'm using an external carousel, will Lazy Load work with it?

I tried only with ItalyStrap Bootstrap Carousel, please send me a feedback if have any issue with other carousel, however I can't guarantee to solve the issue.

ItalyStrap vCard Local Business documentation

How can I use Local Business widget

Simply activate functionality from ItalyStrap option page, add ItalyStrap vCard Local Business in your widgetozed area and then fill in the fields input of ItalyStrap vCard Local Business

Available Local Business Types for now (list from schema.org):

  • AccountingService
  • AutoDealer
  • AutoRental
  • AutoRepair
  • AutoWash
  • Attorney
  • Bakery
  • BarOrPub
  • ChildCare
  • ClothingStore
  • Dentist
  • ElectronicsStore
  • EmergencyService
  • EntertainmentBusiness
  • EventVenue
  • ExerciseGym
  • FinancialService
  • FurnitureStore
  • GardenStore
  • GeneralContractor
  • GolfCourse
  • HardwareStore
  • HealthAndBeautyBusiness
  • HomeAndConstructionBusiness
  • HobbyShop
  • HomeGoodsStore
  • Hotel
  • HVACBusiness
  • InsuranceAgency
  • LodgingBusiness
  • MedicalClinic
  • MensClothingStore
  • MotorcycleDealer
  • MovingCompany
  • PetStore
  • Physician
  • ProfessionalService
  • RealEstateAgent
  • Residence
  • Restaurant
  • School
  • SportingGoodsStore
  • Store
  • TattooParlor
  • TravelAgency
  • VeterinaryCare

Available Fields:

  • Business Name
  • Logo URL
  • Street Address
  • Zipcode/Postal Code
  • City/Locality
  • State/Region
  • Country
  • Telephone number
  • Mobile number
  • Fax number
  • Email
  • TaxID
  • Facebook page (hidden)
  • Twitter page (hidden)
  • Googleplus page (hidden)
  • Pinterest page (hidden)
  • Instagram page (hidden)
  • Youtube page (hidden)
  • Linkedin page (hidden)