Announcement

Collapse
No announcement yet.

How To: Show breadcrumbs also at the bottom of a page.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How To: Show breadcrumbs also at the bottom of a page.

    I like the idea of having the breadcrumbs on the top of the page, but I would also like to have them at the bottom of the page.

    With vB5 it is very simple to do. I love the way hooks work. If you also would like to have breadcrumbs at the bottom of the page, follow these simple steps:
    1. Go to AdminCP -> Style Manager -> Add New Template
    2. Name the Title breadcrumbs_footer
    3. In the Template use the following code:
      Code:
      <vb:if condition="$page['crumbs']">
      	      {vb:set breadcrumbSchema.itemprop, breadcrumb}
      	      <ul id="breadcrumbs" class="h-clearfix" {vb:schema {vb:raw breadcrumbSchema}}>
      	          <li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vb:phrase home}</a></li>
      	          <vb:each from="page.crumbs" value="crumb">
      	              <vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
      	                  {vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
      	              <vb:else />
      	                  {vb:set crumbTitle, {vb:raw crumb.title}}
      	              </vb:if>
      	              <li class="vb-icon separator"></li>
      	              <li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
      	          </vb:each>
      	      </ul>
      	  <vb:else />
      	  </vb:if>
    4. Click Save
    5. Go to Products & Hooks -> Manage Hooks -> Add New Hook
    6. Select for Hook Location footer_start
    7. Give the hook a Title, for example Breadcrumbs Footer
    8. In the field Template Name fill out breadcrumbs_footer
    9. In Hook Arguments put:
      Code:
      page=page
    10. Click Save
    That's it! You will now have your breadcrumbs directly above your Footer!
    Last edited by TimNL; Mon 3rd Mar '14, 12:26am.

  • #2
    It seems to have a bug. It works everywhere, except when you show a topic with more than one page. The hook is loaded, but somehow it thinks that it doesn't meet the 'if condition' and thus doesn't show the breadcrumbs above the footer.

    Strange enough it does work when you disable the hook and paste the code in the 'footer' template directly as from line 4.

    So it works after all, but it is nicer to have it working as a hook. I can't figure out what the difference is, as the hook is loaded directly.

    Does anyone have a clue?

    Comment


    • #3
      Since your have started doing How To's for vB5, just a general suggestion: How about adding a screenshot to every tutorial, so that everyone can see how the results will look like?

      Comment


      • #4
        Not shown in the footer at the crumbs.
        [ATTACH=CONFIG]temp_64550_1413220742153_785[/ATTACH]

        Comment


        • #5
          Forum does not show other places to display
          Attached Files
          Last edited by anwar513; Fri 28th Feb '14, 8:17am.
          [ATTACH=CONFIG]temp_64550_1413220742153_785[/ATTACH]

          Comment


          • #6
            Anwar513, I don't understand what you mean? I see the breadcrumbs at the bottom (but I can't read the text haha).

            Originally posted by TLMD View Post
            Since your have started doing How To's for vB5, just a general suggestion: How about adding a screenshot to every tutorial, so that everyone can see how the results will look like?
            Yes I will do that. I will soon add the pics for them.

            Comment


            • #7
              Go to your hook and in the Hook Arguments, put:
              Code:
              page=page

              Please don't PM or VM me for support - I only help out in the threads.
              vBulletin Manual & vBulletin 4.0 Code Documentation (API)
              Want help modifying your vbulletin forum? Head on over to vbulletin.org
              If I post CSS and you don't know where it goes, throw it into the additional.css template.

              W3Schools &lt;- awesome site for html/css help

              Comment


              • #8
                Thank you to display, I learned a trick
                you see the breadcrumbs at the bottom on it, the text is not important
                [ATTACH=CONFIG]temp_64550_1413220742153_785[/ATTACH]

                Comment


                • #9
                  I'm sorry, today my network instability, repeated Reply
                  Last edited by anwar513; Fri 28th Feb '14, 9:27am.
                  [ATTACH=CONFIG]temp_64550_1413220742153_785[/ATTACH]

                  Comment


                  • #10
                    Originally posted by Lynne View Post
                    Go to your hook and in the Hook Arguments, put:
                    Code:
                    page=page
                    This worked, can you explain why this works?

                    Comment


                    • #11
                      The variable wasn't being passed in that instance (perhaps is wasn't registered for use then?). I don't know the vB5 code well enough to be more specific than that, sorry.

                      Please don't PM or VM me for support - I only help out in the threads.
                      vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                      Want help modifying your vbulletin forum? Head on over to vbulletin.org
                      If I post CSS and you don't know where it goes, throw it into the additional.css template.

                      W3Schools &lt;- awesome site for html/css help

                      Comment


                      • #12
                        Hi Guys.

                        I am running VB 5.1.0 and I tried the above settings (including the page=page trick), but I do not see the bottom bread crumbs when the page does show the top bread crumbs. Hooks globally are enabled in my settings. I've cleared the system cache and logged out/in and back out again to see if it was a user-level cache issue.

                        Any ideas?

                        Thanks,

                        -Kavih

                        Comment


                        • #13
                          How do I centre this or even right-align, please?

                          Comment


                          • #14
                            Originally posted by TwinsForMe View Post
                            How do I centre this or even right-align, please?
                            Through trial and error, I figured out how to put it right-aligned (The red text is what I added):

                            Code:
                            <vb:if condition="$page['crumbs']">
                                      {vb:set breadcrumbSchema.itemprop, breadcrumb}
                                      <ul id="breadcrumbs" class="h-clearfix" {vb:schema {vb:raw breadcrumbSchema}}>
                                        <ul class="nav-list h-right">
                                          <li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vb:phrase home}</a></li>
                                          <vb:each from="page.crumbs" value="crumb">
                                              <vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
                                                  {vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
                                              <vb:else />
                                                  {vb:set crumbTitle, {vb:raw crumb.title}}
                                              </vb:if>
                                              <li class="vb-icon separator"></li>
                                              <li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
                                          </vb:each>
                                        </ul>
                                      </ul>
                                  <vb:else />
                                  </vb:if>

                            Comment


                            • #15
                              anyone know of a way to do this for vb4?

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X