XF 2.2 Customize breadcrumb Location

[justin kane]

I am trying to move the breadcrumbs from the bottom of the page to move them above the "similar threads" container. It seems as though when I move them around within the page container they either move all the way to the top or all the way to the bottom.

My site is here:

MY SITE

as an example, here is a link to a thread:
EXAMPLE THREAD LINK


The request we have had from users is if we can move them up above the similar threads container.
View attachment 297846


I have attempted moving this block in multiple spots in my page_container template:


<xf:macro name="breadcrumbs"
arg-breadcrumbs="{$breadcrumbs}"
arg-navTree="{$navTree}"
arg-selectedNavEntry="{$selectedNavEntry}"
arg-variant="bottom" />



Seemingly, no matter where in the PAGE_CONTAINER I move this block it either adds it underneath the top bread crumbs or above the lower ones. I attempted to add it within the thread_view template as well and was unable to get it to render. Also, even when I inspected element (after rebuilding my XF cache AND clearing my browser cache) it isn't being added to the page at all.

As a note: I am doing all this work on my dev site NOT the production site like the link I provided above

 

[justin kane]

Any thoughts?

 

[Mr Lucky]

Any thoughts?

Impossible to read your post as it’s mostly very light grey text on white background.

 

[justin kane]

Not sure how that could be... Maybe an issue with me posting from the dark theme.... it was legible for me but when I switched to light it was as you described. Here it is copy/pasted:

I am trying to move the breadcrumbs from the bottom of the page to move them above the "similar threads" container. It seems as though when I move them around within the page container they either move all the way to the top or all the way to the bottom.

My site is here:

MY SITE

as an example, here is a link to a thread:
EXAMPLE THREAD LINK


The request we have had from users is if we can move them up above the similar threads container.
View attachment 297846


I have attempted moving this block in multiple spots in my page_container template:


<xf:macro name="breadcrumbs"
arg-breadcrumbs="{$breadcrumbs}"
arg-navTree="{$navTree}"
arg-selectedNavEntry="{$selectedNavEntry}"
arg-variant="bottom" />



Seemingly, no matter where in the PAGE_CONTAINER I move this block it either adds it underneath the top bread crumbs or above the lower ones. I attempted to add it within the thread_view template as well and was unable to get it to render. Also, even when I inspected element (after rebuilding my XF cache AND clearing my browser cache) it isn't being added to the page at all.

As a note: I am doing all this work on my dev site NOT the production site like the link I provided above

 

[Mr Lucky]

Maybe another way to work on it is to relocate the similar threads widget possibly into ad position container Breadcrumb (bottom) below

 

[justin kane]

I will try that out!

 

[justin kane]

When I inspect the page (on my dev instance) I am able to move the Similar threads container below breadcrumbs and get the exact result i am looking for:



Here is the HTML:





My issue now is that I am struggling to find where that widget id 11 (the similar threads widget) is actually called and placed on the page. In page_container i do not see it called specifically and in the thread_view template I also cannot find it. Is there another template that I need to use to modify the location of that container?

 

[stellaethra]

I will suggest a simple solution.

---

Instructions

First, reset all positions of the "Similar Threads" widget. So uncheck all position checkboxes.

Then find this code block in the PAGE_CONTAINER template:

<xf:ad position="container_breadcrumb_bottom_above" />
<xf:macro name="breadcrumbs"
    arg-breadcrumbs="{$breadcrumbs}"
    arg-navTree="{$navTree}"
    arg-selectedNavEntry="{$selectedNavEntry}"
    arg-variant="bottom" />
<xf:ad position="container_breadcrumb_bottom_below" />

Under this code block, add the following code:

<xf:if is="$controller == 'XF:Thread'">
    <xf:widget key="xfes_thread_view_below_quick_reply_similar_threads" />
</xf:if>

Let me know if there are any problems.

 

[justin kane]

Thank you for the suggestion, i followed your steps and i see no change in the position:


Also, you can see the similar thread widget has no position here:

 

[justin kane]

Sorry, I did not explain myself very well... Removing the widget location DID make a change that stopped the similar threads from displaying, but the addition of the widget key in the location you mentioned did not render it. should it be outside that breadcrumb div?

 

[stellaethra]

Sorry, I did not explain myself very well... Removing the widget location DID make a change that stopped the similar threads from displaying, but the addition of the widget key in the location you mentioned did not render it. should it be outside that breadcrumb div?

We reset the position so that the widget doesn't render twice, so it shouldn't appear at first, no problem there.

However, after adding the code, the widget should be displayed because I tested it in local XF and it works without any problem.

 

[justin kane]

I appreciate your help. For some reason this widget is still not being displayed and I do not see any reference to it when I inspect element. Do I also need to reference this widget in the thread_view template or elsewhere to get this to render properly?

 

[stellaethra]

I appreciate your help. For some reason this widget is still not being displayed and I do not see any reference to it when I inspect element. Do I also need to reference this widget in the thread_view template or elsewhere to get this to render properly?

I investigated the situation and I hope this will work for you.

---

Instructions

First, reset the template changes I mentioned earlier.

Then, set the widget position to "Thread view: Below quick reply".

After these, go to the PAGE_CONTAINER template and find the following code block:

<xf:ad position="container_breadcrumb_bottom_above" />
<xf:macro name="breadcrumbs"
    arg-breadcrumbs="{$breadcrumbs}"
    arg-navTree="{$navTree}"
    arg-selectedNavEntry="{$selectedNavEntry}"
    arg-variant="bottom" />
<xf:ad position="container_breadcrumb_bottom_below" />

Completely replace this code block with the following:

<xf:ad position="container_breadcrumb_bottom_above" />
<xf:if is="$controller !== 'XF:Thread'">
    <xf:macro name="breadcrumbs"
        arg-breadcrumbs="{$breadcrumbs}"
        arg-navTree="{$navTree}"
        arg-selectedNavEntry="{$selectedNavEntry}"
        arg-variant="bottom" />
</xf:if>
<xf:ad position="container_breadcrumb_bottom_below" />

Now, in the same template, find this code block:

<div class="p-body-content">
    <xf:ad position="container_content_above" />
    <div class="p-body-pageContent">{$content|raw}</div>
    <xf:ad position="container_content_below" />
</div>

Again, completely replace this code block with the following:

<div class="p-body-content">
    <xf:ad position="container_content_above" />
    <div class="p-body-pageContent">
        {$content|raw}
                   
        <xf:if is="$controller == 'XF:Thread'">
            <xf:macro name="breadcrumbs"
                arg-breadcrumbs="{$breadcrumbs}"
                arg-navTree="{$navTree}"
                arg-selectedNavEntry="{$selectedNavEntry}"
                arg-variant="bottom" />
        </xf:if>
    </div>
    <xf:ad position="container_content_below" />
</div>

Finally, add the following code to the extra.less template:

[data-template='thread_view'],
[data-template='thread_view_type_article'],
[data-template='thread_view_type_poll'],
[data-template='thread_view_type_question'],
[data-template='thread_view_type_suggestion'] {
  .p-body-pageContent {
    display: flex;
    flex-direction: column;

    > * {
      order: 5;
    }

    > [data-widget-key='xfes_thread_view_below_quick_reply_similar_threads'] {
      order: 10;
    }

    .p-breadcrumbs.p-breadcrumbs--bottom {
      margin: 0 0 20px 0;
    }
  }
}

Let me know if there are any problems.

 

[justin kane]

That worked perfectly! Thank you!