I'm working on a blog for a friend of mine who wants to put a meme picture at the bottom of the index page.
So the simplest way is to edit the template and reference it from there.
The problem is, it's not user friendly to keep editing and uploading a new template.
So I had this idea that I could create a static page and place it on that page and reference it from the template. But I see that when you upload an image to ghost.io it generates a name based on the date path. That's not going to work for a fixed URL in the template.
Another option might be to use the tags. As tags allows you to put a picture and has a URL. But I tried that it also has similar problems.
How can I make this work nicely?
Don't reference image URL in your theme. Reference page slug and load its content, which would be just an image.
Example with Ghost Handlebars API:
{{!-- If a static page "meme" exists - its content will be loaded here --}}
{{#get "posts" slug="meme" }}
{{#foreach posts}}
<div>
{{content}}
</div>
{{/foreach}}
{{/get}}
Related
I am creating a Ghost Theme and I want to have my index.hbs show the featured post as the page. I have tried a range of things but nothing seems to work:
index.hbs
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The main content area --}}
<main>
{{#foreach posts}}
{{#has featured="true"}}
{{post}}
{{/has}}
{{/foreach}}
</main>
I think the best way to achieve having a featured post as the main page would be to use Dynamic Routing and route / to the post or page with featured flag. Alternatively, you could fetch and display the featured post using the {{get}} query described here.
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 made a navigational bar at the left side of my blog and I wanted to add the list of pages that the user created into that navigational element. The problem is that I do not know how to loop through static pages. When looping through normal posts all users approach this method:
{{#foreach posts}}
....
....
....
{{/foreach}}
The above code is to loop through each post that exists and then the user has the choice to put whatever they want inside that piece of code. The problem is now looping through each static page.
Can anyone show me how to loop through static pages?
At this time, it is currently not possible to loop through static pages :(
That will prob come out when Apps do (aka someone will make an app for it)
I was searching for just this today and found a solution on this Github issue
{{#get "posts" filter="featured:true+page:true"}}
{{#foreach posts}}
... do something with all featured pages...
{{/foreach}}
{{/get}}
I just verified this locally.
i'm using the twentytwelve theme and i have to write custom content into my example template.
I want to maintain my header content so the main structure is the following
header = id page, wrapper
ex.page = primary, content
footer = close wrapper, close id page
If i have understood correctly, if i want to insert content into the middle of my page i have to do it into my template page (that is a copy of the main page.php), that is in the middle between my header and my footer
For example i want to insert a div into which insert the loop of such category.
The problem is that it displays me nothing, like i've wrote nothing. I can only see the contents if i erase all the originary div, but it's not what i want to do, just because the only div is the page which is my container.
I can't catch what i have to do.
Can you tell me what i forgot to do?
Thanks,
Alex
page.php is a "master" document. header.php, footer.php and (if it exists) sidebar.php are all imported into page.php. Twenty Twelve also uses atomized content templates. You may need to add your div to content-page.php, which is also imported into page.php. content-page.php is used inside the wordpress loop, and encapsulates the code that pulls in the actual article elements from the wordpress database.
If you are trying to add straight HTML to the templates, ensure that you are not adding code between the php brackets:
<?php // don't add html here ?>
<div>do add html here</div>
Depending upon the type of wordpress page you are trying to display, you may need to consult the Wordpress Template hierarchy to determine the proper Wordpress naming convention for your template file (the copy of page.php).
Technically speaking, everything in content-page.php can be put into page.php replacing the get_template_part function. All the 'content' pages are totally not required and can be combined into one file if you want simplicity.
In my opinion, it's easier to start from scratch when learning Wordpress rather than try and re-work something. The default wordpress themes don't lend themselves to be beginner friendly.
I have a drupal website. I want to generate an Iframe with content from my drupal site, that other sites can embed.
How I think this can be achieved:
Method 1: Create a php script that is autonomous from the drupal engine.
Import the configuration file and hence gain access to the database. Generate the content as a standalone webpage. Distribute the url of this script as the iframe's source url.
Problems: cannot provide drupal functionality within the iframe such as interaction with logged in user.
Method 2: Create the iframe from within drupal.
Create a new module that defines a menu entry using hoom_menu (the url for the iframe). Define the content of the iframe from the callback function of the menu entry. Then Somehow assign a custom page.tpl.php theme for the desired iframe url so that only the content of the iframe is rendered without all the other page elements (blocks, menus, footer, etc.).
Any comments especially for method 2 will be greatly appreciated! :)
I have done exactly this, just this week!
I created a custom module that outputs only the content that I want (using hook_menu()). Then I created a page template (page-mycustommodule.tpl.php) that only has
<?php print $content; ?>
within the <body> tags.
That was basically all. To find out the name that your page template needs to have, use the devel and theme_devel modules, then just click on your page and it will tell you which templates it looked for.
One thing to look out for: any links in the iframe will only change the contents OF THAT FRAME, so when your module creates links, use the proper target to make the parent page jump to the new URL:
l('link text',
'node/' . $mynode->nid,
array('attributes' => array('target' => '_parent')));
I found the answer by Graham very useful. Unfortunately I don't have enough reputation on this site to add a comment so I will have to put my comment in an answer.
5 years on, the information has changed slightly:
The module theme_devel now seems to be called devel_themer instead.
In D7, the template naming pattern is slightly different with 2
hyphens: page--[front|internal/path].tpl.php (see docs)
D7 templates are slightly different based on render arrays, so the template will need to be something like print render($page['content']);
method 3
you can use this module https://www.drupal.org/project/entity_iframe that allows you to create IFRAME READY webpages
install it and go to the display settings of you content type that you want to use as iframe content admin/structure/types/manage/CONTENTTYPE/display
choose the IFRAME view mode and choose the fields you would like to be shown
and then use url like this domain.com/entity_iframe/node/NID and you will have a display with no extra headers footers etc ...
By default a sample EMBED/IFRAME code is provided to the admin under each node the settings
<iframe width="100%" height="300" src="domain.com/entity_iframe/node/96" frameborder="0" class="entity_iframe entity_iframe_node" id="entity_iframe_node_96" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
The settings in admin/config/system/entity_iframe control some of the details of the embed code
For complete control of the theme used you can use in combination with https://www.drupal.org/project/entity_iframe_theme
What do you exactly need to iframe?
A node? A block? Should it be static or dynamic?
You can simply create a node with a php filter and generate the iframe output.
Then you can put this output between <pre> tags to display it as code that users can copy/paste in their site.