Forum
Anchor navigation with a long scrolling page created with content blocks
I have a long scrolling web page made up of content blocks. I want an anchor navigation but I want the client to be able to add new blocks which automatically adds a new anchor link to the nav.
Blocks:
<perch:blocks>
<perch:block type="txt" label="Text only" icon="circle-add">
<perch:template path="content/assist_content_blocks/text.html" />
</perch:block>
<perch:block type="img" label="Full width image" icon="circle-add">
<perch:template path="content/assist_content_blocks/full_image.html" />
</perch:block>
<perch:block type="imgtxt" label="Image & text" icon="circle-add">
<perch:template path="content/assist_content_blocks/image_and_text.html" />
</perch:block>
<perch:block type="faqs" label="FAQ section" icon="circle-add">
<perch:template path="content/assist_content_blocks/faqs.html" />
</perch:block>
</perch:blocks>
All of the above block templates include a <perch:content type="text" label=“Title” id="title" title> tag and a <perch:content id="slug" type="slug" for="title"> which sets up what the anchor will jump to.
Template example:
<div class="alt-rows" id="<perch:content id="slug" type="slug" for="title">">
<div class="container">
<div class="row justify-content-center">
<div class="col-10 text-center">
<h2 class="title"><perch:content type="text" label=“Title” id="title" title></h2>
<perch:content type="textarea" label="Description" id="desc" html="true" editor="ckeditor">
</div>
</div>
</div>
</div>
I now what to make a navigation out of those tags by using perch_content_custom so this at the on top of the page:
<?php
perch_content_custom('Content Blocks', array(
'page' => '/index.php',
'template'=>'/content_blocks/nav.html'
));
?>
And this is the template I’ve set up to output the anchor link:
<a href="#<perch:content id="slug" type="slug" for="title">"><perch:content type="text" id="title" title></a>
The above is output to the page but it’s empty, no slug or title i.e. <a href="#"></a>. Can you see where I’m going wrong?
Hello Emily,
Since the content was created inside blocks, the links need to be outputted with blocks too:
Thanks Hussein, I've added that to my nav.html template and it's now outputting the list but any idea what it's outputting the links twice?
Is it outputting the whole list twice? Or is each link outputted twice?
Or:
It's outputting the whole list twice. Like your first example.
Umm, check your PHP code and make sure you're not calling
perch_content_custom()twice to output the links.There is only one instance of the perch_content_custom() code. Is there any other reason this could happen?
So if you remove this instance, you get no links at all? Just to confirm you haven't missed another instance somewhere like a
perch_layout().Can you turn on debug and share the debug message for that page?
Yep, I've removed it and the whole lot disappears. Debug is below:
I don't see anything of concern in the debug. What does your template
content_blocks/navlook like?Not sure what else to suggest. Perhaps someone else can help!
The only thing you haven't shared so far is your full PHP page code.
My page code is very straight forward, I can't see anything in it that would cause this to happen. The code I've shared is basically it really. I might try stripping it down and see what happens.
In the meantime if anyone else does want to weight in that would be great. I'm away until Monday now so I'll pick it back up then and see if anything has changed.
Thanks for your help Hussein, it's a weird one!
I've looked over this several times and I still can't figure out what is causing the list to appear twice. Could it be a bug?
Can you show us the entire code for the page?
Yes I can. The nav is inside a javascript slide out panel, as you can see it's a really simple page.
Content blocks template:
Example content block template:
My perch_content_custom content_nav.html template:
You're displaying the region
Content Blockstwice. Once withperch_content_custom()and once withperch_content()But that's the whole point Drew, I want to display some of the content from the blocks in a 'nav' at the top of the page. The content forms links that then smooth scroll to that block on the page.
I've now taken the content which I want to populate the 'nav' outside of the blocks tags and used 'Allow multiple items' so each block is now a region item and it's working but the user can still chose the type of content they want to display in that region item (i.e. my blocks). If that makes sense, it's difficult to describe. So my blocks template now looks like this:
Example block template:
nav template is now simply:
That's the only way I've made it work which is fine but not quite a neat as just using the blocks.