alou.gr αρχική σελίδα
alou's portfolio
web marketing
Υπηρεσίες σχεδιασμού και κατασκευής ιστοσελίδων
Επικοινωνία Ανδρέας Λουκάκης
HTML5 breadcrumbs module for Joomla!
Τετάρτη, 18 Μαίου 2011 11:17

I'm just starting to get my suitcases ready for the HTML5 train and one of the many things on my 'todo' list was to see how I can produce some decent HTML5 markup for Joomla! breadcrumbs.

Since there is (and will be for a long time it seems) a lot of discussion on how should breadcrumb markup be implemented in HTML5, i played safe and went with Google recommendation (not great markup but seems to serve microdata purposes well) for the extra benefit of displaying site hierarchy in SERPs.

So, the produced markup goes like this:

 <nav id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.page.com" class="pathway" itemprop="url">
<span itemprop="title">Home</span></a>
(separator)
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/first-level.html" class="pathway" itemprop="url">
<span itemprop="title">First Level</span></a>
(separator)
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">secont-level
</div>
</div>
</div>
</nav>

Note that all divs are nested and second+ level gets an itemprop="child".

CSS wise, you'll probably need to do this so that the divs stay inline:

#breadcrumb div {display:inline;}

 

Let me know what you think.

download html5 breadcrumbs for Joomla

 

Σχόλια  

 
#1 2012-03-17 18:35
Hi there,

Great plugin with only one issue - it doesn't inline in IE (in all other browsers do) even if the native breadcrumbs module looks just fine. Could you help with the issue?
Quote
 
 
#2 2012-03-20 07:39
Hi Lucker, IE6 & 7 are not dealing very well with this statement for block elements that;s true, you could try floating the divs:
#breadcrumb div {float:left}

There is a good chance this will mess your template so you might have to clear the float after the module loads, if you need some more help with that let me know.
The general idea is to have an element - after the floating one - which clears the float, ie:

< div blah blah your floated breadcrumbs here...< / div >
< div class = " clearfix " > < / div >

and css says:
.clearfix {clear:both;}

and maybe a few other things to work better.
Dont copy from here, as i put extra spaces.
Quote
 
 
#3 2012-03-27 14:19
Thank you for suggestion, but it doesn't help. After adding #breadcrumb div {float:left} to stylesheet the last breadcrumb (current article title) appears befor breadcrumbs path (Home>Menu1>Menu1.1>) in firefox and others, but in IE it looks the same way: one over another.
By the way, it didn't mess up my theme either
Quote
 
 
#4 2012-03-28 07:42
Hi Andreas,
I forget to ask: if there any chance to "modify" current native joomla breadcrumbs plugin to have HTML5 functionality? I really like what you create, but, unfortunately I have just a little bit skills to make it work with IE. Otherwise, if use standard breadcrumbs plugin and add to it some code to markup trail, it would be really useful.
I'm not sure if it's possible, but from my point of view this is the best way to make it work quickly.
What would you say?
Quote
 
 
#5 2012-03-31 10:00
Andreas, I guess I find the root of the issue, but have no skill in php to solve it.
If wrap the lines
echo 'link.'" class="breadcrumbs pathway" itemprop="url">'.$list[$i]->name.'';
echo ' '.$separator.' ';
in div with, for example echo ''; and add to css #breadcrumb-inside div {display:inline -block;} it displays in all browsers including IE just fine. But in this case no markup is shoun in rich snippet testing tool.
Could you advise how to implement additional div to the home link and keep breadcrumbs recognizable in google?
Quote
 
 
#6 2012-03-31 13:29
Andreas, I'm sorry for the low rating review and for the nonsense I wrote above. It's silly of me, I didn't noticed, that I should simply change suggested div.breadcrumb (as in your module) to rt breadcrumbs (as in my theme). I'm not a savvy in css, so it took me so long to understand such simple thing. You wonderful plugin working just fine with {display:inline ;} in IE8. I'd also like to rewrite my review and marked "5 stars", but it's impossible, as I know.
Quote
 
 
#7 2012-05-11 09:21
How do I make it float left? I get multiple lines when I add this module. Tell me which files to edit please
Quote
 
 
#8 2012-05-11 10:21
Hi Sam, you need to edit your template's CSS (usually site-root/templates/your-template/css/template.css) and add this:

#breadcrumb div { display:inline; }

will most likely do the job. If not, i'll need a link of your site to check your html.
Quote
 
 
#9 2013-02-28 06:10
Just replace div to span.
Quote
 
 
#10 2013-11-24 13:26
I used #breadcrumb div { display:inline-block; } which works for all browsers but IE8. Any idea how to make it work. If I drop "block" at the end it breaks the bbreadcrumb in all browsers.
Quote
 

Το σχόλιό σας

Μπορείτε να χρησιμοποιήσετε gravatar.


Security code
Ανανέωση

Joomla Extensions

Custom HTML button

download

Τελευταία σχόλια

 

The eternal fight between...