So, from ACF I have created my own SEO fields in my custom WP theme, so I don't have to rely on a plugin, and I want to have the default values already filled out, so we don't always have be doing that unless for something specific - how do I out put those unto my page and insert them in the header at the same time? I have tried {{post.meta_description|raw}} and {{ function('wp_head') }} timber but it just prints it on the page, what am I missing?
Another great {{ post.tool_brand }} {{ post.tool.type}}
for sale, {{ post.power_type }} of power with a
competitive price {{ post. tool_price }}!
{% extends "base.twig" %}
{% block content %}
<div class="container my-4">
<head>
{{post.meta_description|raw}}
{{ function('wp_head') }}
</head>
</div>
{% endblock %}
This here seems to do exactly what I wanted it to do: {{ include(template_from_string(post.meta_description)) }}
ie: <meta name="description" content="{{ include(template_from_string(post.meta_description)) }}">
Related
I am simply trying to add a bootstrap.min.css file with its corresponding bootstrap.min.js file to an Apostrophe CMS project. I have no idea how to simply add a static resource. I have the following in my app.js
'apostrophe-assets': {
stylesheets: [
{
name: 'bootstrap.min',
minify: false
},
{
name: 'site'
}
],
scripts: [
{
name: 'bootstrap.min',
minify: false
}
]
}
but alas, it does nothing. I have removed the .min versions as well and tried those, still nothing.
On that note, I need to be able to link to a .png that will be used in my navbar, but I have no idea where to store any static resources for the website.
Is there a place I can just drop static files that I don't want pushed as apostrophe-assets so they are rendered and consumed properly?
I am the lead developer of Apostrophe at P'unk Avenue.
For this to work, Apostrophe needs the files to be located at:
lib/modules/apostrophe-assets/public/css/bootstrap.min.css
And:
lib/modules/apostrophe-assets/public/js/bootstrap.min.js
Within your project (don't copy them into node_modules). You create your own lib/modules/apostrophe-assets folder within your own project, to parallel the one in the apostrophe npm module.
This is as documented here in the tutorials on pushing assets.
(If you have trouble pushing the CSS file, try renaming it with a .less extension and let me know you had to do that. It ought to be unnecessary though.)
Of course there is also nothing keeping you from overriding any of the blocks in outerLayoutBase.html in your own templates to insert script and link tags, but that shouldn't be necessary. If you follow the practice I'm recommending your files will minify with everything else in production.
I've used the apostrophe-assets module to push css and js files the same approach as provided by #boutell. For pushing js files it's ok, but for css I've got a parse error related to bootstrap css. So it's because the apostrophe tries to compile it into css whereas it is already css.
To solve this problem I've override the outerLayot.html Nunjucks template. So basically in the file
node_modules/lib/modules/apostrohpe-templates/views/outerLayout.html, we have:
{% extends "outerLayoutBase.html" %}
Which itself extends the outerLayoutBase.html
node_modules/lib/modules/apostrohpe-templates/views/outerLayoutBase.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
{{ apos.assets.stylesheets(data.when) }}
{% block standardHead %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
{% block extraHead %}
{% endblock %}
</head>
<body class="{% block bodyClass %}{% endblock %}">
{% block apostropheMenu %}
{{ apos.adminBar.output() }}
{% endblock %}
{% if data.user %}
<div class="apos-ui">
<div class="apos-context-menu-container">
{{ apos.pages.publishMenu({ publishMenu: data.publishMenu, page: data.page, piece: data.piece, bottom: true }) }}
{{ apos.pages.menu({ contextMenu: data.contextMenu, page: data.page, bottom: true })}}
</div>
</div>
{% endif %}
<div class="apos-refreshable" data-apos-refreshable>
{% block beforeMain %}{% endblock %}
<a name="main"></a>
{% block main %}{% endblock %}
{% block afterMain %}{% endblock %}
</div>
{{ apos.assets.templates(data.when) }}
{{ apos.assets.scripts(data.when) }}
<script type="text/javascript">
{{ data.js.globalCalls }}
{{ data.js.reqCalls }}
</script>
{% block extraBody %}
{% endblock %}
</body>
</html>
Here I have used {% block extraHead %}{% endblock %} block and overrided it into a new file which is:
/lib/modules/apostrohpe-templates/views/outerLayout.html
{% extends "outerLayoutBase.html" %}
{% block extraHead %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{% endblock %}
In the above file is included CDN of bootstrap css and works as expected. Note the path of this new file. The lib folder is under the root folder not the node_modules.
I have a problem with the following use case: I render a controller in a twig template where I have a navigation div with two links in it. In the middle of my page I have a div in which I would like to render the result of another controller. The decision which controllers twig should render is up to the click on the menu links. I hope the following code makes clear, what I mean:
{% extends 'base.html.twig' %}
{% block scripts %}
{{ parent() }}
<script type="text/javascript">
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu {margin-bottom: 10px !important;}
</style>
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('css/sstm_style.css') }}" rel="stylesheet" />
{% endblock %}
{% block body %}
{{ parent() }}
<div id="module_title"><h1>Lizenznehmer-Stammdaten</h1></div>
<nav>
<h5>Was möchten Sie tun?</h5>
<ul id="menu">
<li>Lizenznehmer anlegen</li>
<li>Lizenznehmer bearbeiten</li>
</ul>
</nav>
<div id="main">
{# fill div with either CreateLicenseController or ChangeLicenseController #}
</div>
{% endblock %}
I know of the embed tag which renders a controller in a block of another controllers twig but I don't know how to tell twig at runtime which controller should be rendered
You mean to generate controller by ajax request? Or you know which controller you need when rendering?
If the last one, you can use if:
{% if needCreate %}
{{ render(controller('YourBundle:YourController:CreateLicenseController') }}
{% else %}
{{ render(controller('YourBundle:YourController:ChangeController') }}
{% endif %}
If you want load it by ajax, you shall make it in javascript, not in twig.
I'm using the Grav CMS to create a modular web page; however, I'm having difficulty customizing the layout based on how the content is generated.
I've followed the documentation found Grav main site from which I've model my site after.
My folder structure is essentially:
pages
01.home
_section1
_section2
In each section folder I have my .md file. And each section is considered a sub-page of 'home'.
I've created the template file, modular.html.twig, in which I have the following code:
{% extends 'partials/base.html.twig' %}
{% block content %}
{% for child in page.children() %}
{{ child.content() }}
{% endfor %}
{% endblock %}
This code iterates through sub-pages to load the content onto the home page. In my template I'm simply printing the result of the content using {{ content }}
What I end up with is a page with vertically stacked content and repeating html,
as such.
What I want to do is uniquely define each sub-page (section) so that I can manipulate the content differently in my html, as such.
I've thought about creating separate template files for each section, but much of my content is nested.
For instance I have something akin to:
<div class="row">
<div class="section-1">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
<div class="section-2">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
</div>
Is it possible to accomplish what I'm trying to do with this framework? If so, how might I go about it?
Thank you
I think there are many ways to do this. For me, I use page's header to set CSS class of each section.
My section's md files could look like this (for example mysection.md)
---
title: Section 1
section_class: section-1
---
This is the content of section 1.
Here is my modular.html.twig:
{% extends 'partials/base.html.twig' %}
{% block content %}
<div class="row">
{% for child in page.children() %}
<div class="{{ child.header.section_class }}">
{{ child.content() }}
</div>
{% endfor %}
</div>
{% endblock %}
In my mysection.html.twig I print the section's content
<h1>{{ page.content }}</h1>
I hope this helps.
I have this simple form where I need a custom template for a field to render something right next to the <input> tag. Since I won't be needing this anywhere else, I thought I'd put it right in the same template as the form like suggested here:
{% form_theme form _self %}
{% block text_widget %}
{{ block('form_widget_simple') }}
something
{% endblock %}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
That's pretty much the whole template (to be used with ajax, hence no surrounding markup).
The issue now is, "something" gets rendered right at the beginning of the output where the block text_widget is declared, as would any other block. Its rendered fine in the form next to the <input>:
something
<form name="form" method="post" action="">
<table id="form"><tr>
<td> <label for="form_Search" class="required">Search</label></td>
<td> <input type="text" id="form_Search" name="form[Search]" required="required" autofocus="autofocus" />
something
</td>
</tr><tr style="display: none">
<td colspan="2"><input type="hidden" id="form__token" name="form[_token]" value="dUwdoiz9vo1TJTRjvyUcz9Rwd-D7pTvqUH-R0zCtg28" /></td>
</tr></table>
</form>
This obviously makes inline theming completely unusable, so I think I might be doing something wrong...
How do I get rid of that extra "something" at the beginning?
Having the question already written up and also solved the problem, I might as well answer:
The solution is to derive the template from a dummy base template to swallow any output that's outside of blocks defined in the base template:
{# empty.html.twig #}
{% block content %}
{% endblock %}
And for the actually needed template:
{% extends 'empty.html.twig' %}
{% form_theme form _self %}
{% block text_widget %}
{{ block('form_widget_simple') }}
something
{% endblock %}
{% block content %}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
{% endblock %}
One probably wouldn't think twice about it when customizing a field in a regular template that already uses inheritance, but this way it feels like a hack...
I'm using Jekyll for a static site and I'm trying to generate the blog as a subdirectory/subfolder:
http://example.com/blog
In the directory structure before running jekyll, this is blog/index.html.
I tried adding pagination by adding "paginate: 5" to _config.yml, but the generated url's were of the form:
http://example.com/page2/
i.e. no "/blog". This is fixed by:
paginate_path: /blog/page/:num
in _config.yml.
But the resulting generated pages at:
http://example.com/blog/page/2/
don't use blog/index.html as their layout. They use the root index.html. What's the point in even having the paginate_path option, then?
How do I get my blog at example.com/blog, with pagination, using Jekyll?
Use the destination key in your _config.yml file to set the base path where you want the output to be published to. For example,
paginate: 5
destination: _site/blog
Note that assuming your site is setup to server its root (e.g. "http://example.com/") from "_site" jekyll won't produce and "index.html" page at that location. Everything that jekyll builds will be under the "blog" directory, but that sounds like what you are after.
I found a fix via this page Basically it involves a bit of a hack to figure out if you are on the nth page of the blog and then includes a file that pulls in you blog section.
Create a file in _includes/custom/ called pagination. In that have your pagination code
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
Now in your _layout/index.html add
{% if paginator.page != 1 %}
{% include custom/pagination %}
{% else %}
The original content of index
{% endif %}