So I'm just getting started with Drupal and Drupal 8 and have a hard time understanding accessing twig content. Ideally what I would like to do is require some fields using the structured content.
When a type of structured content is used I would like to load a specific twig template and access the fields by machine readable name. This will allow me to setup template types with specific requirements for content.
I'm struggling with 2 parts and maybe what I want to do isn't possible in drupal. The first part how do I assign a page template based on structured content type?
The second issue is how do print out specific fields. I'm able to print all fields using {{page.content}} but {{page.content.field_name}} prints nothing. I'm very confused how to proceed forward. I know I can use modules and assign them to sections but for structured data types this won't allow for rigid enforcement of data collection like structured content. Some of this content flows outside a single content area so I'd really like to do it in a main layout file.
Thoughts?
For defining page template based on content type:
You can have:
page--front.html.twig - For front page
page--user.html.twig - For user page
page--youtube_videos.html.twig - For content type (here it is: youtube_videos)
For print content fields, you need to goto node.html.twig
For image field: {{ content.field_image }}
For title: {{ label }}
Tag field: {{ content.field_tags }}
Related
Using the Ghost blog routes.yaml file it is possible to use the collections block to create a custom collection made from some tag(s) and / or other data. You can also tell this collection to use a custom theme template see:
https://docs.ghost.org/tutorials/creating-content-collections/
https://docs.ghost.org/concepts/routing/#content-structure
For instance:
collections:
/example/:
permalink: /example/{slug}/
controller: channel
filter: tag:example-tag
template:
- example
All of the above works and my collection properly uses my new example theme file.
The issue is that unlike the tag page (for example-tag) my new custom collection does not have a readily documented way to work with the title etc.
It does not pull the title / meta description from the tag used to build the collection (which would be great for collections built from single tags). In an attempt to work around that I tried some {{#has}} statements but I can't figure out what context the custom route would fit into.
With the above example routes.yaml the title for the custom collection ends up as 'My Site Name (Page 1)' — and there is no Meta Description.
This issue also extends into the Open Graph data which lists an identical title as well as no description for the custom collection.
My guess is that it may be possible to use a data property attached to the routes.yaml file to achieve this (see: https://docs.ghost.org/concepts/routing/#data) but I haven't found a solution as of now.
While my initial attempts at googling for a solution came up empty, this is the best reference I have seen to the issue:
https://forum.ghost.org/t/dynamic-routing-page-post-data-context-in-default-hbs-nested-navigation-on-custom-collections/4204
https://github.com/TryGhost/Ghost/issues/10082
I found a way to work around.
You create a page called example in the Ghost Admin tool.
Customize routes (instead of collections) in the routes.yaml as following:
routes:
/example/:
controller: channel
filter: tag:example-tag
template: example
data: page.example
The page.example will use the metadata of this page in the Ghost.
This is possible only with workaround described in issue: https://github.com/TryGhost/Ghost/issues/10082
Generally do following:
create page Example (with slug example) and fill metadata title & description you want
in routes.yaml alter your collection definition /example/ add following:data: page.example to link your collection root with specified page
now in your template definition example.hbs you could use e.g. {{#page}} {{content}} {{/page}} tag to insert content from your page. You can do it also in default.hbs template which is included from your example.hbs. So replace: <title>{{meta_title}}</title> in default.hbs with following:
{{#unless page}}
<title>{{meta_title}}</title>
{{else}}
{{#page}}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}"/>
{{/page}}
{{/unless}}
This will set specific title/description for your collection root pages in general way. It is possible to generate schema.org metadata in the similar way. Unfortunately Facebook and Twitter metadata is not so simple to do because, {{ghost_head}} tag in default.hbs already inserts site metadata to this page. Last note: besides {{meta_title}} and {{meta_description}} I suppose you could use all metadata fields defined here.
In default.hbs I added the following block:
{{{ block "metaTitle"}}}
and eg. in post.hbs I filled that block as follows:
{{!< default}}
<div class="content-area">
<main class="site-main">
{{#post}}
{{#contentFor "metaTitle"}}
<title>{{title}}</title>
{{/contentFor}}
...
For other pages like page.hbs, blog.hbs, author.hbs I did the same. I think that solution is more flexible because we have more control over title value.
I'm currently working on a BigCommerce theme using their Stencil framework. It leverages Handlebars.js for some logic already and I'm trying to use it to show specific html on specific pages.
Looking at the documentation I can see there is a "pages" object and that I should be able to name or URL to do what I need to do.
I cannot figure out the syntax to get the page name or url to run the iff against. I can succesfully get it to do what I want by testing if it's a page content type, but not any of the type properties.
{{#if pages }}
... do foo here
{{/if}}
What I want to do is something like
{{#if pages.url '===' 'about' }}
... do foo here
{{/if}}
{{#if pages.url '===' 'service' }}
... do foo different here
{{/if}}
It looks like you are actually using the wrong Object Model for the data that you are trying to pull. The first word of your handlebars object should be "page" and not "pages". This will pull any content or data from the static pages that you build in the back office. (AKA the WYSIWYG)
Here is a link to the docs of the model that you want. https://stencil.bigcommerce.com/docs/page-content-object
For Example:
{{{page.title}}}
{{{page.content}}}
Note that I am using 3 handlebar on each side to escape the HTML on the WYSIWYG. Let me know if you need any other help.
I created a basic page with a NID of 176. My basic page content type contains a field called field_banner_image.
In my templates directory I created a file called page--node--176.html.twig and the template works.
I saw a few threads where you can access the node content via {{ content.field_name }}, however, my content appears to NULL every time.
I managed to output the URL of my image field via:
{{ file_url(node.field_banner_image.entity.uri.value) }}
I feel like there has to be an easier/better way of doing this. Any suggestions? Why is content null in my twig templates?
If your template is named page--node--176.html.twig, it is actually a page template overriding the base page template page.html.twig, so you will have access to all page variables but not those in your node.
Although your node type is called "page", it is still a node, and the template for it would be node--176.html.twig which overrides node.html.twig.
In your node--***.html.twig you will have access to the content variable. Let me know if you need help.
Basically I created a webform and enabled it as a block, now I want to put that block inside a specific node. I can do that by placing it in a 'content' region and defining the specific node BUT it displays at the end of the content. Now how can I move it between specific elements inside the content?
The node is using a page-type....tpl.php which is used by 5 other nodes as well so I cannot change the code.
To visualize it looks like:
[ content ]
-description text-
-list of videos-
[ end of content ]
and I need to put my webform between the text and the video list. Is there a way?
There are many roads you could take, but since you said you're considering the template file: Why not use a node-specific template, since page is a node type?
Say you're on node/123, then you could use a template named node--123.tpl.php
(see Drupal 7 Template (Theme Hook) Suggestions) and embed your block right there.
Alternatively, you could provide a reusable token in a custom module via hook_token_info and combine it with the commonly used token_filter module. But that might be over the top, if it's just one node you need to touch.
For Drupal 7 a bit of a hacky way to display the contents of a block in content would be to enable the PHP Filter module. Then edit your node and switch to the PHP code Text format and add this code
<?php
$block = module_invoke('block', 'block_view', '1');
print render($block['content']);
?>
where '1' is the block id found in the URL when you edit the block and be sure to include the PHP tags.
Also see this page https://www.drupal.org/node/26502 for more information on placing blocks.
You can use the EVA module to add the webforms in the node as a field.
You basically create a view and choose the "eva field" option then you make sure that this view selects only the webforms you want to have and relates it to the node (the EVA module documentation has much better examples than I can provide).
After you have added it as a field you can place it anywhere in the node.
There is also the Block reference module that could help you.
BACKGROUND
I have used WordPress custom post types to create a newsletter section for my website. Newsletters consist of Articles (dm_article), which are grouped by the Issues taxonomy (dm_issues).
1) I have created an index of all of my newsletter Articles. I am using a template called taxonomy-dm_issues.php to loop within a selected Issue and display each Article's title, excerpt and a link to the full content, which is managed by single-dm_article.php. This is working great.
2) I would also like to create second taxonomy-based template for Issues. This is going to act as a print-friendly option: "print entire newsletter". I would like the template to loop through and display each Article title, excerpt, and long description. Some of the look and feel will also be different.
For #2, let's assume I've created a template called print-dm_issues.php. It currently looks identical to taxonomy-dm_issues.php, except it has the additional long description data for each Article and contains some different styling.
I want to setup this "print friendly" option without making the WordPress admin have to jump through any hoops when Issues and Articles are created. I also do not want to have to create a new template each time a new Issue is created.
CORE QUESTION:
What I am asking for may boil down to this: How can I create my own WordPress template outside of the expected hierarchy of templates and feed a query to it? Do note I am using the "month and name" common permalink structure, so I'll have to muck with my htaccess.
ALTERNATIVES:
1) My fallback is to have taxonomy-dm_issues.php contain the information for both variations and use style to handle the different view states. I know how to do this. But, I'd rather not do this for sake of load times.
2) Using Ajax to fetch all of the Article long descriptions (the_content()) with a single click is an option, but I don't know how.
3) ???
With or without clean URLs, you can pass variables based on your taxonomies through the links query string if you want to only return a single taxonomy term and style the page differently depending on the term.
$taxonomyTerm = $_GET['dm_issues'];
$args=array(
'post_type' => 'dm_article',
'dm_issues' => $taxonomyTerm,
'post_status' => 'publish',
);
There is reference to this int he Wordpress 'query_posts' documentation by passing variable into your query parameters: http://codex.wordpress.org/Function_Reference/query_posts#Example_4
For instance in the link below, the title is generated based on the sting in the URL.
http://lph.biz/areas-we-serve/service-region/?region=Conestoga
You can set up a parameter that will return a default value if the page is reached without the variable being defined. See below:
if (empty($taxonomyTerm)) {
$taxonomyTerm = 'Default Value';
}
You can create a separate page template. Define the template name at the top of your PHP document:
<?php
/*
Template Name: Printed Page Template
*/
Place your custom query, including all of the content that you need output in this page template... In your WP admin, create a new blank page and assign your new 'Printed Page Template' template to this page. Save it and view the page.