I created a custom view in Sonata Admin following recipe from official doc (here).
Everything is working good, but breadcrumb is empty (the same in last screenshot of recipe).
I googled a lot without success... Isn't it possible to display breadcrumbs with custom views in Sonata Admin?
I achieved this by extending sonata_breadcrumb block:
{% block sonata_breadcrumb %}
<div class="hidden-xs">
<ol class="nav navbar-top-links breadcrumb">
<li>
<a href="/admin">
<i class="fa fa-home"></i>
</a>
</li>
<li class="active">
<span>My Custom View</span>
</li>
</ol>
</div>
{% endblock sonata_breadcrumb %}
Can someone confirm it's the right way to do it?
Another option to show a custom breadcrumb is to define a block for it, like this:
{% extends '#SonataAdmin/standard_layout.html.twig' %}
{% block breadcrumb %}
<li>
<a href="/admin/dashboard">
<i class="fa fa-home"></i>
</a>
</li>
<li class="active">
<span>My Profile</span>
</li>
{% endblock %}
{#
More HTML/Twig code
#}
Related
I set up a project for test purpose, it works. But in another project, the above code doesn't work. The content of the turbo-stream appears in raw html and replaces the whole site.
//_parts/_dashboard_user_ranking.stream.html.twig
<turbo-stream action="update" target="the_frame_id" >
<template>
{{ include ("_parts/_dashboard_user_ranking.html.twig") }}
</template>
</turbo-stream>
//index.html.twig
{% block body %}
{{ parent()}}
<main class="container row overflow-auto">
<div class="col-md-10 mx-auto">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard_rankings',{period:'5jours'}) }}">5 jours</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'3mois'}) }}">3 mois</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an'}) }}">1 an</a>
</li>
{% for group in groups %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an', groupID:group.id}) }}">{{ group.groupName }}</a>
</li>
{% endfor %}
</ul>
<turbo-frame id="the_frame_id"></turbo-frame>
</div>
</main>
{{ include ("footer.html.twig") }}
{% endblock %}
And finally the controller :
// classements seuls
#[Route('/classements-{period}-{groupID}', name: 'app_dashboard_rankings')]
public function classements(
Request $request,
FollowPointsRepository $followPointsRepository,
string $period = '5jours',
int $groupID = 0
): Response
{
// ...
// ...
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
return $this->render('_parts/_dashboard_user_ranking.stream.html.twig',[
'isUserInTop'=>$isUserInTop,
'classement'=>$classement
]);
}
As for the config, it is the same as in the test purpose project.
How to make a drop-down menu in Timber WordPress, the following is my code but is not showing as drop-down, also I am inserting an image how it looks now, the menu is horizontal menu
enter image description here
<nav class="collapse navbar-collapse order-lg-2" id="mainNavigation">
<ul class="navbar-nav ms-auto">
{% for item in topmenu.items %}
<li class="nav-item">
<a class="nav-link {{ item.classes|join(' ') }} mx-2" href="{{ item.link }}">{{ item.title }}</a>
{% if item.children %}
<ul class="nav-drop">
{% for child in item.children %}
<li class="nav-drop-item">
{{ child.title }}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
use menu.twig file with the following code:
{% if menu %}
<ul>
{% for item in items %}
<li class="{{ item.classes | join(' ')}}">
<a target="{{ item.target}}" href="{{ item.link}}">{{ item.title}}</a>
{% include "menu.twig" with{'items':item.children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and then inside the base.twig or inside the other file where you want to display the menu add the following code:
{% include "menu.twig" with{'items':menu.get_items} %}
How do I align this menu properly? I have tried using inline-block for the li tag but that didn't align this.
Here's the current code, please help with ideas
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %}">Active Listings</a>
</li>
<li class="nav-item">
Category
</li>
<li class="nav-item">
Sell
</li>
</ul>
<ul class="navbar-nav ml-auto">
<div>
{% if user.is_authenticated %}
welcome, <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</nav>
Try to add display flex and align items center. this will 100% solve your problem
ul {
display: flex;
align-items: center;
}
Are there any tutorials or templates created with wordpress+timber+bootstrap?
I'm having problem with the menu...
menu-head.twig:
<nav class="navbar navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{% include "menu.twig" with {'menu': menu.get_items} %}
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
menu.twig:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and the unfortunate result is this one:
I don't know how to implement it with the child menus being shown as dropdown menus... please help...
EDIT: I will be moving to foundation... :)
#manson-mamaril you're just missing a small bit in menu.twig. Instead of {% for item in menu %} it should be {% for item in menu.get_items %}:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#}
{% for item in menu.get_items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}}
{% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
I came across a blog post from about a year ago while searching for WP-Timber-Foundtion 6 info.
http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html
Something like this should work
<div class="collapse navbar-collapse" id="navbarmain">
<ul class="nav navbar-nav main-menu">
{% for item in menu.get_items %}
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
{% if item.get_children %}
<ul class="dropdown-menu" role="menu">
{% for child in item.get_children %}
<li>{{child.title}}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
In your menu-head.twig, replace {% include "menu.twig" with {'menu': menu.get_items} %} by {% include "menu.twig" with {'menu': menu} %}
Then, in your menu.twig
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu.items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
You should iterate trough menu.items which is an array containing all your menu items.
By the way, make sure, you pass your menu to the context :
$context['menu'] = new \Timber\Menu(ID);
Finally, if you easily want to see what happens in you menu object, you can display this object with menu|print_r
I have a bootstrap menu whith a dropdown. It used to work but something happened. I click on it and nothing happens.
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post
</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a>
</li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
At the bottom:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{{ 'assets/js/bootstrap.min.js'|theme }}"></script>
Update: Checked with the original example but still not working so the problem is somewhere in the js part. But the JS is there.
u missed a </ul> after {% endif %}
see http://jsfiddle.net/26vpc9o3/1/
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a></li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
Solved. The bootstrap js was included twice. I didnt noticed it because the bootstrap wasnt in its name.