I'm new to both Hugo and Netlify, so it's possible I'm simply doing this wrong.
I've successfully built and deployed a site with galleries, using Hugo, the Galleria plugin, and deploying to Netlify This has all worked. However, I want to try using the Netlify CMS, and am struggling to set it up to handle the gallery feature (it's doing fine for just writing a text post)
I'm not sure if this is a limitation of Netlify CMS, or if I'm doing galleries in a way that isn't suited to static sites.
To implement the gallery in Hugo, I am doing the following in the front matter of each post:
+++
date = "2017-02-13T23:17:09+01:00"
summary = "In which I fail to RTFM, visit a Lamasery, and eat a lot of fruit."
tags = []
title = "China 2017: Day 11"
[[galleria]]
imgSrc = "../images/china/11/Lama-Temple.JPG"
imgTitle = "Hall In The Lama Temple"
imgDesc = "One of the main halls of the Lama Temple."
[[galleria]]
imgSrc = "../images/china/11/Octagonal-Hall.JPG"
imgTitle = "Octagonal Hall"
imgDesc = "An octagonal building just inside the entrance of the Lama Temple"
.
.
.
+++
Then in the layout page:
{{ if isset .Params "galleria" }}
<div class="galleria">
{{ range .Params.galleria}}
<img src="{{ .imgSrc }}" alt="{{ .imgTitle }}" data-title="{{ .imgTitle }}" data-description="{{ .imgDesc }}">
{{ end }}
</div>
{{ end }}
The on the Netlify CMS setup I tried adding an Object widget:
- name: "galleria"
label: "Gallery"
widget: "object"
optional: true
fields:
- {label: "Title", name: "imgTitle", widget: "string"}
- {label: "Gallery Image", name: "imgSrc", widget: "image"}
- {label: "Description", name: "imgDesc", widget: "string"}
I'm left with two problems:
(i) The object shows up, but of course only once. How would I set it up to allow me to enter as many images as I want?
(ii) On build, I'm getting an error: ERROR 2017/05/28 22:37:20 Error while rendering "page": template: _default/single.html:23:15: executing "_default/single.html" at <.imgSrc>: can't evaluate field imgSrc in type interface {}
So it seems I'm doing something wrong even trying to get one image (and associated data) in to a post.
Putting this here in case other people get stuck on this.
After asking around, and thanks to the lovely people in the Netlify Gitter channel:
I should have used a list widget, rather than an object. The YAML now looks like this:
- name: "galleria"
label: "Gallery"
widget: "list"
optional: true
fields:
- {label: "Title", name: "imgTitle", widget: "string"}
- {label: "Gallery Image", name: "imgSrc", widget: "image"}
- {label: "Description", name: "imgDesc", widget: "string"}
This has removed the build error, and provides me a widget in the CMS editor where I can add as many (or few) images as I wish.
I have now hit a follow up problem, where posts created with the CMS are created correctly, appear in the right folders in the repo, but 404 . . .
Related
Is it possible to define static meta data for each route in nuxt.config.js?
Suppose there is the following folder structure:
- pages
- examplepage.vue
- loremipsumpage.vue
- index.vue
the following is configured in nuxt.config.js:
head: {
title: 'Hi, I should only be displayed if nothing else is defined!',
meta: [
{ hid: 'description', name: 'description', content: 'Hi, I should only be displayed if nothing else is defined!' },
]
},
the following is configured in examplepage.vue:
head() {
return {
title: "Examplepage",
meta: [
{ hid: 'description', name: 'description', content: 'I wanna be placed in the generated html' },
]
}
},
And yes I know, that works in principle. When calling the page, the title and the meta tags are adjusted by the javascript. But not when generating my static examplepage/index.html file.
The following head is still generated there (dist/examplepage/index.html):
<head>
<title>Hi, I should only be displayed if nothing else is defined!</title>
<meta data-n-head="1" data-hid="description" name="description" content="Hi, I should only be displayed if nothing else is defined!">
.....
Is there a possibility to define fixed meta tags for certain routes which will be considered when generating the static html files? The data is not even dynamic. I only want to define static meta values for static routes.
Important notice:
I know that SSR would solve my problem.
But i would like to continue to run the site as SPA.
I have already tried various configurations in nuxt.config.js. However, all without success. In the Nuxt documentation I have also not found.
I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...
i defined custom entity and defined field_ui_base_route in annotation to activate field ui .
the problem is the field ui tabs don't appear on base route page but only after visiting them manually in address bar .
field_ui_base_route is portal_admin.office_overview
portal_admin.office_overview:
path: '/admin/portal/org/office'
defaults:
_title: 'Portal organization'
_entity_list: 'portal_office'
requirements:
_permission: 'administer portal'
in links.task.yml i have default task :
portal_admin.office_overview:
route_name: portal_admin.office_overview
title: Overview
base_route: portal_admin.office_overview
when i manually visit /admin/portal/org/office/fields i do see all tabs .
but when clicking main tab Overview the tabs don't appear .
strangely when i do striped down example not related to entities and field ui the tabs do work :
mod1.page5:
title: 'Main'
route_name: mod1.page5
base_route: mod1.page5
mod1.page51:
title: 'sub1'
route_name: mod1.page51
base_route: mod1.page5
mod1.page52:
title: 'sub2'
route_name: mod1.page52
base_route: mod1.page5
problem fixed .
i defined the entity routes to be generated automatically using AdminHtmlRouteProvider
but also defined the path for entity.portal_office.collection manually as route portal_admin.office_overview
so this is why the route portal_admin.office_overview has local task while the route entity.portal_office.collection did not and the tabs did not appear because the route entity.portal_office.collection prevailed over portal_admin.office_overview .
With Meteor 1.0.3.1 and Iron Router, I need to set the title dynamically for some pages, while defaulting to a certain title for other pages, using Manuel Schoebel's SEO package. How can I accomplish setting a dynamic page title for a certain route?
I've set SEO up generally like this:
Meteor.startup(->
[...]
SEO.config({
title: 'MusitechHub'
meta: {
'description': 'The hub for finding and publishing music technology projects'
}
})
undefined
)
As stated in the package README, you can use an iron:router onAfterAction hook to dynamically set the title to whatever computed value you want :
Router.route("/post/:slug", {
onAfterAction: function() {
var post = Posts.findOne({
slug: this.params.slug
});
SEO.set({
title: post.title
});
}
});
In the schema declaration I have:
CollectionName.attachSchema(new SimpleSchema({
issue: {
type: String,
label: "Describe the issue you noticed",
max:256
},
location: {
label: "Place a marker on your approximate location",
type: String,
autoform: {
type: 'map',
afFieldInput: {
type: 'map',
autolocate: true,
zoom:16
}
}
}
I'd like to allow a user to take a picture on this insert form
{{> quickForm collection="CollectionName" id="inserttoCollection" type="insert"}}
I'd like to be able to let an individual not only document the location of an issue but take a picture of what issue was noticed.
My question: How do I set up a field properly so that it allows a user to take and upload a photo.
This is one of the areas where Meteor shines - isomorphic APIs that work across desktop and mobile browsers.
You'll want to meteor add mdg:camera, add a button to your form, and set its click handler to run MeteorCamera.getPicture().
Read more at https://github.com/meteor/mobile-packages/tree/master/packages/mdg:camera