Redactor inside Craft CMS is not applying format classes - redactor

I'm having trouble getting Craft 3 to apply the custom classes that I've created in my Standard.json file. I have set up the Redactor config in the Craft CP to use Standard.
My Standard.json file looks like this:
{
"buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist",
"link", "image", "video"],
"plugins": ["fullscreen", "video"],
"toolbarFixed": true,
"formattingAdd": {
"article-para": {
"title": "Article Paragraph",
"args": [
"p",
"class",
"para"
]
},
"article-heading": {
"title": "Article Heading",
"args": [
"h3",
"class",
"h2 txt-black mb"
]
}
}
}
Both Article Heading and Article Paragraph show up in my dropdown of formats, but when I select them, the elements don't change visually or in my inspector.
Any help would be appreciated.

Your json formatting appears to be off at the point that you set the args. Try this:
{
"buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist",
"link", "image", "video"],
"plugins": ["fullscreen", "video"],
"toolbarFixed": true,
"formattingAdd": {
"article-para": {
"title": "Article Paragraph",
"args": {
"tag": "p",
"class": "para"
}
},
"article-heading": {
"title": "Article Heading",
"args": {
"tag": "h3",
"class": "h2 txt-black mb"
}
}
}
}
That should do it.

Related

UgcPosts -> Posts

