How can I resolve the follwoeing error: "Facade\Ignition\Exceptions\ViewExceptionWithSolution
Navigation [] not found"
Here is the code:
partial:
<nav class="py-12 max-w-4xl mx-auto">
<div class="flex justify-center items-center">
<a class="font-bold text-2xl" href="/">Home</a>
<ul class="space-x-8">
{{ nav: /collection:Pages}}
<li> {{ title }} </li>
{{ /nav:collection:Pages}}
</ul>
</div>
</nav>
here the layout:
<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title ?? site:name }}</title>
<link rel="stylesheet" href="{{ mix src='css/tailwind.css' }}">
</head>
<body class="bg-gray-100 font-sans leading-normal text-gray-800">
<div class="mx-auto px-2 lg:min-h-screen flex flex-col items-center justify-center">
{{ partial:nav }}
{{ template_content }}
</div>
<script src="{{ mix src='/js/site.js' }}"></script>
</body>
</html>
You have a syntax error in your Antlers code. You have...
{{ nav: /collection:Pages}}
<li> {{ title }} </li>
{{ /nav:collection:Pages}}
When it should be:
{{ nav:collection:pages }}
<li> {{ title }} </li>
{{ /nav:collection:pages }}
You can review the documentation around the Nav Tag in the Statamic Documentation.
Related
This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ pageTitle }}</title>
<link rel="stylesheet" href="/css/main.css">
{{#if formsCSS}}
<link rel="stylesheet" href="/css/forms.css">
{{/if}}
{{#if productCSS}}
<link rel="stylesheet" href="/css/product.css">
{{/if}}
</head>
<body>
<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="{{#if activeShop }}active{{/if}}" href="/">Shop</a></li>
<li class="main-header__item"><a class="{{#if activeAddProduct }}active{{/if}}" href="/admin/add-product">Add Product</a></li>
</ul>
</nav>
</header>
{{{ body }}}
</body>
</html>
and I am getting this.
Error: Parse error on line 30:
...}}}</body></html>
--------------------^
Expecting 'OPEN_INVERSE_CHAIN', 'INVERSE', 'OPEN_ENDBLOCK', got 'EOF'
Why? Did I miss something?
My html in body is:
<main>
{{#if hasProducts }}
<div class="grid">
{{#each prods}}
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">{{ this.title }}</h1>
</header>
<div class="card__image">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8NDQ0NDQ0NDQ0NDQ0NDw8NDQ0NFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFQ8QFSsdFR0uLSsrKy0rKy0tKy0tKysrMCstLS0rLS0rLSstKy0rLS0rLTctLS0tLTctKy0tLTc3K//AABEIALsBDQMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAABAgADBQYHBAj/xABJEAACAQIBBA0JBQYEBwAAAAAAAQIDEQQFEiExBgcTQVFSU3GBkZLB0SIyVGGCk6Gx0hQVFnLCF0SDorLhYmOj8CMkNEJDc8P/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EACkRAQEAAgEDAwMDBQAAAAAAAAABAhESAzFRMkFhInGxIYHBIzNCkfD/2gAMAwEAAhEDEQA/AOjoZCoY0CggQQCG64UVx06bD2OXNrRk1woOcuFdYqQbDnU0bOXCHOXCLYlhzq6PnLhJnLhQtiWHOmj39YSpoDXBo5hz+DS4hRukl6+caNdPQ9D+BqZyppaQjZU663tPNqLbIi0hTurfAviS74fkZ5xdLiFOnhfWSz4X1sc/hdLgFNvW+tgs+F9bHP4NLiFGnhfWC74WOaaXgKc+XD8EDdJcPwHOHFcKVKvZpSsk9F9WktuamUpZoGBhYDSFYGMwAKhkKhkAUCcrJ9XXoNO2zst4jB4ajLCVdxnVxG5ykowlLMzJPRnJ20pFmw+WIlRoVcViquJqV4wrPPsowTWcoqKS638DnlnpudP6eW23Q1dY6FhqHRiJUCKQ1pNmuG4gUXRs9yXAiWGjYisIGTRskkVSiWyEJYsquKk5NOTcVGNo6LJ3enh4OoujEEV5T/LH5ssMYtVEgihR00xswRQ2GjY2A0QA0bBoDIwDRsGhWhgMmleXFrRfgkmeZ4iVKTa0xb0x3uf1M9uJXksx+LV9Pqv8Dnf0u41OzC4rZ7CjXhQr4DF0t0qRpxqt0pU3nOyaadn8zcTme2HG2EjVWujiKdRc9pLvOk0J50VJapJNczR26eVu9r1MZJLIdijMDOjkrQwEEDmu3LVVsDSbspVK83v2SUFf+Y2/INFQp4eC0qFGnG+q9qdjRNt95+LwdFNJ7hNpvUnOpZN9k6Nk+NmlxY6OhWOGfd6L+mGP7/llIjAQTUcKBCERpBCkAYA2AEAEAwisBJCoZiolDR85/lXzZYJHzn+VfNjmMWqBAkubZQKAQoYDIQBWAZisgAGEjJViqqtD5mY+utC5kZKSMfUXkrp+ZitRqOzyjnZPrrfi6UuhVI3+Fzb9jmI3XB4Wpx8LQl0umjX9lNPOwWLW/wDZ6slzxi33GQ2v6udkzBvi0czsSlHuL0+9dM/7c+7YWAIDu4EQRUEDk+z+DrZbw9JabUsLB6baN0nJ/BnTcD5z5u9HLsuPddkmbrUK2ES9inCfzudTyetfs95wrv1O2P2j3hAE1HECEIaQQoCGKgohEQACsYVhSMCCxUQWR85/lXzYzFjr9lfMZmMWqFwEIbZEZChRUFBAghSsVjMSRBAEISrCs8VRaH6pNHtZ5Kq87nv1mK1GJyjSz6dWHHp1I9cWjxbVVXOyZTW/CrXjzXm5fqMrNaTA7VMs2jjKHI4+quhwiv0sYep079O/efy3lgCA7uCpBAggciwEt12RVprVDFYqL/h05w+cTq+T1ofOjlGwWq6mVcVNebOWLqvfemto/qOs4BeT0v5I4+P+93frerXjX4j1BAE04IQBDQKHEQwQUQBAIxWEDAVioMhUSqujr9nvIwR1+z3hZjFaBCEOiChhUS4QyCBMICsSQ7EkFKmERDGasBnlrLTLoZ6meatrf5GZqvDPWa3tfPMxuV6O8sRSqL2pVb/pNkqa/wDfCazsXeZlvKFPlsPSrJflzF+tkx9UdMfTlPj+Y38UIDs4qha9TNhKW9CMpdSuMjG7Ja+54HGVFrhhMQ1z7m7Ak25rtU0/+LXnraoQjd6/Kkn+k63gfMXT8zmW1fRShiJK+c3Si+LmrOtb4/A6dhPMXN82cvDv1r9eT0EAE04IQBDQZBAiBBIQjAFwNkYLgLICJJgQVdHX7PeRsEdfs95GYxWoEAbm2UCC5EASEBcAiSDcWQUgwgyJRGUVta9aaL2U1v8At5zFaY6r4mr4V5myCD3q+AnHnabf/wAzaK+vpNUyo8zLOS6nH3anz+RJW/nJ7x06fvPiuiChQDu4qka/s/q5uTMW72zqcafbnGPeZ9Gp7aFS2TpRvbdMRh489pZ/6TOXat9Obzx+7EbWdO2GrS42Jt0KEfFnRsP5q/LH5Gi7AKThgabatn1KlTnV7J9SN8p6uhIwud+qnCAhXMQEIaQyIAIBRGREYCsW4WKwBMWLCxUFXx19DIwQ19DI2YxWiQBDbIjICIASMBGwALIIrAQZCMZEqiU19S9TTLSqv5rM1pj8VrfOahsv8jE5KrcTHU4X4FKcL/CJuGL1s07bD0YWlW36GKpVV0X/ALGK69L1R0ZEFpyuk956Qs9DgqRo+2zUthcPDjYnO6I05fUbujnG25V8rB0/8OJm+uml3mM+1dehP6kZzYbC2Cwy4abfQ5NpfE3KJq+xqnm4bCQetYegnzuMb/M2dEvesW7MEVBKyIRQlDEAghBIAgEZXIsYkgqtgRJATILoPT0MIsXpXMwmcVpiACbQUQhAggZCAARjNiNhSMZCMZGaCV1dT5h7iy3yNMfid71xXyNV2eUs/J9ZcV05fzpG04jVHmt8TBbJIZ2CxMdf/Bm+pX7jFbwuspWy5Fr7phsPU5TD0Z9cE+89jMHsJrZ+TsG+DD04dhZv6TOHeOeU1bFCZy/bRqqWNoU3e0MPBu2u06s729doHTzk+z21TKsYa9GFo259P6yZfrqOvR9VviV0bJsLbnFaoxgkuBJf2MymYvBef/vgZk0zEc6dBEQ6KyZEBciZQ6IKmNcAkAQCMSQzEYCSEHkIRVkXpXMxyqL0rmY6ZIU4UKE0hgi3CBGxWwsVgBsRjMVgKyEIRUuBsDA2RXhxHm8zkviYvHwzqNWHGp1I9cWZXEapfnfyMfLfM1Y821lVzsm0VxKmIjp/90pL4SRtTNK2rZWw2IpcjjasFzZkP7m6XOuPaHU9dee5yrKEFVy7PTqxdF6P8uEF+k6pc5Pkas55ZqS4+Jxun/CpSa+CM5+2m+j/AJX4dQwPndfyMhcx2B1vmfcZC5I506YyZUmMmVD3DcS4bhD3DcRMNwHuG4lyXAZsVsDYjYVJFbZJSK2yC2L0rmfcWJlEHpXMyxSJFXJkuVpjJmkPcNxLkuA1wNi3BcAtgYGwNgFisjYtwCxWRsVsivNiVol0MxknpMniN/8ALfqZiqj0mVjFbX0s3EZTo8GKjVt6puf0o3e5oWxOWZlbKEOUpUai9drfWb3c6Y9l6vq/1+HnvvnJthF6mPlVte0K021qUpP+7OnZSr7nQrVOTo1Z9mDfccx2A4mlRdepWq06aUaUFKpOMU7Xb1kzutNdOfTl+zqWDlZNvQkrt7yRdLKFBa69Fc9SC7zn+XdleFzYxo4tSd/LVKeanG2pvUzWK2X4OTaxMkt5Os9Bjd9oxp2ZZSw/pFH3kPEZZSocvS7cTiUst09/E39ub7yqWWqO/Wv0TY3l4NR3L7zocvT7SA8r4Za8RS7RwmWWsPx5PmpvvQv35h+Co/ZSLvI1HdnlzCLXiaXaB+IMH6VR7Rwd7IKO9TqvqXeB7IaXJVeteI+o1HevxBg/S6PaCsvYP0uh20cEWyGnyFTrQfxBD0ep1ofUad8WWMK9WKw7/iw8SyOMpS82rSl+WcX3nAPv6Po9X4BWWov93q9cfEbq8L4fQDfBpKpSOExy/uelRr09emM7PRbgfrPbT2a16fmYup7dWNVdTuTZwrtUJ6V0likciobZtSMGpyozqW8l7lUS9d7WXUip7YWIqa6+bfepblH+pJklXhXZose5w2rsrq1M5KrjpyV72nNpW16FJJ9B5llqbvn0sVU1a1b5ydze04V3l1YrXKK52kJLF0lrq01zzj4nBnliPotbpzPEn3sr2+x1r80PEbOF8O7PH0eXo+8h4ivKFDl6PvIeJwuOV09WEq2/h+JFlqPotX/T8Rs4Xw7n9vo8vS95HxB9uo8tS7cfE4d99xvb7LUvq10/EP36l+7Vf9PxGzhfDt/26jy1Ltx8QPHUeWpduPicSWyBej1eun4jrZHwUK3XT8Rs4Xw7S8dR5al24+Irx9HlqXbj4nGVsoa/8Vbrp+Iy2WS5Kr0un4k2vC+HYJYiE35E4TtGSeZJStwXtzGNqvScyjsxnHTGNaL06VKmn13PVh9n0lZVKMprjOUIyt16SLwy8NlyZLMy5blsDLpalH6Wb9c5LkjL0MVlfBVKcJQajWpTTcZZy3ObVrdJ1dM3h2TqzVn2ePFUI1ac6U75lSE6cknZ5sk0/gzUntc4PlMUvbhq7JuKIbslYmVnatLntaYKWupie1B/pKv2XYLlcT2ofSb0FE1Dlb7tFW1fguVxPah9JFtYYHlMR2ofSb2SxdROV8tFW1lgeUxHah9Iy2tMDx8R2qf0m7hQ1DlfLSltaYHj4jtQ+kZbW2C4+I7UPpN0GQ1DlfLS/wBm2B42I7UPpD+zfBcfEduP0m6EQ1Dll5aZ+zfBcfEduPgH9m2C4+I7cfA3Qg1DlfLS1tbYDfliGt9borP4Fq2t8l8hUfrdapf5m4EGocr5amtrvJVv+k6d1rX/AKiyO1/ktX/5TX/m1mlo3vKNoINJyvlrC2A5NvdYdresqtVL5jrYNk70Z9NWr9RsxGNRd3y1lbB8m+ir3lX6hlsKyav3SPbqeJsbANQ3fLX1sMyd6HT7U/EK2HZO9Co/zPvM+yA3WDWxPJ9rfYqHZuT8KZP9Bw/u0ZtgYN1hvwvk/wBBw3uoh/DGA9BwvuoeBl2AG6xS2OYFfuWF9zT8A/h/BehYX3NPwMoAJtjvuTCb2Ew3uafgBZGwu9hcP7mn4GQIB5sPgKNN50KNKD4YQjF9aR67gAB//9k="
alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
{{/each}}
</div>
{{ else }}
<h1>No Products Found!</h1>
{{/if}}
</main>
before extending i have checked all connections and file paths but after extending my child codes vanises
base.html
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
</div>
</body>
</html>
skills.html
{% extends 'app/base.html' %}
{% block content %}
<p>skills</p>
<p>skills</p>
<p>skills</p>
{% endblock %}
Your base.html file should still include a block section
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
{% block content %}
{% endblock %}
</div>
</body>
</html>
I'm having some issues with the general layout of my site, specifically how my main content area and sidebar are positioned. My rough draft layout is:
And I'm using the following code to create it for real (it's spread through a few different files as this is a Symfony 3.4 project) -
base.twig.html:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="keywords" content="Sewing Diva, online shopping, online store, shop, store, quilting, quilts, sewing, sew, fabrics, patterns, notions, gift shop, gifts, Derry NH">
<meta name="description" content="The Sewing Diva Quilt and Gift Shop offers customers many fabrics, patterns, and notions to buy online">
{% block noindex %}{% endblock %}
<title>{% block title %}The Sewing Diva Quilt and Gift Shop{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('build/favicons/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('build/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('build/favicons/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('build/favicons/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('build/favicons/safari-pinned-tab.svg') }}" color="#5bbad5">
</head>
<body>
<div id="site" class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
<img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
<img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-none d-lg-inline w-50" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center">
<div class="nav-item mb-lg-5">
<div class="d-none d-lg-block">
<a class="nav-link d-lg-inline" href="{{ path('fos_user_security_login') }}">Login</a> | <a class="nav-link d-lg-inline" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
</div>
<div class="nav-item mb-lg-3">
<div class="d-none d-lg-block social-media">
<a class="nav-link d-lg-inline-block" href=""><i class="far fa-envelope"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-facebook-square"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
<a class="nav-link d-lg-none" href="{{ path('fos_user_security_login') }}">Login</a>
<a class="nav-link d-lg-none" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
<form class="form-inline my-2 my-lg-0 mx-auto d-inline d-lg-none" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav> <!-- end nav -->
<div class="row justify-content-center">
{% block sidebar %}{% endblock %}
{% block content %}{% endblock %}
</div> <!-- end content -->
<div id="footer" class="row"> <!-- TODO: a real footer -->
<p id="copyright">© The Sewing Diva</p>
<p id="mp">Site created and maintained by Major Productions</p>
</div> <!-- end footer -->
</div> <!-- end site -->
{% block js %}
{{ encore_entry_script_tags('app') }}
<script src="https://js.stripe.com/v3/"></script> <!-- For fraud protection -->
{% endblock %}
<script type="text/javascript">
var success = $('#flash-success');
var error = $('#flash-error');
if (success.length > 0) {
success.fadeOut({ duration : 5000 });
}
if (error.length > 0) {
error.fadeOut({ duration : 5000 });
}
</script>
{% block jscode %}{% endblock %}
</body>
</html>
index.twig.html:
{# app/Resources/views/Store/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
<div class="col-md-3 bg-beige container">
{{ render(controller('AppBundle:Store:categoryList')) }} <!-- figure out indents -->
</div>
{% endblock %}
{% block content %}
<div class="col-md-9 border container" id="content">
{% if newestProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Our latest item:</h2>
<div class="row">
<div class="jumbotron" style="background: transparent">
<!-- TODO: figure out structure -->
</div>
</div>
<h2>Some more recent items:</h2>
<div class="row">
{% for newestProduct in newestProducts[1:] %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ newestProduct.name }}</h5>
{#{% if newestProduct.description != null %}<p class="card-text">{{ newestProduct.description }}</p>{% endif %}#}
<p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if saleProducts == null %}
{% else %}
<h2>Some items currently on sale:</h2>
<div class="row"> <!-- card deck instead? -->
{% for saleProduct in saleProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ saleProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ saleProduct.name }}</h5>
{% if saleProduct.description != null %}<p class="card-text">{{ saleProduct.description }}</p>{% endif %}
<p class="card-text">${{ saleProduct.price }}/{% if saleProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': saleProduct.slug, 'prodId': saleProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if randomProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Some other things you may like:</h2>
<div class="row">
{% for randomProduct in randomProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ randomProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ randomProduct.name }}</h5>
{% if randomProduct.description != null %}<p class="card-text">{{ randomProduct.description }}</p>{% endif %}
<p class="card-text">${{ randomProduct.price }}/{% if randomProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': randomProduct.slug, 'prodId': randomProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
category_list.twig.html:
{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}
<h2>Shop By Category:</h2>
<p>Newest Products</p>
<p>Products on Sale</p>
{{ htmlTree|raw }}
Which, all together, creates the following:
My biggest issue is that the sidebar/category list overhangs the navigation. I'm guessing that navbar has some x-axis margin/padding. So, I want to constrain the two columns - sidebar and content - to be within the visible width of the navbar. Ideally, the navbar wouldn't have any white space on the left/right sides.
I think I can handle the rest through a combination of fiddling around with columns, margins, and padding, but keeping everything uniform on the edges is a priority.
Put the container inside your navbar instead
<div id="site">
<nav class="navbar ...">
<div class="container-fluid">
<a class="navbar-brand" ... />
<button class="navbar-toggler" ... />
<div class="collapse" ... />
</div>
</nav>
</div>
The container usually has left and right padding. If you put the navbar with a background color inside the container, it would show a gap horizontally.
I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>
So i'm making a blog in Jekyll based on a start bootstrap theme (also following a course on Udemy) I've made the post layout etc, and everything works fine until i add a second post that messes up everything.
Post layout with only one post (remove the /remove-this/second-image/ to get the first and second link to see the layout with one post, left link, and the layout with two posts, right link sry I didn't have sufficient reputation ^^)
I would like to know how to fix this problem
Thanks for helping
here is the code used for the post layout (I also made a GitHub repository):
{% include post_header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
includes:
post_header.html:
{% for post in site.posts %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> {{ post.title }} </title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
{% include nav.html %}
<!-- Post Header -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ post.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.description }}</h2>
<span class="meta">Publié par {{ post.author }} on {{ post.date | date_to_string }}</span>
</div>
</div>
</div>
</div>
</header>
{% endfor %}
footer.html:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/Bonny_AG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/BonnyAG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright ©BonnyAG 2015, All content made by BonnyAG for this blog, please ask permission before using the content in other websites.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="{{ site.url }}/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ site.url }}/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ site.url }}/js/clean-blog.min.js"></script>
</body>
</html>
So after digging in a little deeper i found that what caused the error was that i had a header for static pages and one for blog posts and that was causing the error. So here is the code fix
Post layout:
{% include header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
header.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>{{ page.title }}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% include nav.html %}
<body>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ page.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if page.author %}
<div class="post-heading">
<h1>{{ page.title }}</h1>
<h2 class="subheading">{{ page.description }}</h2>
<span class="meta">Publié par {{ page.author }} on {{ page.date | date_to_string }}</span>
</div>
{% else %}
<div class="site-heading">
<h1>{{ page.header }}</h1>
<hr class="small">
<span class="subheading">{{ page.description }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</header>