Create flexible and structured content

Thrural · August 16, 2022, 8:12am

I have…

[x] Read the following guideline: https://docs.squidex.io/01-getting-started/installation/troubleshooting-and-support. I understand that my support request might get deleted if I do not follow the guideline.

I’m submitting a…

[ ] Regression (a behavior that stopped working in a new release)
[ ] Bug report
[x] Performance issue
[ ] Documentation issue or request

Current behavior

I’ve created the schema “product-description” with the field of type “String” to create the html content with the richtext editor of tiny. It is possible to create content inside there like set horizontal centered headings and include images. See the following image:

.
The generated html content from this isn’t well structured, so it is problematic to display the retrieved html from the CMS properly in the site, because it’s not responsive.

Expected behavior

I want to create and manage flexible and structured content with this CMS. In my example i need the possibility to create different product descriptions with individual layouts. So the layouts doesn’t follow a specific structure and all the content for that is created within one field of schema (think it’s necessary to get the flexibility). Also the content should be structured, to have the capability to display the layout differently on mobile (responsive webdesign).
What’s the best way to create this approach on the content?

Minimal reproduction of the problem

Create a schema with the field string.
Click on the settings icon on the right side of the field and choose “Richtext” under the tab “Editing”.
Go to Content and create content for the schema of step 1 with the Richtext-Editor.
Paste the html-content into an editor to view the result out of it.
Try the responsiveness by dragging the windows size.

Environment

App Name: test-cms

[x] Self hosted with docker
[ ] Self hosted with IIS
[ ] Self hosted with other version
[ ] Cloud version

Version: 6

Browser:

[ x] Chrome (desktop)
[ ] Chrome (Android)
[ ] Chrome (iOS)
[x] Firefox
[x] Safari (desktop)
[ ] Safari (iOS)
[ ] IE
[ ] Edge

Others:

Sebastian · August 16, 2022, 8:20am

In general I do not recommend the html editor, because html is a very opinionated format. With markdown you have a lot more options how the actual layout should look like.

You can also have markdown content that has embeddable content items:

https://docs.squidex.io/02-documentation/developer-guides/embed-content

Thrural · August 16, 2022, 9:07am

Thanks a lot for your answer.
It’s a good feature to embed existing schemata into the the string-field. This is one step further to the flexibility i need.
I’ve created a schema named “image-text-brick” with the goal to create specific parts needed for a individual product-description, which i can embed into the “product-description”-schema. So the string-field inside “image-text-brick” is filled with his own markdown with an embedded image and text. In the result there is a text and below from it an image shown. This is great for the view at mobile devices.
It would be great to set the layout to display the image and text in a row for desktop view (e.G width of window greater then 991px).
What’s the best way to make the markdown responsible?

Sebastian · August 16, 2022, 10:08am

This is out of scope of the markdown. You could just use the good old “float: left” styling or you create a custom markdown syntax for that or you build your schema with arrays or components and not markdown.

Thrural · August 16, 2022, 12:58pm

Creating a custom syntax is the way to go in my case, thanks
I’ve now linked the schema of “image-text-brick” into the “product-description”-schema and created a test HTML-Document, where i fetch the content via Ajax. The response is the markdown content and is parsed in order to display it properly in the document, but the linked schemata are shown as real links. Is there a possibility to resolve it, that the contents of the linked markdown files are also shown without links in the page?

Sebastian · August 16, 2022, 4:36pm

It is actually described in the docs. There is an example with custom markdown renderer to transform the links to react components. It should work the same way with other frontend systems.