I've written code which work under unversioned version and it uses ugcPosts api to gets Share/UgcPosts. In response I have thumbnails like below:
UgcPosts - https://api.linkedin.com/v2/ugcPosts/{encoded ugcPostUrn|shareUrn}?viewContext=AUTHOR
{
"author": "urn:li:person:123ABC",
"contentCertificationRecord": "{\"originCountryCode\":\"us\",\"modifiedAt\":1500590592795,\"spamRestriction\":{\"classifications\":[],\"contentQualityClassifications\":[],\"systemName\":\"MACHINE_SYNC\",\"lowQuality\":false,\"contentClassificationTrackingId\":\"B6A8B437D1D5E59D123455F6DCE5B\",\"contentRelevanceClassifications\":[],\"spam\":false}}",
"created": {
"actor": "urn:li:person:123ABC",
"time": 1500590543962
},
"firstPublishedAt": 1500590592702,
"id": "urn:li:ugcPost:123456",
"lastModified": {
"actor": "urn:li:person:123ABC",
"time": 1500590592806
},
"lifecycleState": "PUBLISHED",
"**specificContent**": {
"**com.linkedin.ugc.ShareContent**": {
"**media**": [
{
"media": "urn:li:digitalmediaAsset:123ABDEFHAG",
"status": "READY",
"**thumbnails**": [/**here i can have some thumbnail **]
}
],
"shareCommentary": {
"attributes": [
{
"length": 35,
"start": 66,
"value": {
"com.linkedin.common.CompanyAttributedEntity": {
"company": "urn:li:organization:12345"
}
}
}
],
"text": "Testing a UGC Post!"
},
"shareMediaCategory": "VIDEO"
}
},
"versionTag": "2",
"visibility": {
"com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
}
}
But now after "migration" I dont see any option to get thumbnails for retriving posts ...
https://api.linkedin.com/rest/posts/{encoded ugcPostUrn|shareUrn}
and example of respone:
{
"lifecycleState": "PUBLISHED",
"lastModifiedAt": 1634790968774,
"visibility": "PUBLIC",
"publishedAt": 1634790968774,
"author": "urn:li:organization:5515715",
"distribution": {
"feedDistribution": "NONE",
"thirdPartyDistributionChannels": []
},
"content": {
"media": {
"id": "**urn:li:video:C5F10AQGKQg_6y2a4sQ**" - I can see only this, so probably I need to use VideoApi, but if there will be URN:LI:IMAGE ? Then what? How to get thumbnail for URN:LI:Image ?
}
},
"lifecycleStateInfo": {
"isEditedByAuthor": false
},
"isReshareDisabledByAuthor": false,
"createdAt": 1634790968743,
"id": "urn:li:ugcPost:6856810298419044352",
"commentary": "comment on Oct 20",
"adContext": {
"dscStatus": "ACTIVE",
"dscAdType": "VIDEO",
"isDsc": true,
"dscAdAccount": "urn:li:sponsoredAccount:520866471"
}
}
TL:DR :)
How to get thumbnail for urn:li:image ? If I get this in response content from posts, how to get this thumbnail for this type of content. For urn:li:video I guess that I can use VideoApi but for Image ?
I was looking for answer in documentation but without success.

Alexa APL. Problems getting AlexaHeader component to sit atop single Image component?

I want to have a header at the top of my Alexa Skill APL page that shows a Title and a Sub-Title. Directly below it, I want to have an image. In other words I want to have the Title and Sub-Title in a box that sits at the top of the image, occupying the top row of the screen.
The AlexaHeader component seems perfect for this. But when I use it in a container as the first child item, with the Image component next with its scale property set to best-fit, the Image component takes up the whole screen and the AlexaHeader component is behind the image, centered vertically and not at the top of the APL page. I can see it behind the image because the image does not fill the screen horizontally, only vertically.
How can I get the look I want?
Here is my APL JSON for the layout element I am working with:
"my-layout": {
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "ABC_RENDERED_DOCUMENT",
"version": "1.0",
"document": {
"type": "APL",
"version": "1.0",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"mainTemplate": {
"description": "********* Minimal APL document **********",
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"alignItems": "center",
"justifyContent": "center",
"items": [
{
"type": "AlexaHeader",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "orange",
"headerTitle": "${payload.visualProperties.title}",
"headerSubtitle":"${payload.visualProperties.subtitle}",
"headerAttributionText": "photos by Pexels.com",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true,
"headerDivider": true
},
{
"type": "Image",
"source": "${payload.visualProperties.background}",
"position": "absolute",
"width": "100vw",
"height": "100vh",
"scale": "best-fit"
}
]
}
]
}
},
"datasources": {
"visualProperties": {
"background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
"title": "",
"subtitle": ""
}
}
}
Seems you have the absolute positioning set so that the image will go on top of your header (you just need to swap the order) as well as a few other items that needs tweaking.
I might misinterpreted your requirements but below is my best guess of what you want. Let me know if you want any tweaks.
"my-layout": {
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "ABC_RENDERED_DOCUMENT",
"version": "1.0",
"document": {
"type": "APL",
"version": "1.0",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"mainTemplate": {
"description": "********* Minimal APL document **********",
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"items": [
{
"type": "AlexaHeader",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "orange",
"headerTitle": "${payload.visualProperties.title}",
"headerSubtitle": "${payload.visualProperties.subtitle}",
"headerAttributionText": "photos by Pexels.com",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true
},
{
"type": "Image",
"source": "${payload.visualProperties.background}",
"width": "100vw",
"height": "100vh",
"scale": "best-fit",
"align": "bottom"
}
]
}
]
}
},
"datasources": {
"visualProperties": {
"background": "https://m.media-amazon.com/images/G/01/alexa-games/backgrounds/memorystory-gui-1._CB473869069_.png",
"title": "Header",
"subtitle": "Header Subtitle"
}
}
}

How to get bold text in the title in CardAction

Is it possible to get bold text in the title of a CardAction() in bot framework v4? I'm using it in a HeroCard. I've tried ** Option One ** but it only works in the text of a HeroCard for example, but not in the CardAction() buttons.
Here's my implementation of CardActions in a HeroCard:
var Options = new HeroCard
{
Text = "What do you choose?",
Buttons = new List<CardAction>
{
new CardAction() { Title = "Option One, Type = ActionTypes.ImBack, Value = ""Option One" },
new CardAction() { Title = "Go back", Type = ActionTypes.ImBack, Value = "Go back" },
},
};
You can't. It's up to each channel to determine how to display cards.
Alternatively, you can try using an Adaptive Card with something like the following JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "What do you choose?"
},
{
"type": "Container",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Option One",
"weight": "Bolder",
"horizontalAlignment": "Center",
"size": "Large",
"color": "Accent"
}
],
"selectAction": {
"type": "Action.Submit"
},
"id": "optionOne",
"style": "default"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Go back",
"horizontalAlignment": "Center",
"size": "Large",
"weight": "Bolder",
"color": "Accent"
}
],
"selectAction": {
"type": "Action.Submit",
"data": "goBack"
},
"id": "goBack",
"style": "default"
}
],
"style": "emphasis"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Again, though, it will be up to the channel for how it wants to display "weight": "Bolder"

How to create multiple tabs of forms using angular json schema form?

I have been successfully using this awesome library and concept called json schema form.
https://www.npmjs.com/package/angular2-json-schema-form
Now using the schema patterns given I am able to generate a form based on a dynamically created schema from database. I want to convert the single form in multiple tabs. I.E I want to group certain kind of fields in one panel.
Is there any kind of support for this functionality? So that I can assign the css class according to the layout.
https://angular2-json-schema-form.firebaseapp.com/?set=ng-jsf&example=ng-jsf-flex-layout&framework=material-design&language=en
You can split group of fields into separate tabs using the fieldsets property.
See the following example from README.md:
{
"properties": {
"firstName": {
"type": "string",
"description": "First name"
},
"lastName": {
"type": "string",
"description": "Last name"
},
"email": {
"type": "string",
"description": "Email"
},
"notificationsFrequency": {
"type": "string",
"description": "Notifications frequency",
"widget": "select",
"oneOf": [
{
"description": "Daily",
"enum": [
"daily"
]
},
{
"description": "Weekly",
"enum": [
"weekly"
]
},
{
"description": "Monthly",
"enum": [
"monthly"
]
}
],
"default": "daily"
}
},
"fieldsets": [
{
"title": "Personal information",
"fields": [
"firstName",
"lastName",
"email"
]
},
{
"title": "Account settings",
"fields": [
"notificationsFrequency"
]
}
]
}

IODocs : First Object inside Array Doesn't have a tag name

I want to add a objects inside a array. I have to set a name for that object like
"identifiers": [
"IDENTIFIER": {
"primary": true
}
]
Here "IDENTIFIER" is the object name. But the first object inside array always created as a empty object like
"identifiers": [
{
"IDENTIFIER": {
"primary": true
}
}
]
I used the following JSON code in config file,
"identifiers": {
"title": "Identifiers",
"type": "array",
"location": "body",
"items": {
"title": "Identifier Fields",
"type": "object",
"properties": {
"IDENTIFIER": {
"type": "object",
"properties": {
"primary": {
"title": "primary",
"required": true,
"type": "boolean",
"description": "",
"default": true
}
}
}
}
}
}
How to achieve this. Kindly help me.
Note : I can able to do using Object inside Object. but I don't want that.
Thanks in advance.

Resources