Jump Links. How do you do em?

Authors & Editors
1

I’m creating my first content model and content.

I can’t seem to figure out how one would go about adding a Jumplink to an article. You can link out to external URLs. I want to be able to embed a A tag to use as an internal jump point.

Any guidance would be appreciated.

2

Hi John,
Could you clarify how exactly you’re structuring your articles and wish to create the jump link itself? Are you using our Markdown syntax or are you trying to do this directly in your HTML code?

3

Screenshot from CMS explaining what I would like to do in the rich text editor:

image
image.png1013×655 110 KB

Does that help?

4

Hi John,

That will ultimately depend on the structure of your website and thus link structure. However, in general, you would achieve this by creating a normal link (by clicking in the icon on top of the long-text field).

However, you’d have to use a Markdown processor that would properly structure your rendered into HTML code that can be used for the linking use case that you reference to.

5

Got it. Was able to solve it with the markdown editor like you suggested.

6

Glad to hear that, John.
Let us know if you have any other questions.

7

@gabriel hello, i have another question for this.
image
I write the jump link for this way, is work.
But in the Guide slideshow.
How can i add the jump link to slideshow image title on body?
Just the jump link use in the Guide Slideshow template the same as the Guide.

thanks!

8

Is Markdown support built in to the rich text editor or did you have to install an extension to get that working?

9

Can you explain this a little bit more – how would I create a normal link out of a section header?

10

Is it possible to create jump links within the body text and not in the rich body text?

12

Hi @johnmirick :wave:

Makes sense why you’d want to add these; they’re easy to add in traditional rich text editors, but take a little more work to get set up in Contentful.

Here’s what’s worked for me:

  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.
  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, whether that’s in a Rich Text Field or a multi-reference field.
  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.

Hope this helps. Let me know if I can answer any questions. :slightly_smiling_face:

-Connor

1 Like
13

Hi Connor @connorrowland , the regex for prohibiting space doesn’t seem to work, its still allowing me to input spaces