I have published various recipes on a website wrapping my elemnts with hRecipe schema. I can get all of my schema elments to work except for the name / fn to work? i am unsure why this is as i have stated within my code where the name is.
As you can see i have written:
<article class="twelve columns hrecipe" itemscope="" itemtype="http://schema.org/Recipe">
<h1 itemprop="name">Crispy Sussex fish goujons</h1>
Which should mean that it would fine the name. also you can see in googles structured data testing tool, and it still cannot find it?
http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Flocalfoodbritain.com%2Frecipes%2Fcrispy-sussex-fish-goujons%2F
Also i wonder if anyone can advise me as to why the image is not displaying in the preview?
Here is the live web page / code does anyone have any ideas?
http://localfoodbritain.com/recipes/crispy-sussex-fish-goujons/
<article class="twelve columns hrecipe" itemscope="" itemtype="http://schema.org/Recipe">
<h1 itemprop="name">Crispy Sussex fish goujons</h1>
<p>Our recipe uses the freshest fish; locally-caught Sussex pollock brought into <a title="Veasey and Sons" href="/sussex/shops/fishmongers/veasey-and-sons/">Veasey and Sons fishmongers</a> by their boat that fishes between Eastbourne and Poole Bay. To serve, why not try a dollop of Sussex Gold Award winning Sussex Valley Classic Mayonnaise from <a title="The Condiment Company" href="/sussex/food/condiments/the-condiment-company/">The Condiment Company of Chichester</a>?</p><div id="recipe" class="sollos_recipe">
<div class="row">
<div class="recipe-main"><img itemprop="image" src="http://localfoodbritain.com/files/9713/9816/6500/Fish_goujons_small.jpg" width="550" height="416" alt="Crispy Sussex fish goujons"><p class="intro" itemprop="description">Freshly made fish goujons dipped in creamy mayonnaise make a tasty change from sandwiches for picnics. You could nip to the shops and buy them, but there really is nothing like making your own. It guarantees beautifully succulent fish and the crispiest batter.</p>
<hr>
<br>
<h3 class="sollos_recipe_secion-header">Ingredients</h3>
<ul class="ingredients sollos_recipe_ingredients" itemprop="ingredients">
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">450</span>
<span class="type">g</span> </span>
<span class="name">firm white fish fillet, skinned and boned </span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">Juice</span>
<span class="type">of</span> </span>
<span class="name">1 large lemon</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">3</span>
<span class="type">tbsp</span> </span>
<span class="name">plain flour</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">1</span>
<span class="type">dessertspoon</span> </span>
<span class="name">chopped fresh parsley</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">1</span>
</span>
<span class="name">large free-range egg</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">80</span>
<span class="type">g</span> </span>
<span class="name">fresh white breadcrumbs</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">Pinch</span>
</span>
<span class="name">salt and freshly ground black pepper</span>
</li>
<li class="ingredient sollos_recipe_ingredient"><i class="fa fa-square-o"></i>
<span class="amount">
<span class="value">25</span>
<span class="type">g</span> </span>
<span class="name">melted butter</span>
</li>
</ul>
<hr>
<br>
<h3 class="sollos_recipe_secion-header">Preparation</h3>
<ol class="instructions sollos_recipe_instructions" itemprop="recipeInstructions">
<li class="instruction sollos_recipe_instruction">Slice the fish fillets into strips, fairly thick and about 2cm wide then put them in a shallow dish with the lemon juice. Pop in the fridge and leave for at least half an hour.</li>
<li class="instruction sollos_recipe_instruction">When you’re ready to make the goujons, preheat the oven to 220°C (gas 7).</li>
<li class="instruction sollos_recipe_instruction">Put the flour in a shallow bowl and season with salt and pepper.</li>
<li class="instruction sollos_recipe_instruction">Place the egg in another bowl and beat it lightly.</li>
<li class="instruction sollos_recipe_instruction">Mix the parsley with the breadcrumbs and spread onto a plate.</li>
<li class="instruction sollos_recipe_instruction">Gently roll the fish in the seasoned flour mixture. Next, dip each piece in the beaten egg and then into the breadcrumbs until it is nicely coated. Place the goujons on a lightly oiled, non-stick, baking tray. </li>
<li class="instruction sollos_recipe_instruction">Pop in the oven for 10 minutes, turning halfway through cooking. Brush with the melted butter and return to the oven until golden, which will take about another 5 minutes.</li>
<li class="instruction sollos_recipe_instruction">Cool and then carefully pack into a sealed container ready for your picnic!</li>
</ol>
</div>
<div class="recipe-side">
<div class="retailer-block">
<h4>Serves <span class="yield">4-6</span></h4> <hr>
<h4><span class="prepTime"><meta itemprop="prepTime" content="PT45M">
<span class="value-title" title="PT45M"></span>
</span>
45 minutes.
</h4>
<p><small>Preparation time</small></p>
<hr>
<h4><span class="cookTime"><meta itemprop="cookTime" content="PT15M">
<span class="value-title" title="PT15M"></span>
</span>
15 minutes.
</h4>
<p><small>Cooking time</small></p>
<hr>
<h4><span itemprop="recipeCuisine">British</span></h4>
<p><small>Cuisine</small></p> <hr>
<h4><span itemprop="recipeCategory">Main Course</span></h4>
<p><small>Type of dish</small></p>
</div>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&pubid=xa-515e95777e2ce970">
<div class="btn btn-medium btn-full-width btn-category align-center"><i class="fa fa-share"></i> Share</div>
</a>
<p class="mb-none"><small>Recipe Contributed by</small></p>
<h5><span class="author" itemprop="author">Tracy Carroll</span></h5>
<p class="sollos_recipe_publish-date">Published
<span class="published" itemprop="datePublished" content="2014-04-23T10:22:29-01:00">
<span class="value-title" title="2014-04-23T10:22:29-01:00"> </span>2014-04-23T10:22:29-01:00</span></p>
<div class="tags"><hr><h5>Tags</h5>Fish</div></div></div></div> </article><!doctype html>
You are using Microformats (making use of the hRecipe Microformat) and Microdata (making use of the schema.org vocabulary, especially its Recipe type) (as well as RDFa making use of the Open Graph vocabulary, but this is unrelated to your recipes).
On the article element, you are specifying both:
class="hrecipe" (= Microformat)
itemscope itemtype="http://schema.org/Recipe" (= Microdata)
But on the h1, you add the name only for one:
itemprop="name" (= Microdata)
So if you want to add this name in Microformats, too, you’d have to add the fn class to the h1:
<h1 itemprop="name" class="fn">Crispy Sussex fish goujons</h1>
In the Google Structured Data Testing Tool, the parsed Microformat is in the box titled "hrecipe", the parsed RDFa is in the box titled "rdfa-node", and the parsed Microdata is in the boxes titled "Item".
Related
In Prestashop for English website, I need to show the Arabic Language selector and on the Arabic website I need to show English as a Language selector.
currently, it showing the current website language on the language selector bar. is there is a way to do this?
<div class="language-selector dropdown js-dropdown">
<span class="expand-more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="language-dropdown">
<span><img class="lang-flag" src="{$urls.img_lang_url}{$current_language.id_lang}.jpg"/></span>
<span class="language-title">{$current_language.name_simple}</span>
<span class="dropdown-arrow"></span>
</span>
<ul class="dropdown-menu" aria-labelledby="language-dropdown">
{foreach from=$languages item=language}
<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>
<img class="lang-flag" src="{$urls.img_lang_url}{$language.id_lang}.jpg"/> {$language.name_simple}
</li>
{/foreach}
</ul>
</div>
Try this:
<div class="language-selector dropdown js-dropdown">
<span class="expand-more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="language-dropdown">
<span><img class="lang-flag" src="{$urls.img_lang_url}{$current_language.id_lang}.jpg"/></span>
<span class="language-title">{$current_language.name_simple}</span>
<span class="dropdown-arrow"></span>
</span>
<ul class="dropdown-menu" aria-labelledby="language-dropdown">
{foreach from=$languages item=language}
{if $language.id_lang != $current_language.id_lang}
<li>
<img class="lang-flag" src="{$urls.img_lang_url}{$language.id_lang}.jpg"/> {$language.name_simple}
</li>
{/if}
{/foreach}
</ul>
</div>
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>
Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/
I have searched high and low for the answer but to no avail. I have a sandbox website www.bluestackbrewing.com
When you resize it to mobile, the first two lists in the menu item are showing. Does anyone know how to fix this? Thank you for any response.
<div class="row nav-menu">
<div class="col-sm-3 col-md-2 columns">
</div>
<div class="col-sm-9 col-md-10 columns">
<ul class="menu navbar-collapse">
<li>Home
</li>
<li class="has-dropdown">Pronorm German Kitchens
<ul class="subnav">
<li>Y-LINE</li>
<li>X-LINE</li>
<li>PROLINE</li>
<li>CLASSICLINE</li>
</ul>
</li>
<li>BESPOKE KITCHENS
</li>
<li>STORAGE SOLUTIONS & ACCESSORIES
</li>
<li>Contact
</li>
</ul>
<ul class="social-icons text-right">
<li>
<a href="#">
<i class="icon social_twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_instagram"></i>
</a>
</li>
</ul>
</div>
I am having problems with links in navbar's using Bootcamp in XPages. I have an Internet Site document for develop.test.com. The Home URL on the page is Web/develop.nsf. I have the launch option of the DB set to the xPage xpHomePage.xsp. When I go to develop.test.com my Bootstrap site with menu displays perfectly. My problem is that the links in the navbar are inconsistent. Sometimes I have the DB name included, sometimes not?
The link Abmelden (near the bottom of the code) converts to http://develop.test.com/web/develop.nsf?logout which would be correct. The dropdown "Anwesenheiten/offen nach Name converts to http://develop.test.com/Web/xpAnwesendOffenNachName ==> somehow the develop.nsf is missing? I just cannot work out why.
I could of course just hardcode the NSF into the link - just doesn't seem right to me :o)
Thanking you for any help given.
=========== here is the code
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div id="header" disableTheme="true">
<!-- This is the banner -->
<nav class="navbar-header navbar-inverse navbar-fixed-top" role="navigation" id="header">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="xpHomePage.xsp">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:#DbTitle()}]]></xp:this.value>
</xp:text>
</a>
<!-- this is the hamburger menu that gets shown when the view is small enough -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation umstellen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- create a div so the header is collapsed when tiny -->
<div class="collapse navbar-collapse" id="header-menu">
<!-- and now the actual menu -->
<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Anwesenheiten
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
offen nach Name
</li>
<li>
offen nach Standort
</li>
<li role="separator" class="divider"></li>
<li>
freigegeben nach Name
</li>
<li>
freigegeben nach Standort
</li>
<li>
freigegeben nach Monat
</li>
</ul>
</li>
<li>
<a href="?logout">
<span class="glyphicon glyphicon-log-out"></span>
<xp:text>
<xp:this.value><![CDATA[#{javascript:" Abmelden"}]]></xp:this.value>
</xp:text>
</a>
</li>
</ul>
</div>
</div>
</nav>
</xp:div>
</xp:view>
Try computing the whole href. It may be doing different things on different pages within the application, depending on context.