Category
Creating fully responsive websites with editable content is often made easy with the use of Display Suite or Panels. These modules allow us to build customized layouts which often incorporate code from a responsive framework such as Zurb's Foundation or Bootstrap.
When developing with this model we often run into the problem of the content editor being locked in to predetermined layouts. This is where the WYSIWYG Template module becomes a super-handy addition to the WYSIWYG editor. (Special thanks to Jen Lampton for getting this started.)
Installing the WYSIWYG Template Module
The WYSIWYG Template module allows you to create any code template which can be inserted into the WYSIWYG editor by any content manager. This is useful if you want to allow someone to insert layout-specific code without knowing any HTML. There are a couple of tricks that you can utilize to enhance this experience which will be detailed shortly. To get started, you need to download and install the WYSIWYG Editor module into your Drupal website. If you're not sure how to do that, follow these instructions.
Once you have the module installed and enabled, be sure to enable the WYSIWYG Template button inside your WYSIWYG editor. If you do not do this, you will not be able to insert any of your awesome customized WYSIWYG Templates! If you've done this correctly, you should see a button in your WYSIWYG Editor that looks like the screenshot above.
WYSIWYG Template Button
Once this is enabled, head over to the template configuration page located at ""/admin/config/content/wysiwyg-templates."" From here you can build your own templates. Anything that you add in a template can be inserted inside of any body text. On our example site, we've included various responsive grid layouts, such as 25/75, 50/50, 3 column and 4 column layouts. This is great because the client can easily insert responsive code anywhere in the body of this page without knowing how to code. Also, this enables them to create unique layouts which they may require on a special page.
If you're using Zurb's Foundation framework, you can import some of our WYSIWYG templates into your Drupal 7 site to get started. Simply copy/paste the code inside the .txt files into the WYSIWYG Template's import screens.
Once you've created or imported some templates and you've gotten the button to appear inside your WYSIWYG editor, you should be able to insert your WYSIWYG Templates directly into the editor. You can scroll through your templates and choose which to insert into the editor.
Going the Extra Mile
By this point, you should have been able to get the WYSIWYG Template module installed and working. While working with the module, we found some ways we could improve the experience. Considering many of the templates we utilized were simply placing Foundation markup into the WYSIWYG editor, there wasn't much to visually see in the editor's screen. To improve the experience, we created some CSS that only applies to our CKEditor. This way, the content manager can easily see any Foundation row or column. This a necessity because without it, the content editor won't know which column they are working in. If you properly configure the WYSIWYG editor to use a custom stylesheet, you can make custom layouts appear like this inside the editor:
Selecting elements inside the WYSIWYG helps show the content editor which columns they are working in.
Another great tip for turning this from pretty cool to totally awesome is to add some space above and below your templates. If a content editor decides to insert two WYSIWYG templates back to back and they are primarily <div> containers, they will have a difficult time trying to insert anything in between the two templates. At the beginning and end of all the WYSIWYG Templates we've created, we add in <p> </p>. In the example above, you can see how there is some separation between the green boxes. This gives our content editor space to click and add something. Alternatively, it can be deleted if necessary.
Team Member
Subheader #1
WYSIWYG boasts new addition to help manage and display content in a meaningful manner
Published on
Article Photo
Article Type
News Article (unrelated to clients)
{
"jsonapi": {
"version": "1.0",
"meta": {
"links": {
"self": {
"href": "http:\/\/jsonapi.org\/format\/1.0\/"
}
}
}
},
"data": {
"type": "node--article",
"id": "9f4305cd-e117-449c-8a3f-5f7e13fe02b4",
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4?resourceVersion=id%3A316"
}
},
"attributes": {
"internalId": 316,
"isPublished": true,
"title": "How to Create Custom Templates in the Drupal 7 WYSIWYG Editor",
"created": "2022-07-17T19:04:54+00:00",
"changed": "2024-05-09T18:33:08+00:00",
"promote": false,
"sticky": false,
"metatag": [
{
"tag": "meta",
"attributes": {
"name": "title",
"content": "How to Create Custom Templates in the Drupal 7 WYSIWYG"
}
},
{
"tag": "meta",
"attributes": {
"name": "description",
"content": "Creating fully responsive websites with editable content is often made easy with the use of Display Suite or Panels. These modules allow us to build customized"
}
},
{
"tag": "meta",
"attributes": {
"name": "abstract",
"content": "Delaware Drupal web development company specializing in custom Drupal development, real estate and rental brokerage websites, internet marketing and ecommerce"
}
},
{
"tag": "link",
"attributes": {
"rel": "canonical",
"href": "https:\/\/www.inclind.com\/news\/how-create-custom-templates-drupal-7-wysiwyg-editor"
}
},
{
"tag": "meta",
"attributes": {
"name": "robots",
"content": "index, follow"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:site_name",
"content": "Inclind"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:url",
"content": "https:\/\/www.inclind.com\/news\/how-create-custom-templates-drupal-7-wysiwyg-editor"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:title",
"content": "How to Create Custom Templates in the Drupal 7 WYSIWYG Editor"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:description",
"content": "Delaware Drupal web development company specializing in custom Drupal development, real estate and rental brokerage websites, internet marketing and ecommerce"
}
},
{
"tag": "meta",
"attributes": {
"property": "place:location:latitude",
"content": "38.77513"
}
},
{
"tag": "meta",
"attributes": {
"property": "place:location:longitude",
"content": "-75.13974"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:street_address",
"content": "119 W. Third St., Suite 6"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:locality",
"content": "Lewes"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:region",
"content": "Delaware"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:postal_code",
"content": "19958"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:country_name",
"content": "United States"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:email",
"content": "hello@inclind.com"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:phone_number",
"content": "(800) 604-8139"
}
}
],
"path": {
"alias": "\/news\/how-create-custom-templates-drupal-7-wysiwyg-editor",
"pid": 554,
"langcode": "en"
},
"body": {
"value": "\u003Cp\u003ECreating fully responsive websites with editable content is often made easy with the use of Display Suite or Panels. These modules allow us to build customized layouts which often incorporate code from a responsive framework such as Zurb\u0027s Foundation or Bootstrap.\u003C\/p\u003E\u003Cp\u003EWhen developing with this model we often run into the problem of the content editor being locked in to predetermined layouts. This is where the WYSIWYG Template module becomes a super-handy addition to the WYSIWYG editor. (Special thanks to Jen Lampton for getting this started.)\u003C\/p\u003E\u003Cp\u003EInstalling the WYSIWYG Template Module\u003Cbr\u003EThe WYSIWYG Template module allows you to create any code template which can be inserted into the WYSIWYG editor by any content manager. This is useful if you want to allow someone to insert layout-specific code without knowing any HTML. There are a couple of tricks that you can utilize to enhance this experience which will be detailed shortly. To get started, you need to download and install the WYSIWYG Editor module into your Drupal website. If you\u0027re not sure how to do that, follow these instructions.\u003C\/p\u003E\u003Cp\u003EOnce you have the module installed and enabled, be sure to enable the WYSIWYG Template button inside your WYSIWYG editor. If you do not do this, you will not be able to insert any of your awesome customized WYSIWYG Templates! If you\u0027ve done this correctly, you should see a button in your WYSIWYG Editor that looks like the screenshot above.\u003C\/p\u003E\u003Cp\u003EWYSIWYG Template Button\u003C\/p\u003E\u003Cp\u003EOnce this is enabled, head over to the template configuration page located at \u0022\u0022\/admin\/config\/content\/wysiwyg-templates.\u0022\u0022 From here you can build your own templates. Anything that you add in a template can be inserted inside of any body text. On our example site, we\u0027ve included various responsive grid layouts, such as 25\/75, 50\/50, 3 column and 4 column layouts. This is great because the client can easily insert responsive code anywhere in the body of this page without knowing how to code. Also, this enables them to create unique layouts which they may require on a special page.\u003C\/p\u003E\u003Cp\u003EIf you\u0027re using Zurb\u0027s Foundation framework, you can import some of our WYSIWYG templates into your Drupal 7 site to get started. Simply copy\/paste the code inside the .txt files into the WYSIWYG Template\u0027s import screens.\u003C\/p\u003E\u003Cp\u003EOnce you\u0027ve created or imported some templates and you\u0027ve gotten the button to appear inside your WYSIWYG editor, you should be able to insert your WYSIWYG Templates directly into the editor. You can scroll through your templates and choose which to insert into the editor.\u003C\/p\u003E\u003Cp\u003EGoing the Extra Mile\u003Cbr\u003EBy this point, you should have been able to get the WYSIWYG Template module installed and working. While working with the module, we found some ways we could improve the experience. Considering many of the templates we utilized were simply placing Foundation markup into the WYSIWYG editor, there wasn\u0027t much to visually see in the editor\u0027s screen. To improve the experience, we created some CSS that only applies to our CKEditor. This way, the content manager can easily see any Foundation row or column. This a necessity because without it, the content editor won\u0027t know which column they are working in. If you properly configure the WYSIWYG editor to use a custom stylesheet, you can make custom layouts appear like this inside the editor:\u003C\/p\u003E\u003Cp\u003ESelecting elements inside the WYSIWYG helps show the content editor which columns they are working in.\u003Cbr\u003EAnother great tip for turning this from pretty cool to totally awesome is to add some space above and below your templates. If a content editor decides to insert two WYSIWYG templates back to back and they are primarily \u0026lt;div\u0026gt; containers, they will have a difficult time trying to insert anything in between the two templates. At the beginning and end of all the WYSIWYG Templates we\u0027ve created, we add in \u0026lt;p\u0026gt; \u0026lt;\/p\u0026gt;. In the example above, you can see how there is some separation between the green boxes. This gives our content editor space to click and add something. Alternatively, it can be deleted if necessary.\u003Cbr\u003E\u0026nbsp;\u003C\/p\u003E",
"format": "basic_html",
"processed": "\u003Cp\u003ECreating fully responsive websites with editable content is often made easy with the use of Display Suite or Panels. These modules allow us to build customized layouts which often incorporate code from a responsive framework such as Zurb\u0027s Foundation or Bootstrap.\u003C\/p\u003E\u003Cp\u003EWhen developing with this model we often run into the problem of the content editor being locked in to predetermined layouts. This is where the WYSIWYG Template module becomes a super-handy addition to the WYSIWYG editor. (Special thanks to Jen Lampton for getting this started.)\u003C\/p\u003E\u003Cp\u003EInstalling the WYSIWYG Template Module\u003Cbr\u003EThe WYSIWYG Template module allows you to create any code template which can be inserted into the WYSIWYG editor by any content manager. This is useful if you want to allow someone to insert layout-specific code without knowing any HTML. There are a couple of tricks that you can utilize to enhance this experience which will be detailed shortly. To get started, you need to download and install the WYSIWYG Editor module into your Drupal website. If you\u0027re not sure how to do that, follow these instructions.\u003C\/p\u003E\u003Cp\u003EOnce you have the module installed and enabled, be sure to enable the WYSIWYG Template button inside your WYSIWYG editor. If you do not do this, you will not be able to insert any of your awesome customized WYSIWYG Templates! If you\u0027ve done this correctly, you should see a button in your WYSIWYG Editor that looks like the screenshot above.\u003C\/p\u003E\u003Cp\u003EWYSIWYG Template Button\u003C\/p\u003E\u003Cp\u003EOnce this is enabled, head over to the template configuration page located at \u0022\u0022\/admin\/config\/content\/wysiwyg-templates.\u0022\u0022 From here you can build your own templates. Anything that you add in a template can be inserted inside of any body text. On our example site, we\u0027ve included various responsive grid layouts, such as 25\/75, 50\/50, 3 column and 4 column layouts. This is great because the client can easily insert responsive code anywhere in the body of this page without knowing how to code. Also, this enables them to create unique layouts which they may require on a special page.\u003C\/p\u003E\u003Cp\u003EIf you\u0027re using Zurb\u0027s Foundation framework, you can import some of our WYSIWYG templates into your Drupal 7 site to get started. Simply copy\/paste the code inside the .txt files into the WYSIWYG Template\u0027s import screens.\u003C\/p\u003E\u003Cp\u003EOnce you\u0027ve created or imported some templates and you\u0027ve gotten the button to appear inside your WYSIWYG editor, you should be able to insert your WYSIWYG Templates directly into the editor. You can scroll through your templates and choose which to insert into the editor.\u003C\/p\u003E\u003Cp\u003EGoing the Extra Mile\u003Cbr\u003EBy this point, you should have been able to get the WYSIWYG Template module installed and working. While working with the module, we found some ways we could improve the experience. Considering many of the templates we utilized were simply placing Foundation markup into the WYSIWYG editor, there wasn\u0027t much to visually see in the editor\u0027s screen. To improve the experience, we created some CSS that only applies to our CKEditor. This way, the content manager can easily see any Foundation row or column. This a necessity because without it, the content editor won\u0027t know which column they are working in. If you properly configure the WYSIWYG editor to use a custom stylesheet, you can make custom layouts appear like this inside the editor:\u003C\/p\u003E\u003Cp\u003ESelecting elements inside the WYSIWYG helps show the content editor which columns they are working in.\u003Cbr\u003EAnother great tip for turning this from pretty cool to totally awesome is to add some space above and below your templates. If a content editor decides to insert two WYSIWYG templates back to back and they are primarily \u0026lt;div\u0026gt; containers, they will have a difficult time trying to insert anything in between the two templates. At the beginning and end of all the WYSIWYG Templates we\u0027ve created, we add in \u0026lt;p\u0026gt; \u0026lt;\/p\u0026gt;. In the example above, you can see how there is some separation between the green boxes. This gives our content editor space to click and add something. Alternatively, it can be deleted if necessary.\u003Cbr\u003E\u0026nbsp;\u003C\/p\u003E",
"summary": ""
},
"articleType": "news",
"author": "Team Inclind",
"authorTitle": null,
"challenge": null,
"introText": null,
"location": null,
"f_metatag": null,
"publishDate": "2015-03-06",
"result": null,
"solution": null,
"subheader1": "WYSIWYG boasts new addition to help manage and display content in a meaningful manner",
"subheader2": null
},
"relationships": {
"contentType": {
"data": null,
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/contentType?resourceVersion=id%3A316"
}
}
},
"category": {
"data": {
"type": "catTerm",
"id": "e7befc73-77f0-46c9-aedf-608856a6a450",
"meta": {
"drupal_internal__target_id": 52
}
},
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/category?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/category?resourceVersion=id%3A316"
}
}
},
"companyRef": {
"data": null,
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/companyRef?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/companyRef?resourceVersion=id%3A316"
}
}
},
"image": {
"data": {
"type": "images",
"id": "c8c9cb84-eecd-4ea2-9763-e639f53a7a52",
"meta": {
"drupal_internal__target_id": 168
}
},
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/image?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/image?resourceVersion=id%3A316"
}
}
},
"slides": {
"data": [],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/slides?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/slides?resourceVersion=id%3A316"
}
}
},
"teamMember": {
"data": [
{
"type": "node--person",
"id": "87407245-73a3-43f8-9f44-9e70f40a0e1a",
"meta": {
"drupal_internal__target_id": 120
}
}
],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/teamMember?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/teamMember?resourceVersion=id%3A316"
}
}
},
"tags": {
"data": [],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/tags?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/tags?resourceVersion=id%3A316"
}
}
},
"topic": {
"data": [
{
"type": "topicTerm",
"id": "1a993f8f-ee53-4048-ba7a-94e301547386",
"meta": {
"drupal_internal__target_id": 2
}
},
{
"type": "topicTerm",
"id": "dc2c8a07-38a3-46e7-a5a9-93dc46b3b799",
"meta": {
"drupal_internal__target_id": 16
}
},
{
"type": "topicTerm",
"id": "77f2449e-faf7-4322-b090-3225624f588b",
"meta": {
"drupal_internal__target_id": 8
}
}
],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/topic?resourceVersion=id%3A316"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4\/relationships\/topic?resourceVersion=id%3A316"
}
}
}
}
},
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/9f4305cd-e117-449c-8a3f-5f7e13fe02b4?resourceVersion=id%3A316"
}
}
}