NetlifyCMS Unable to select multiple images using Uploadcare "image" widget - netlify-cms

Here is the relevant portion of my config.yml for NetlifyCMS where I want to use Uploadcare's image widget to select multiple images for a gallery:
media_library:
name: uploadcare
config:
publickey: mypublicapikey
media_folder: "/src/images/"
public_folder: "/src/images/"
collections:
- label: "Projects"
name: "projects"
folder: "src/data/projects"
media_folder: 'images'
media_library:
name: uploadcare
config:
publickey: mypublicapikey
fields: # The fields for each document, usually in front matter
- {label: "Image", name: "image", widget: "image", allow_multiple: false}
- label: "Gallery Images"
name: "images"
widget: "image"
options:
media_library:
config:
multiple: true
previewStep: false
This results in a widget where I can only select one image. I have tried shift/ctrl/ctrl+shift clicking additional entries but it doesn't work. The docs say allowing for multiple images is the default, but this is not the behavior I am experiencing.

To get Uploadcare working, you may need to install the uploadcare plugin for netlify-cms:
npm i netlify-cms-media-library-uploadcare --save
I followed the solution posted here, to break it down:
Create a cms folder in src
Add a cms.js file to the src/cms folder
Add this code:
import CMS from 'netlify-cms-app'
import uploadcare from 'netlify-cms-media-library-uploadcare';
CMS.registerMediaLibrary(uploadcare);
Then follow the docs for Uploadcare.

Related

Netlify CMS collection only visible locally

I have several collections with my Netlify CMS site, all worked fine, but needed to add a new one which is not working on the live site.
I’ve added a new collection to the config file, which works flawlessly in a local environment (I can see the content of the folder referenced in the CMS, all entries are editable, I can create new ones or delete them) but this new collection shows up empty in the live environment - no entries are visible in the live CMS.
I got no error in the console, no build errors either.
I’ve tried to create an entry on the live site, which shows up in the CMS, but not on the site itself, and when I pull it, the newly created page/.md is not getting added to the folder where the other entries are - cannot be found locally.
The site itself displays the content of the folder - all articles show up on the site that were visible in the local CMS environment.
The newly created collection is a copy of a working one (tried it multiple times with different naming) and no matter how I renamed it, each try produced the same result - shows up locally, not in the live CMS.
Any ideas what should I do to display the content of the folder in the live CMS?
a trimmed version of the config file:
backend:
name: git-gateway
branch: main
media_folder: "public/logos"
public_folder: "/logos"
logo_url: "/img/cb_logo.svg"
local_backend: true
collections:
- name: "review"
editor:
preview: false
label: "Reviews"
folder: "src/review"
create: true
slug: "{{slug}}"
fields:
- {label: "Page Title", name: "pagetitle", widget: "string", hint: "Displayed in browser tabs", default: "placeholder text" }
- {label: "Page meta description", name: "pagemeta", widget: "string", required: false }
- name: "article"
editor:
preview: false
label: "Articles"
folder: "src/article"
create: true
slug: "{{slug}}"
fields:
- {label: "Title for Page URL", name: "title", widget: "string", default: "url-friendly-text" }
- {label: "Page Title", name: "pagetitle", widget: "string", default: "placeholder text" }
"Articles" is the one that shows as an empty collection on the live site.
The project folder structure:
src/
_data/
_includes/
assets/
article/
review/

Nuxt static pages with Strapi i18n and dynamic deep routes mixes up components

I use Strapi with Nuxt and i18n to produce a static site in English and Danish.
The site should be able to produce URLs like these:
mysite.com/
mysite.com/da
mysite.com/news/a-story
mysite.com/da/nyheder/en-historie
mysite.com/cases/a-case
mysite.com/da/case/en-case
I have a pages folder structure like this
_cases
_slug.vue <-- for case pages
_news
_slug.vue <-- for news pages
_slug.vue <-- for other pages
index.vue <-- for my frontpage
I use the following code to list links for nice URLs that renders just fine
h2 case
router-link(:to="localePath({ name: 'cases-slug', params: { cases: $t('slugs.cases'), slug: aCasePage.slug }})") {{aCasePage.title}}
h2 news
router-link(:to="localePath({ name: 'news-slug', params: { news: $t('slugs.news'), slug: aNewsPage.slug }})") {{aNewsPage.title}}
The problem is, that no matter if I click and go to a news page or a case page, I get served the same _cases -> _slug.vue component.
Looking into the .nuxt/router.js file, the routes seems to be generated correct:
routes: [{
path: "/da",
component: _1ea75fec,
name: "index___da"
}, {
path: "/da/:slug",
component: _2214a27c,
name: "slug___da"
}, {
path: "/da/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___da"
}, {
path: "/da/:news/:slug?",
component: _3988eeb6,
name: "news-slug___da"
}, {
path: "/",
component: _1ea75fec,
name: "index___en"
}, {
path: "/:slug",
component: _2214a27c,
name: "slug___en"
}, {
path: "/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___en"
}, {
path: "/:news/:slug?",
component: _3988eeb6,
name: "news-slug___en"
}],
How can I avoid Nuxt mixing up these routes? and the page Vue-components matched to them?
can you share you solution for the _slug pages data fetching ?
I am using findOne (slug,_locale:i18n.locale) from strapi .it's not working
so still hold on this issue

