Is there a backend widget type which allows the user to enter a text value, in the editor but not displayed in the preview to the right?
I have this configuration from the example out of the box:
- label: "Blog"
name: "blog"
folder: "_posts/blog"
create: true
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "thumbnail", widget: "image"}
- {label: "Body", name: "body", widget: "markdown"}
I do not want the publish date to show up in the preview.
Netlify CMS allows for the preview to be custom and include or exclude anything you would like in the preview. Mimic your page layout and use the style sheet from your build to give a WYSIWYG layout.
Click here for Custom Preview Template docs
You might have something like the following in your index.html in the CMS folder
<script>
var PostPreview = createClass({
render: function() {
var entry = this.props.entry;
var image = entry.getIn(['data', 'thumbnail']);
var imageContainer = (image) ? h('section', {className: "mdc-card__media", style: {backgroundImage: `url(${image})`, height: '20rem'}},) : h('div');
return h('div', {},
h('div', { className: "blog-post" },
imageContainer,
h('div', { },
h('h1', { },
h('span', { }, entry.getIn(['data', 'title']))
),
),
h('div', {className: "post-body"},
h('div', { }, this.props.widgetFor('body'))
)
)
)
}
});
CMS.registerPreviewTemplate("blog", PostPreview);
</script>
Make sure to include the script above AFTER the cms.js script link
Related
I've added individual meta to every page following the Nuxt documentation but whenever I share my links on social media, the meta just show this '## build setup'. Another issue is the same metadata is showing for every page. I read you need to put "hids" to have individual page meta but nothing seems to be working?
Index Meta:
<script>
export default {
head: {
title: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing',
meta: [
{ property: 'og:description', hid: 'og:description', name: 'og:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
{ name: 'twitter:title', hid: 'twitter:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
{ name: 'twitter:description', hid: 'twitter:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
{ name: 'twitter:card', hid: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:image:src', hid: 'twitter:image:src', content: 'https://www.animalcrossingportal.com/images/meta.jpg' },
{ property: 'og:title', hid: 'og:title', name: 'og:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
{ property: 'og:type', hid: 'og:type', content: 'website' },
{ property: 'og:site_name', hid: 'og:site_name', content: 'Animal Crossing Portal' },
{ property: 'og:url', hid: 'og:url', content: 'https://www.animalcrossingportal.com/' },
{ property: 'og:image', hid: 'og:image', content: 'https://www.animalcrossingportal.com/images/meta.jpg' }
],
link: [
{
rel: 'canonical',
href: 'https://www.animalcrossingportal.com/'
}
]
}
}
</script>
My nuxt.config.js file has:
head: {
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
The meta was actually lying inside of a README.md file, removing it from there fixed OP's issue!
I thought it was the readme file, but after a few hours of digging (issue resurfaced), turns out it was actually an empty build tag in the nuxt config file which was making Nuxt try SSR. Removing the empty tag 100% fixed it.
I was running into the same issue recently. After having a look into the source code view of the rendered page (Ctrl + U in the browser), a quick search yielded that the meta-field og:description was not populated correctly. Correction of that was straightforward.
Thus, a look on your rendered page source code might reveal the missing/wrongly populated field (e.g. "description").
I am new to netlify and netlifyCMS. Did upload a Hugo site which is working well. Now trying to implement CMS. It is a very simple site with only a few *.md content files located directly in the root of the /content folder. How do I need to configure the config.yml so that I can edit them? I did only find how to edit collections in subfolders of /content or single files.
Thank you
Best regards
I think I did find a solution. Did add every content-file as a single file.
collections: # A list of collections the CMS should be able to edit
- label: "Inhalt"
name: "inhalt"
files:
- label: "Home"
name: "home"
file: "/content/home.md"
fields: # The fields each document in this collection have
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- label: "TCM"
name: "tcm"
file: "/content/tcm.md"
fields: # The fields each document in this collection have
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- label: "Psycho"
name: "psycho"
file: "/content/psycho.md"
fields: # The fields each document in this collection have
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
I try to find answer for this question but I can't. So I have simple grid with cells editting by plugin (Ext.grid.plugin.CellEditing). So in such a case I see selected cell displayed in "bluebox".
but I dont want to see such a selection, I want to change this background. Any suggestion please.
Thank you Jadhav, and I see the second problem in this grid. I want to edit only two columns:
this numbers with gray backgruond and this checkbox. The first one is working good but this checkbox not (when I check it and go to other place checked position become unchecked) and can't set the same background as I set for column with numbers. This is done by:
renderer: function(value, meta) {
meta.style = "background-color:lightgray;";
}
This method, in checkbox column give me this:
Why and how to solve this?
OK, almost ok because of your help but when I change background via css I see the following result (summary row is also, partly in background color') and still don't know why and how to correct it:
You can implement using css for selected cell in CellEditing.
In this Fiddle, I have created a demo using CellEditing plugin.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'demostore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Demo Data',
store: 'demostore',
cls:'my-grid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
renderTo: Ext.getBody()
});
}
});
CSS
<style>
.my-grid .x-grid-cell-selected{
background-color: transparent !important;
}
</style>
One more way you also done using on cell editor component blur event. You need to do put this below code
var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)
Just you have to overwrite inline css, so that you can change background color i.e..,
.x-grid-row-selected .x-grid-td {
background: #ffffff;
}
I'm trying to get my head round using Netlify CMS with Hugo ssg.
I use:
netlify-cms#1.0
hugo#0.29
I have a simple netlify-cms config.yml with two collections: posts and authors.
backend:
name: github
repo: sebhewelt/atlas
branch: master
display_url: https://mypage.com
publish_mode: editorial_workflow
media_folder: "static/uploads"
public_folder: "/uploads"
collections:
- label: "Posts"
name: "post"
folder: "content"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- { label: "Title", name: "title", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" , format: "YYYY-MM-DD hh:mma"}
- { label: "Body", name: "body", widget: "markdown" }
- label: "Authors"
name: "author"
folder: "data"
create: true
fields:
- {label: "Name", name: "name", widget: "string"}
- {label: "About", name: "about", widget: "string"}
The docs distinguish two collection types, of which I assume i should choose file collection, as I'd like to hold the authors data in one file.
I'd like to be able to add authors via admin dashboard and save it to file in data folder. The docs doesn't provide an example of how should the file holding the authors look like (Or does the cms make it automatically?).
I encounter an error with my current config. When I'm saving the "New Author" i get this:
Failed to persist entry: Error: Collection must have a field name that
is a valid entry identifier
Why do i get this error?
Your authors file needs to be under a top-level collection. Also, if you want to be able to add multiple authors to the file, you need to wrap the "name" and "about" widgets in a "list" type widget.
Example:
collections:
- label: "Settings"
name: "settings"
files:
- name: "authors"
label: "Authors"
file: "data/authors.yml"
extension: "yml"
fields:
- label: "Author"
name: "author"
widget: "list"
fields:
- {label: "Name", name: "name", widget: "string"}
- {label: "About", name: "about", widget: "string"}
CMS docs for file collections: https://www.netlifycms.org/docs/collection-types/#file-collections
CMS docs for list widgets: https://www.netlifycms.org/docs/widgets/#list
I try to configure CKEDITOR in Oracle Framework "Endeca v 11.1.0" but something is wrong.
I can only configure toobar like this :
[
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
];
and i cannot configure styles like i want.
By default i have sur styles of ckeditor and it is normal. i have not set a good style.js with good configuration.
I want to configure specific style and i have read somes documentation like this : http://docs.ckeditor.com/#!/guide/dev_styles
but how can i do that in my configuration :
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);
How can i set specific style in toolbar configuration only ??
Thx for help
I'm going to give advice that you might not find helpful :) Instead of creating a custom editor for use within Experience Manager (and then having to maintain that during upgrades, etc), it might be better instead to give them an editor UI completely separate from XM. Then, when they have their nice HTML to copy and paste it into XM.
Another idea: Instead of creating a Flex editor directly (like what you're doing), create a light-weight Flex editor that launches a popup window (where that would be a webapp hosted outside of XM directly). Then have that popup window return a block of HMTL as text. This would allow you to create a fancy editor but not be constrained by Flex.
I can't share a full code example for my second recommendation, but in Flex you can open a popup windoww by doing:
ExternalInterface.call("window.open",
popupUrl, "Select Value",
"menubar=1,resizeable=1,width=1000,height=800,location=yes,menubar=yes,scrollbars=1,toolbar=1");
... where popupUrl would be the URL of your exteranl web app.
Then, in the webapp, when you want to pass back a value, you can do:
windowOpener = window.opener.document.xmgrSwfElement;
windowOpener.selectValue(path);
window.close();
In 11.1, configuration file location of CK Editor has been changed. It is moved inside a .jar. Check ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\25\richTextEditor-11.1.0.jar file for build-config.js
Thx for your answer.
My action :
extract war file "ifcr-11.1.0.war" in
"/ToolsAndFrameworks/11.1.0/server/webapps/ifcr-11.1.0.war"
extract "richTextEditor-11.1.0.jar" in "icfr-11.1.0/WEB-INF/resources/bundles/25"
make modification on file "richTextEditor-11.1.0/content/ckeditor_4.3.3_full/ckeditor/style.js" for my specific style.
I have open build-config.js but i can't see config for styles.
i have rebuild package richTextEditor-11.1.0.jar and ifcr-11.1.0.war and restart tomcat and i can't see modification on ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\25\richTextEditor-11.1.0.jar.
i have try to delete all files and folder on ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup* and restart tomcat for deploying artifact and other but my folder "ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\" is empty.
A crazy thing is my webapp run with succes without this folder and files.
are there a cache or other ?