Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughCreating custom templates in WYSIWYG
Creating responsive websites is easy these days with frameworks like Zurb’s Foundation and Bootstrap. However it may not be as easy for content editors to set up content responsively. Using the WYSIWYG API template plugin module, we can predefine templates in WYSIWYG, that helps editors to layout content in a mobile friendly website.
Install WYSIWYG API template plugin module
https://www.drupal.org/project/wysiwyg_template
Once you installed the module, enable the WYSIWYG Template button in your WYSIWYG editor. Be sure you enable the “Insert templates” button, not “Templates”.
Create template
Define your templates in /admin/config/content/wysiwyg-templates
Make use of the grid system provided from you framework. The following is an example of 3 columns bootstrap layout.
<div class="row"> <div class="col-md-4">Left</div> <div class="col-md-4">Middle</div> <div class="col-md-4">right</div> </div>
Set up style in WYSIWYG
In order for your template to show up correctly in WYSIWYG, define the theme stylesheets in your WYSIWYG settings. You can add extra styling to enhance user experience for your editors.
%b%t/assets/stylesheets/screen.css, %b%t/assets/stylesheets/ckeditor.css
Responsive layout is now a click away
Source code:
Tips
It is always a good idea to add a blank space at the end to separate your template with other elements. You can also use margins and paddings in the style as an alternative.
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web