I am using templates to separate my logic and views. I am using multiple includes to separate the different parts of the base template. I have the previous version of the templates available here(https://github.com/ookma-kyi/ookma-kyi-core/tree/master/App/Views). The issue is The index page "index.html" has this bit of code:
{% extends "base_generic.html" %}
{% block title %}Index Page{% endblock %}
{% block body %}
<h1>Welcome</h1>
<p>Welcome Martial Artist. Do you think you are the best of the best? Well why not find out!</p>
{% endblock %}
It is included from base_header.html:
<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>{% block title %}Untitled{% endblock %}</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
Which is included from base_generic.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% include "base_header.html" %}
</head>
<body>
{% include "base_navbar.html" %}
{% block body %}
{% endblock %}
{% include "base_footer.html" %}
{% include "base_scripts.html" %}
</body>
</html>
It defaults to Untitled inside base_generic.html instead of the one in Home/index.html. I have tried everything and still can't figure out the issue. Please help!
Related
I want to add meta tags to my Symfony application.
How to use Meta Tags with Symfony 2.0
Twig change meta data
https://symfony.com/doc/current/cmf/bundles/seo/twig.html.
These links can't help me find out the correct answer.
This is my code. My page where I need to add the tag. Say "about.html.twig"
{% extends 'AppBundle::layout.html.twig' %}
{% block body %}
.
.
.
{% endblock %}
I wanted to know which one to use.
{% block meta %}{% endblock %}
(or)
{% block metadata %}{% endblock %}
(or)
{% block head %}
<head>
<meta charset="UTF-8" />
{% endblock %}
meta or metadata or head are only the names. (not a statement)
You can choose any name for this.
for example
base.html.twig
<!doctype html>
<html lang="en">
{% extends 'AppBundle::layout.html.twig' %}
{% block title %}Title Website{% endblock %}
<meta charset="UTF-8" />//////Repeat on all pages
<meta http-equiv="content-language" content="fa,en">//////Repeat on all pages
{% block metaTag %}
<meta name="{{ description }}" content="Your description">
{% endblock %}
{% block body %}
{% endblock %}
I recently started a new project in Symfony and I did everything here
but it didn't help.
I work for first time with Symfony and this is my first project. I strictly follow the documentation and I am trying to add some CSS but its now working. I use Encore and downloaded Yarn as the documentation says to do.
Below I will upload some of my code. It seems fine but it's not.
html.twig
<!DOCTYPE html>
<html lang="en" xmlns:th="http:thymeleaf.org">
<head>
<title>Events & People</title>
<meta charset="UTF-8">
{% block stylesheets %}
{#{% stylesheets '#AppBundle/public/build/app.css' %}#}
{{ encore_entry_link_tags('app') }}
<link src="/build/app.css" rel="stylesheet"/>
{#{% endstylesheets %}#}
{% endblock %}
</head>
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
//11111111111
// .enableSassLoader()
//
// // processes files ending in .less
// .enableLessLoader()
//
// // processes files ending in .styl
// .enableStylusLoader()
//11111111111
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
Here is an image of my tree of files:
If it's done right it should load the files from my /build/app.css, but it's not loading it.
For me, it was just a caching problem.
let's try to delete the cache.
I didn't search deeply, but one bad think is your link tag...
Replace (src by href)
<link src="/build/app.css" rel="stylesheet"/>
By
<link href="/build/app.css" rel="stylesheet"/>
Have you tried this:
<link src="build/app.css" rel="stylesheet"/>
removing the leading "/" only and see if that works? not certain though.
I solved my problem I just have an error in my CSS and yarn didn't compile it
Move your link tag outside of the stylesheet block's. And use twig asset() function instead of the absolute path.
PS: use href instead of src in link tag
<!DOCTYPE html>
<html lang="en" xmlns:th="http:thymeleaf.org">
<head>
<title>Events & People</title>
<meta charset="UTF-8">
<link href="{{ asset('build/app.css') }}" type="text/css" rel="stylesheet"/>
{% block stylesheets %} {% endblock %}
</head>
If you really want the place the link tag inside your stylesheet block's, you must call this by using twig parent() function's in each template view
{% extends 'base.html.twig' %}
{% block stylesheets %}
{# call the parent content inside stylesheet block #}
{{ parent() }}
{# other css code here #}
{% endblock %}
the script & stylesheets should be outside the body tag like this!
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</html>
The script and stylesheets should be outside the body tag, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</html>
On my symfony 3.2 project I am using the FOSUserBundle for User Registration and authentication. What I am trying to do is to apply a custom theme to the registration form.
Therefore I have made the app/Resources/views/base.html.twig that is my application's base template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" ></link>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% block javascriptsHeader %}
{% endblock %}
</head>
<body class="{{ classes }}">
{% block body %}
{% endblock body %}
{% block javascriptsFooter %}
{% endblock javascriptsFooter %}
</body>
</html>
I have also changed Resources/FOSUSerBundle/views/layout.html.twig with the following content:
{% extends AppBundle::base.html.twig %}
{% body %}
{% block fos_user_content %}
{% endblock fos_user_content %}
{% endblock body %}
As seen on:
* Symfony2: How to extend a Bundle?
* http://symfony.com/doc/current/bundles/FOSUserBundle/overriding_templates.html
But I get the following error:
Unexpected token "punctuation" of value ":" ("end of statement block" expected).
Do you have any idea how to use my default template as registration from template?
You have the wrong string in extends. Change
{% extends AppBundle::base.html.twig %}
to
{% extends '::base.html.twig' %}
and it should work.
NOTE: Using ::base.html means that the template engine will look for base.html in app/Resources/views/base.html.twig. Setting AppBundle::base.html.twig is wrong. If the template was located in a bundle (i.e. AppBundle - src/AppBundle), then the path would look something like
#AppBundle/base.html.twig.
I have a Symfony2 app that must serve different themes. These themes are essentially directories containing CSS files (eventually other files and minified into a single one).
In Phalcon, I could dynamically set the asset location of my assets in the controller. In Symfony, assets are explicitly defined. My current solution is as follows, but it doesn't look great. This is the HTML of my base.html.twig. I have a property theme in my entity and I define the theme object in my controller.
Basically I'm looking for the proper way to do this in Symfony. Otherwise, I'll just do it like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% if theme is defined %}
{% for asset in theme.css %}
<link rel="stylesheet" href="{{ asset.url }}"/>
{% endfor %}
{% endif %}
</head>
<body>
{% block page %}
Welcome to the default page!
{% endblock %}
{% block javascripts %}
{% if theme is defined %}
{% for asset in theme.js %}
<script src="{{ asset.url }}"></script>
{% endfor %}
{% endif %}
{% endblock %}
</body>
</html>
I think the most elegant way is to define a default theme, and put the diffrent themes into a root folder, just like this:
themes/
default/
css|js|images...
blue/
css|js|images...
yellow/
css|js|images...
then in Twig template engine, you can use it like this way:
<link rel="stylesheet" href="themes/{{ theme_name|default("default") }}/css/app.css"/>
<script src="themes/{{ theme_name|default("default") }}/js/app.js">
I have some pages in my Symfony project that needs some specific css, in general I have a general css file for font and such, but on every page I have a table that needs different formatting.
I know I can use classes for this, but it is more convenient that I just use a different css file for these pages.
Now I am using this in my twig template file:
{%block stylesheets %}
{%endblock%}
But is there a way to include a css file? I have this in my main template file:
<head>
<meta charset="utf-8">
<title>Sign in ยท Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="{{asset('bundles/loginlogin/css/socproGame.css')}}" rel="stylesheet">
{%block stylesheets %}
{%endblock%}
</head>
And if I do it like this it won't work:
{%block stylesheets %}
<link href="{{asset('bundles/loginlogin/css/specificPage.css')}}" rel="stylesheet">
{%endblock%}
Your main template should look like this
{% block stylesheets %}
{% stylesheets
'bundles/loginlogin/css/socproGame.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
And your twig which extends the main:
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'bundles/loginlogin/css/specificPage.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}