CKEditor not showing with easyadmin integration

I created a new Symfony4 project and installed EasyAdmin bundle (which works fine).
I tried to integrate CKeditor following the documentation : https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/ivoryckeditorbundle.html
Here is my easyadmin.yaml:
easy_admin:
entities:
TestPage:
class: App\Entity\TestPage
form:
fields:
- { property: 'content', type: 'fos_ckeditor', type_options: { 'config': { 'toolbar': [ { name: 'styles', items: ['Bold', 'Italic', 'BulletedList', 'Link'] } ] } }}
here my fos_ckeditor.yaml :
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
input_sync: true
default_config: base_config
configs:
base_config:
toolbar:
- { name: "styles", items: ['Bold', 'Italic', 'BulletedList', 'Link'] }
The problem is it's still the regular textarea that is showing, not the ckeditor rich text one.
I tried to clear the cache, to add "- '#FOSCKEditor/Form/ckeditor_widget.html.twig'" in twig.yaml but i still can't see the ckeditor toolbar.
Anyone has an idea on what i'm missing ?
Thanks!
vkhramtsov on git has just advised me to add the "#FOSCKEditor/Form/ckeditor_widget.html.twig" form theme to "easyadmin:design: form_theme:list" in "config/packages/easy_admin.yaml" like this:
easy_admin:
design:
form_theme: # Both themes are needed for ckeditor integration
- "#EasyAdmin/form/bootstrap_4.html.twig"
- "#FOSCKEditor/Form/ckeditor_widget.html.twig"
This solved the problem for me. I think the docs need to be updated. The place they suggest to put the form template presently (twig:form_themes) does not work.

Prestashop Child Theme

I have created a Prestashop child theme to a theme I purchased.
I can see my child theme (once enabled), but every time I visit the theme page to switch themes I get a 500 error.
The way I get around this is to change my child theme's config/theme.yml file. This is what I have normally which gives me the 500 error:
parent: parent-theme
name: My Child Theme
display_name: Child Theme
version: 1.0.0
author:
name: "Me"
email: "email#email.com"
url: "domain.com"
assets:
use_parent_assets: true
css:
all:
- id: theme-custom
path: assets/css/custom.css
media: all
priority: 1000
js:
all:
- id: theme-custom
path: assets/js/custom.js
priority: 1000
position: bottom
And this is what I need to have in the confog/theme.yml file in order to NOT get the 500 error:
parent: parent-theme
name: My Child Theme
display_name: Child Theme
version: 1.0.0
author:
name: "Me"
email: "email#email.com"
url: "domain.com"
assets:
use_parent_assets: true
What is it about the lines starting with css: and below that is causing this issue? Does the – id: need to be a reference to something above it, or has to be theme-custom?
Any good tutorials / reference out there that you guys can point me to, to create a child theme the right way?
My Prestashop version is 1.7.3
Thanks.
You can read the complete guide how to achieve this on: https://devdocs.prestashop.com/1.7/themes/reference/template-inheritance/parent-child-feature/
But the code you will need use in the theme.yml file to use your custom styles/scripts files, here a complete example.
parent: classic
name: childtheme
display_name: My first child Theme
version: 1.0.0
assets:
use_parent_assets: true
css:
all:
- id: custom-lib-style
path: assets/css/custom-lib.css
js:
all:
- id: custom-lib-script
path: assets/js/custom-lib.js
PD. It's important keep the correct tabulation, otherwise could not works.

TYPO3 CKeditor not rendering javascript link

I am using TYPO3 8.7.8 and have to provide a javascript link to deactivate Google Analytics.
The link should look like this:
Deactivate Google Analytics
Unfortunately the link doesn't appear in the frontend, that means it's just a normal text inside a <p> tag. However in the backend everything is fine and it shows up as a link there...
Here is my yaml-configuration for the CKeditor:
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
allowedContent: true
linkJavaScriptLinksAllowed: true
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:my_extension/Resources/Public/Stylesheets/styles.css", "EXT:my_extension/Resources/Public/Stylesheets/fonts.css"]
resize_enabled: true
stylesSet:
# block level styles
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default', 'role': 'button', 'aria-pressed': 'true'}}
format_tags: "p;h1;h2;h3;h4;h5;pre"
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
buttons.:
link.:
queryParametersSelector.:
enabled: true
What am I missing here?
we just run into the same problem - we wrote a small linkhandler for typo3 allowing only the javascript:gaOptOut(); link.
Get it here:
https://www.infoworxx.de/download/ifx_linkhandler_googleAnalytics.zip
Sebastian
That is not a problem of ckeditor but is prohibited by TYPO3 itself to avoid security issues - XSS.
A solution I use is something like this TYPO3 force internal links to cross domain pages to use https in news so that an editor e.g. links to http://ga-output.tld and this will be replaced by the JS link.
You can add a class to your link in ckeditor using the source button (<>).
<a class="gaOptout" href="#">your linked text</a>
and now you just rewrite your function to an onclick event like this:
$('.gaOptout').on('click', function(){
your function
});
This still seems to be an issue in T3 9.5, especially with this Google OptOut Script.
Easy workaround without coding: we cut out the paragraph containing the javascript and put it in a separated html-element. Just cut it out from CKEs Source-view an paste it in a new element. To keep the article in sequence, just cut out the rest of the text an paste it in a new text-element.

Resources