How can I add another button/dropdown to the navbar in sonata admin listing template for my MapAdmin class?
I just want this button in one admin class.
You have to override the default template (layout: 'SonataAdminBundle::standard_layout.html.twig') with your own in coding your logique here
Here is an extract of existing code :
{% block sonata_admin_content_actions_wrappers %}
{% if _actions|replace({ '<li>': '', '</li>': '' })|trim is not empty %}
<ul class="nav navbar-nav navbar-right">
{% if _actions|split('</a>')|length > 2 %}
<li class="dropdown sonata-actions">
{{ 'link_actions'|trans({}, 'SonataAdminBundle') }} <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
{{ _actions|raw }}
</ul>
</li>
{% else %}
{{ _actions|raw }}
{% endif %}
</ul>
{% endif %}
{% endblock sonata_admin_content_actions_wrappers %}
It requires adding a custom action and overriding a certain template. You can follow the documentation on symfony.com.
Read up to the following code block:
{# src/AppBundle/Resources/views/CRUD/list__action_clone.html.twig #}
<a class="btn btn-sm" href="{{ admin.generateObjectUrl('clone', object)}}">clone</a>
I have just come across with the same problem. I am using Symfony 3.4.6 and Sonata Admin Bundle 3.9.1.These are the steps I've followed:
1. Find the standard template which lives in:/vendor/sonata-project/admin-bundle/src/Resources/views/standard_layout.html.twig.
2. Go to /app/config/config.yml and under the key sonata_admin, you just override that template as shown below
sonata_admin:
templates:
# Layout
layout: '#MyBundle/Admin/Default/Layout/standard_layout.html.twig'
3. Within your newly created template (standard_layout.html.twig) make sure you have extended the sonata standard template file like so : {% extends '#SonataAdmin/standard_layout.html.twig' %}. Now, all you need to do is override any block you want from the original sonata template file as I described in point 1, in my case I've just overridden the block tab_menu_navbar_header and Added my custom button like so:
{% block tab_menu_navbar_header %}
{% if _navbar_title is not empty %}
<div class="navbar-header">
<a class="navbar-brand" href="#">{{ _navbar_title|raw }}</a>
{% if object.state is defined and object.state is not null and object.state is same as('finished') %}
<button type="button" class="btn btn-info" style="margin-top: 10px;">
<i class="fa fa-check-square" aria-hidden="true"> History</i>
</button>
{% endif %}
</div>
{% endif %}
{% endblock %}
Related
So, what I am using it for is to render a template that I have.
Here is the code it has a problem with.
`
#views.route('/')
def home():
return render_template("home.html")
`
By the way this is the code in home.html
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content
%}
<h1 align="center">Notes</h1>
<ul class="list-group list-group-flush" id="notes">
{% for note in user.notes %}
<li class="list-group-item">
{{ note.data }}
<button type="button" class="close" onClick="deleteNote({note,id })"
<span aria-hidden="true">×</span>
</button>
</li>
{% endfor %}
</ul>
<form method="POST">
<textarea name="note" id="note" class="form-control"></textarea>
<br />
<div align="center">
<button type="submit" class="btn btn-primary">Add Note</button>
</div>
</form>
{% endblock %}
I run it. It gives me a link to website. Everything there, No. I run it. It gives me a link to website. And then jinja2.exceptions.UndefinedError: 'user' is undefined is on my website
Check your html file, you may accidently got a variable called user in there
I'm having some difficulties on building a simple menu navigation bar. I need to make a highlight on current menu tab which the user is browsing on. So I'm working with Django and Jinja2, and here's my code:
page1.html
{% extends "base.html" %}
{% set active_page = "menu1" %}
{% block title %}Apie mus{% endblock %}
{% block content %}
{{page}} - Current Page set from django return
...
My base.html:
...
<ul class="navbar-nav ml-auto">
<li class="nav-item {{ 'active' if active_page == 'menu1' else '' }}">
<a class="nav-link" href="{% url 'apie_mus' %}">Apie mus </a>
</li>
</ul>
How can I fix the issue?
if you want to do things in proper way and set active css class for the current active page, here how you can do
in templates/includes/header.html:
..
<ul class="navbar-nav mr-auto">
<li class="nav-item{% if request.path == '/' %} active{% endif %}"><a class="nav-link" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item{% if request.path == '/about' %} active{% endif %}"><a class="nav-link" href="{{ url_for('about') }}">About</a></li>
</ul>
..
and then in templates/base.html:
..
<body>
{% include 'includes/header.html' %}
{% block content %}{% endblock %}
{% include 'includes/footer.html' %}
..
and you don't need {% set .. %}
refer to this topic templates assignments for more details
I am using github to host a static site and Jekyll to generate it.
I have a menu bar (as <ul>) and would like the <li> corresponding to the current page to be assigned a different class for CSS highlighting.
So something like pseudo code:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
Or perhaps even generate the whole <ul> in Jekyll.
How can this be done with minimal changes outside of the offending <ul>?
Yes you can do this.
To accomplish this we will take advantage of the fact that the current page is always represented by the liquid variable: page in the template, and also that each post/page has a unique identifier in its page.url attribute.
This means that we just have to use a loop to build our navigation page, and by doing so we can check page.url against every member of the loop. If it finds a match, it knows to highlight that element. Here we go:
{% for node in site.pages %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endfor %}
This works as expected. However you probably don't want all your page's in your nav bar. In order to emulate page "grouping" you can something like this:
## Put the following code in a file in the _includes folder at: ./_includes/pages_list
{% for node in pages_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active">{{node.title}}</li>
{% else %}
<li>{{node.title}}</li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
Now pages can be "grouped". To give a page a group you need to specify it in the pages YAML Front Matter:
---
title: blah
categories: blah
group: "navigation"
---
Finally you can use your new code!
Wherever you need your navigation to go in your template, simply "call" your include file and pass it some pages and the group you want to display:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
Examples
This functionality is part of the Jekyll-Bootstrap framework.
You can see exact documentation for the code outlined here: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Finally you can see it in action within the website itself. Just look at the righthand navigation and you will see the current page is highlighted in green: Example highlighted nav link
I feel like for the simplest navigation requirement, the listed solutions are overly complex. Here's a solution that involves no front matter, javascript, loops, etc.
Since we have access to the page URL, we can normalize and split the URL and test against the segments, like so:
{% assign current = page.url | downcase | split: '/' %}
<nav>
<ul>
<li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
<li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
<li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
</ul>
</nav>
Of course, this is only useful if static segments provide the means to delineate the navigation. Anything more complicated, and you'll have to use front matter like #RobertKenny demonstrated.
Here's my solution which I think is the best way to highlight the current page:
Define a navigation list on your _config.yml like this:
navigation:
- title: blog
url: /blog/
- title: about
url: /about/
- title: projects
url: /projects/
Then in your _includes/header.html file you must loop through the list to check if the current page (page.url) resembles any item of the navigation list, if so then you just set the active class and add it to the <a> tag:
<nav>
{% for item in site.navigation %}
{% assign class = nil %}
{% if page.url contains item.url %}
{% assign class = 'active' %}
{% endif %}
<a href="{{ item.url }}" class="{{ class }}">
{{ item.title }}
</a>
{% endfor %}
</nav>
And because you're using the contains operator instead of the equals = operator, you don't have to write extra code to make it work with URLs such as '/blog/post-name/' or 'projects/project-name/'. So it works really well.
P.S: Don't forget to set the permalink variable on your pages.
Similar to #ben-foster's solution but without using any jQuery
I needed something simple, this is what I did.
In my front matter I added a variable called active
e.g.
---
layout: generic
title: About
active: about
---
I have a navigation include with the following section
<ul class="nav navbar-nav">
{% if page.active == "home" %}
<li class="active">Home</li>
{% else %}
<li>Home</li>
{% endif %}
{% if page.active == "blog" %}
<li class="active">Blog</li>
{% else %}
<li>Blog</li>
{% endif %}
{% if page.active == "about" %}
<li class="active">About</li>
{% else %}
<li>About</li>
{% endif %}
</ul>
This works for me as the amount of links in the navigation are very narrow.
I used a little bit of JavaScript to accomplish this. I have the following structure in the menu:
<ul id="navlist">
<li><a id="index" href="index.html">Index</a></li>
<li>About</li>
<li>Projects</li>
<li>Videos</li>
</ul>
This javascript snippet highlights the current corresponding page:
$(document).ready(function() {
var pathname = window.location.pathname;
$("#navlist a").each(function(index) {
if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
$(this).addClass("current");
});
if ($("a.current").length == 0)
$("a#index").addClass("current");
});
My approach is to define a custom variable in the YAML front matter of the page and output this on the <body> element:
<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>
My navigation links include the identifier of the page that they link to:
<nav>
<ul>
<li>artists</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
In the page front matter we set the page id:
---
layout: default
title: Our artists
id: artists
---
And finally a bit of jQuery to set the active link:
// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
$("a[data-page-id='" + currentPage + "']").addClass("active");
}
The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the following liquid script adds an 'active' class to them. This class should be styled with CSS. To detect which link is active, the script uses ‘contains’, as you can see in the code below.
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
Getting started
</li>
...
...
...
</ul>
This code is compatible with all permalink styles in Jekyll. The ‘contains’ statement succesfully highlights the first menu item at the following URL’s:
getting-started/
getting-started.html
getting-started/index.html
getting-started/subpage/
getting-started/subpage.html
Source: http://jekyllcodex.org/without-plugin/simple-menu/
Lot's of confusing answers here.
I simply use an if:
{% if page.name == 'limbo-anim.md' %}active{% endif %}
I refer directly to the page and putting it inside the class I want to
<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>
Done. Quick.
I've been using page.path and going off the filename.
home
Lot of good answers are already there.
Try this.
I slightly alter the above answers.
_data/navigation.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
In a page -> portfolio.html (Same for all pages with a relative active page name)
---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---
<div>
<h2>Portfolio</h2>
</div>
Navigation html part
<ul class="main-menu">
{% for item in site.data.navigation %}
<li class="main-menu-item">
{% if {{page.active}} == {{item.active}} %}
<a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
{% else %}
<a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
if you're using the Minima theme for jekyll, you only need to add a ternary on the class attribute in header.html:
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">
the full excerpt:
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
add this to your _config.yml
header_pages:
- classes.markdown
- activities.markdown
- teachers.markdown
And then of course your css:
a.active {
color: #e6402a;
}
Here is a jQuery method to do the same
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});
I am new in HWIOAuthBundle with Symfony2.3 +FosUserBundle.
I am using this bundle for facebook, twitter, googleplus login in my project.
I have successfully install this and this working fine.
But I want to override login.html.twig because I want to show facebook , twitter, google plus Images to our twig file but I don't know How I can do this in HWIOAuthBundle.
My login.html.twig
{% block content %}
{# Bonus: Show all available login link in HWIOAuthBundle #}
{% render(controller('HWIOAuthBundle:Connect:connect')) %}
{% endblock %}
Base HWIOAuthBundle login.html.twig
{% extends 'HWIOAuthBundle::layout.html.twig' %}
{% block hwi_oauth_content %}
{% if error %}
<span>{{ error }}</span>
{% endif %}
{% for owner in hwi_oauth_resource_owners() %}
{{ owner | trans({}, 'HWIOAuthBundle') }} <br />
{% endfor %}
{% endblock hwi_oauth_content %}
Which one showing this type in Html page:
Facebook
Google Plus
Twitter
this is show by default when click any one then redirect to his page(Facebook,Twitter,Google Plus).
But And I want to show this type HTML:
<!-- socials -->
<ul class="top-socials">
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="google-plus" href="#">Google+</a></li>
</ul>
How can I do this ?
To be more specific about your case, you should create 2 new views:
app/Resources/HWIOAuthBundle/views/layout.html.twig:
{# extends your own base template #}
{% extends 'MyBundle::layout.html.twig' %}
{% block title %}{{ 'Login' | trans }}{% endblock %}
{% block body %}
{% block hwi_oauth_content %}
{% endblock hwi_oauth_content %}
{% endblock %}
app/Resources/HWIOAuthBundle/views/Connect/login.html.twig:
{% extends 'HWIOAuthBundle::layout.html.twig' %}
{% block hwi_oauth_content %}
{# Display oauth errors (here using Bootstrap) #}
{% if error is defined and error %}
<div class="row">
<div class="col-md-12 alert alert-danger text-center">
<span class="error">{{ error }}</span>
</div>
</div>
{% endif %}
{# HWIOAuthBundle integration #}
<ul class="top-social">
<li><a class="#" href="{{ hwi_oauth_login_url('facebook') }}">Facebook</a></li>
<li><a class="#" href="{{ hwi_oauth_login_url('twitter') }}">Twitter</a></li>
<li><a class="#" href="{{ hwi_oauth_login_url('google') }}">Google+</a></li>
</ul>
{% endblock hwi_oauth_content %}
Do not be tempted to put this login page in the first file, because OAUthBundle uses several other views (to confirm profile, etc).
This example is taken from symfony-quickstart project.
You have two solutions for that :
Use bundle inheritance and refine the template with parent path
Declare a template in you app/Ressources/ like that : app/Ressources/AcmeBundle/Directory/template.html.twig (where /AcmeBundle/Directory/template.html.twig is the exact same path to the template in your vendor)
Doc :
http://symfony.com/doc/current/cookbook/bundles/inheritance.html
http://symfony.com/doc/2.0/book/templating.html#overriding-bundle-templates
I've been using Jekyll for a static site (so that its easy to maintain), and have been stuck at the following feature :
This is my link bar :
<ul id="links">
<li class="first"><a class="active" href="/">Home</a></li>
<li>Associate With Us</li>
<li>Media</li>
<li>Clients</li>
<li class="last">Contact Us</li>
</ul>
The active class handles the coloring. What I want is this class be applied by jekyll depending on some variable set using liquid/YAML.
Is there some easy way to go about this?
Since the bar is common to all the pages, it is now in the default layout. I could go around by using Javascript to detect the url, and do the highlighting but was wondering if there was any way of doing this in Jekyll.
I do this in two pages I have set up in Jekyll.
The first thing I do is creating an entry inside _config.yml with the information of all the pages:
# this goes inside _config.yml. Change as required
navigation:
- text: What we do
url: /en/what-we-do/
- text: Who we are
url: /en/who-we-are/
- text: Projects
url: /en/projects/
layout: project
- text: Blog
url: /en/blog/
layout: post
Then, on my main layout, I use that information to generate the navigation links. On each link, I compare the url of the link with the url of the current page. If they are equal, the page is active. Otherwise, they are not.
There's a couple special cases: all blog posts must highlight the "blog" link, and the front pages (English and Spanish) must not present the nav bar. For both cases, I rely on the fact that blog posts and front pages have specific layouts (notice that the "Blog" and "Project" links on the yaml have an extra parameter called "layout")
The navigation code is generated like this:
{% unless page.layout == 'front' %}
<ul class="navigation">
{% for link in site.navigation %}
{% assign current = nil %}
{% if page.url == link.url or page.layout == link.layout %}
{% assign current = 'current' %}
{% endif %}
<li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
<a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endunless %}
I still have to remember adding an entry to _config.yaml every time I add a new page, and then restart Jekyll, but it happens very infrequently now.
I think the navigation yaml could go inside an _include called "navigation" or something similar, but I haven't tried using yaml inside those so I don't know whether it will work. In my case, since I've got a multi-lingual site, it's easier to have everything inside config (missing translations are easier to spot)
I hope this helps.
As a further extension on the work of the other, here is a way to make it work without soggy index.html showing on all your beautiful URLs:
---
navigation:
- text: Home
url: /
- text: Blah
url: /blah/
---
{% assign url = page.url|remove:'index.html' %}
{% for link in page.navigation %}
<li {% if url == link.url %}class="active"{% endif %}>
{{link.text}}
</li>
{% endfor %}
The gold is in the assign statement which gets the page URL (which naturally includes the index.html and then strips it off to match the page.navigation pretty URLs.
This may be a new feature since the question first appeared, but I've discovered this can all be done in one file:
define the navigation as a variable in the yaml header
loop over the variable using liquid
So in my _layouts/base.html I have:
---
navigation:
- text: Home
url: /index.html
- text: Travel
title: Letters home from abroad
url: /travel.html
---
<ul>
{% for link in page.navigation %}
<li {% if page.url == link.url %}class="current"{% endif %}>
{{link.text}}</li>
{% endfor %}
</ul>
Which generates this on the Home page:
<ul>
<li class="current">Home</li>
<li>Travel</li>
</ul>
And this on the Travel page:
<ul>
<li>Home</li>
<li class="current">Travel</li>
</ul>
I needed something simple, this is what I did.
In my front matter I added a variable called active
e.g.
---
layout: generic
title: About
active: about
---
I have a navigation include with the following section
<ul class="nav navbar-nav">
{% if page.active == "home" %}
<li class="active">Home</li>
{% else %}
<li>Home</li>
{% endif %}
{% if page.active == "blog" %}
<li class="active">Blog</li>
{% else %}
<li>Blog</li>
{% endif %}
{% if page.active == "about" %}
<li class="active">About</li>
{% else %}
<li>About</li>
{% endif %}
</ul>
This works for me as the amount of links in the navigation are very narrow.
Same navigation on all pages
After reading all that answers, I came up with a new and easier to maintain solution:
Add {% include nav.html %} to your _layouts/layout.html file
Add a nav.html file to your _includes folder
Add the following content to your nav.html file. It will determine if your link is on the current page and add a class of active as well as remove index.html from your link. It will also work with a subfolder like /repo-name, which is needed for GitHub gh-pages Pages branch.
<nav>
<ul class="nav">
{% assign url = page.url|remove:'index.html' %}
{% for link in site.navigation %}
{% assign state = '' %}
{% if page.url == link.url %}
{% assign state = 'active ' %}
{% endif %}
<li class="{{ state }}nav-item">
{{ link.text }}
</li>
{% endfor %}
</ul>
</nav>
Then add the nav link array to your _config.yml file as following. Mind the right indentation, as YAML is pretty picky on that (Jekyll as well).
navigation:
- text: Home
title: Back to home page
url: /index.html
- text: Intro
title: An introduction to the project
url: /intro.html
- text: etc.
title: ...
url: /foo.html
Navigation only on home - "back" for others
Assuming that the link to your "Home"-page (index.html) is the first array part inside the _config.htmls navigation array, you can use the following snippet to show the navigation to the different pages on the main/home page and a link back to the home page on all other pages:
<nav>
<ul class="grid">
{% assign url = page.url | remove:'/index.html' %}
{% assign home = site.navigation.first %}
{% if url == empty %}
{% for link in site.navigation %}
{% assign state = '' %}
{% if page.url == link.url %}
{% assign state = 'active ' %}
{% endif %}
{% if home.url != link.url %}
<li class="{{ state }}nav-item">
{{ link.text }}
</li>
{% endif %}
{% endfor %}
{% else %}
<li class="nav-item active">
{{ home.text }}
</li>
{% endif %}
</ul>
</nav>
This works for me (sorry for non-english code):
<nav>
<a href="/kursevi" {% if page.url == '/kursevi/' %} class="active"{% endif %}>Kursevi</a>
<a href="/radovi" {% if page.url == '/radovi/' %} class="active"{% endif %}>Radovi</a>
<a href="/blog" {% if page.url == '/blog/' %} class="active"{% endif %}>Blog</a>
<a href="/kontakt" {% if page.url == '/kontakt/' %} class="active"{% endif %}>Kontakt</a>
</nav>
Navigation highlighting logic is the last thing I would do in server side. I'd rather stick with nice, clean and unobtrusive approach using JS/jQuery (if this option works for you).
The elements which need to be highlighted go inside a common layout like this:
<nav>
<a id="section1" href="#">Section 1</a>
<a id="section2" href="#">Section 2</a>
<a id="section3" href="#">Section 3</a>
</nav>
In your page (or even in nested layouts) you place an element with data-ref="#section1" (in fact, any jQuery selector will work).
Now, include following JS snippet (shown as jQuery, but any framework will do) in <head>:
$(function() {
$("[data-ref]").each(function() {
$($(this).attr("data-ref")).addClass("current");
});
});
This approach is nice, because it makes no assumptions on underlying architecture, frameworks, languages and template engines.
Update: As some folks pointed out you might want to omit the $(function() { ... }) part which binds the script to DOM ready event — and just push the script down to the bottom of your <body>.
Adding to the solution of incarnate, the simplest possible line of code with jQuery is this:
$( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");
Works perfectly for me.
I took a simple CSS approach. First, add an identifier in the front matter...
---
layout: page
title: Join us
permalink: /join-us/
nav-class: join <-----
---
Add this as a class in <body> and your nav...
<body class="{{ page.nav-class }}">
and
<li class="{{ page.nav-class }}">...</a></li>
Then link these for all pages in CSS, e.g:
.about .about a,
.join .join a,
.contact .contact a {
color: #fff;
}
The main downside being you need to hard code the style rules.
With Jekyll 3.4.3, this works :
<ul>
{% for my_page in site.pages %}
{% if my_page.title %}
<li {% if my_page.url == page.url %} class="active" {% endif %}>
<a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}
</a>
</li>
{% endif %} {% endfor %}
</ul>