Most common questions from content authors

Authors & Editors
,
1

Hi everyone :slightly_smiling_face:

I’ve spent a lot of time working with the Contentful authoring community and wanted to highlight a few questions that I’ve seen come up frequently.

1. “How can I embed videos from YouTube or Vimeo in a Contentful component?”

The best way to add videos hosted on YouTube or Vimeo is by creating a content item to hold the hosted video’s ID. The video ID is provided when you click the Share button on a YouTube or Vimeo video; it’s the characters after the slash:

https://youtu.be/_4kHxtiuML0 < this is the id
https://vimeo.com/606811537

Your video content model should have a few fields, namely:

YouTubeID : Short Text
VimeoID : Short Text

Then, you can set up your front end to render a video from the ID provided.

You can also build upon this content type to allow content authors to adjust the video’s thumbnail or start time.

2. “I can’t seem to figure out how to add a jump link. I want to be able to specify different points throughout my site pages to link to specifically.”

Jump links are used when you want to send someone to a specific position on a page. To create jump links on your site, you can follow these steps:

  1. Create a content type and title it :kangaroo: Jump Link Component .
  2. Add a short text field titled Component Name .
  3. Add a short text field titled Identifier .
  4. Click on the Identifier field settings and then the validation tab.
  5. Select Prohibit a specific pattern and add /^\S+$/ to the regex input field. This will prevent users from being able to type spaces into this field (if spaces are added here, you cannot generate the proper jump link)

Now, as an example, let’s say you wanted to link to the “About Us” section of your homepage:

  1. Navigate to the page component for your homepage (not sure how to model a basic page component? More on that here).
  2. Then, find the “About Us” section on that page.
  3. Create a new :kangaroo: Jump Link Component and reference it above the “About Us” section.
  4. Create links to this section combining the page link with the identifier set in the :kangaroo: Jump Link Component . In the example of the “About Us” section, the link would look something like yoursite. com/#about-us-section

Developer note: you will need to configure your front end to add a div with an id that matches the identifier wherever a :kangaroo: Jump Link Component is added.

If you found this helpful, feel free to take a look at a few more questions and answers I’ve written up here:

What other questions would you want to see answered?

2 Likes