Drupal Planet https://ffwagency.com/blog/drupal-planet/feed en The ABC's of Drupal: Camp, CLI, CMI https://ffwagency.com/digital-strategies-blog/abcs-drupal-camp-cli-cmi <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">The ABC&#039;s of Drupal: Camp, CLI, CMI</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 01/10/2017 - 19:46</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>For anyone who's ever looked up a definition of a Drupal term and been left wondering what it all means, here are some practical real world explanations you can use to navigate the Drupalverse. Watch this space and use comments to send us your feedback and requests.</p> <h4><strong>Camp</strong> </h4> <p>A camp is a gathering of Drupal experts and other interested humans set up to share best practices, emerging trends and other information. Camps are usually free or low cost and may be organized over one or several days. They are an excellent way to become familiar with the Drupal community and Drupal practices. </p> <p>Camps can be found all over the globe. Some are big, some are small, but regardless of size, beginners are always welcome. Many camps offer high-quality, paid trainings taught by leading Drupalists who are experienced in specific areas such as module development, theming or project management. </p> <p>Drupal camps are generally built around a series sessions, which are 45 to 90 minute presentations by Drupalists that cover specific topics, themes, or ideas. Most camps organize sessions to cover a variety of topics and experience level so that all attendees get to enjoy great content. Many camps will also organize contribution sprints on a subsequent day, where attendees write code for the Drupal project. </p> <p>Sprints are a great way to get more people contributing back to the Drupal project and also a great way to enable regular committers to work more collaboratively and effectively together around a specific set of issues. Visit <a href="evernote-html-snippet:///Drupal.org">Drupal.org</a> for info on upcoming events and also <a href="evernote-html-snippet:///Drupical.com">Drupical.com</a> a very handy aggregator of Drupal meet ups, camps and conferences.  </p> <p>(FFW is very active in the camps scenes in the cities where we have offices. If you'd like to check out a Drupal Camp for yourself and want to know if FFW will be there, <a href="ffwagency.com/events">check out our events page</a>, which lists out which upcoming camps we plan to attend.)</p> <h4>CLI: Command Line Interface</h4> <p>CLI stands for Command Line Interface, which can mean either the Drupal shell program (Drush) or the Symfony-based Drupal Console program. Configuration that occurs via a Drupal graphical user interface can often be performed much more effectively at the command line. </p> <p>Drush (rhymes with “crush”) is a mainstay of Drupal configuration and is well known by any developer who’s worth their salt. Drush refers to ‘Drupal Shell’, and is a shell-based software that allows users to administer Drupal sites of all versions from the command line. The other CLI, Drupal Console, was developed specifically for Drupal 8 and is used as a shell program to learn Drupal 8 development, configure Drupal sites, create custom module and theme scaffolding and debug custom code. </p> <p>A handy tip from Ray: If someone tries to get you in a conversation about which CLI is better or why we should only have one, it’s best to shrug your shoulders and walk away quietly.  </p> <h4>CMI: Configuration Management Initiative</h4> <p>The Configuration Management Initiative began as a Drupal 8 configuration effort. The goal of CMI was to strengthen Drupal’s configuration workflows. It was also built to mitigate potential roadblocks and collisions in production websites with user generated content that were also undergoing active development.</p> <p>The main challenge for the CMI was to create a method of saving, versioning, reverting and making portable the changes made to a site’s configuration settings. The initiative lead to fundamental changes in how Drupal classifies and handles configuration data, and laid the foundation for significantly improved development workflows in Drupal 8. CMI is just another reason why you should be developing your next project using Drupal 8. </p> <p>To learn more about the unique nature of Drupal, download our Ebook: <a href="http://go.ffwagency.com/10pitfalls-blog.html">10 Drupal Project Pitfalls to Avoid</a>. This eBook has compiled a list of lessons we’ve learned in 15+ years of delivering digital solutions to some of the most recognizable brands in the world. </p> <h4><a href="http://go.ffwagency.com/10pitfalls-blog.html">Download the Ebook</a></h4> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_3.png?itok=-NZwXcic 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_3.png?itok=nYNwmwwY 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_3.png?itok=-NZwXcic 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_3.png?itok=nYNwmwwY 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/drupal-words_3.png?itok=i4rV4V9i 1x, /sites/default/files/styles/blog_single_tabletx2/public/drupal-words_3.png?itok=iDx2qyC9 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/drupal-words_3.png?itok=oaC6E-Fl 1x, /sites/default/files/styles/blog_single_mobile2x/public/drupal-words_3.png?itok=RlLO7D-G 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_3.png?itok=-NZwXcic" alt="Drupal word cloud" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/drupal-abcs" property="schema:keywords" hreflang="en">Drupal, ABC&#039;s</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4896&amp;2=field_comment&amp;3=ffw_comments" token="aef73bab"></drupal-render-placeholder> </section> Tue, 10 Jan 2017 19:46:24 +0000 Ray Saltini 4896 at https://ffwagency.com Building Platforms for Millions with NBC Sports Digital https://ffwagency.com/digital-strategies-blog/building-platforms-millions-nbc-sports-digital <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Building Platforms for Millions with NBC Sports Digital</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/leigh-anderson" typeof="schema:Person" property="schema:name" datatype="">leigh.anderson</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 12/27/2016 - 20:17</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>We had a lot of great accomplishments at FFW in 2016. It’s been a year where we’ve helped our clients shatter records and drive amazing business results. A great example of this is NBC Sports Digital, with whom we’ve collaborated with on a number of projects: we built new Drupal websites for NBCSports.com and its regional RSN networks, and we also constructed NBCOlympics.com, part of the <a href="http://nbcsportsgrouppressbox.com/2016/08/22/nbcs-rio-olympics-is-the-most-successful-media-event-in-history/">most successful media event in history.</a></p> <p> </p> <h3>Building a Hub for America’s Sports Fans - NBCSports.com and Regional Sites</h3> <p><br /> NBC Sports Digital asked us to implement a redesign of their digital sports hubs (NBCSports.com and Sports Regional Networks websites) before the start of the NFL season. They asked us specifically to focus on videos and advertising, to increase user and sponsor satisfaction.</p> <p>Our team built each page according to NBC’s new designs, migrated the network’s data onto a scalable Drupal platform, and developed the new site to have custom layouts, themes, and functionality. We also implemented responsive design, ensuring the site looks great on any device. We were able to launch NBC Sports Digital’s new site before the NFL season kickoff with full video functionality and improved advertising, and the response has been great.</p> <p>In addition to rebuilding NBCSports.com, we also rebuilt the websites for NBC Sports Group’s Regional Networks. NBC wanted its regional sites to have a consistent look and feel, so we set up a multisite project with all the same backend code. Our team implemented several feed customizations for each site so each different region would have unique content. The result is an ecosystem of regional sites with custom content and easy-to-maintain shared codebase—another win for NBC!</p> <p><strong>Visit the site:<br /><a href="http://NBCSports.com">NBCSports.com</a></strong></p> <p> </p> <h3>NBCOlympics.com: A Gold Medal in Site Performance</h3> <p><br /> In order to provide a best-in-class digital experience for NBC Olympics’ coverage of the 2016 Rio Games, NBCOlympics.com required a massive platform. When the opportunity arose for FFW to build the web platform to deliver performance, security, and stability at such a massive scale, we were excited to step up to the challenge. During the Rio Olympics, NBCOlympics.com hosted 3.3 billion total streaming minutes, 2.71 billion live streaming minutes, and was visited by 100 million unique users.</p> <p>A thorough discovery phase allowed us to plan for the implementation of the extremely complex, and massive, project. After a year and a half of work, we launched the completed site in April of 2016. We also built in a state-of-the-art advertising platform, which helped NBC Sports to manage their sponsors’ content. The new platform served up content to a record number of users, who were able to view localized listings of broadcasts and watch live streams of the events from any device. </p> <p>We couldn’t be more proud of our teams who worked on all three sites, and we’d like to say thanks to NBC for letting us be part of such a historic event.<br /><br />  </p> <blockquote><span>NBC Olympics has set the new benchmark for how to build and operate a Drupal-based CMS in a multi-platform world.</span><cite>Eric Black, CTO, NBC Sports Digital</cite></blockquote> <p><br /><strong>Visit the site:<br /><a href="http://NBCOlympics.com">NBCOlympics.com</a></strong></p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/NBC%20Blog%20Image.png?itok=80wNgyj9 1x, /sites/default/files/styles/blog_single_desktopx/public/NBC%20Blog%20Image.png?itok=rh8pIsbg 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/NBC%20Blog%20Image.png?itok=80wNgyj9 1x, /sites/default/files/styles/blog_single_desktopx/public/NBC%20Blog%20Image.png?itok=rh8pIsbg 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/NBC%20Blog%20Image.png?itok=bOe6E6j- 1x, /sites/default/files/styles/blog_single_tabletx2/public/NBC%20Blog%20Image.png?itok=pzkGcIFF 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/NBC%20Blog%20Image.png?itok=aUvd4719 1x, /sites/default/files/styles/blog_single_mobile2x/public/NBC%20Blog%20Image.png?itok=5DfUw0S5 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/NBC%20Blog%20Image.png?itok=80wNgyj9" alt="Colorful geometric image with figures competing in Olympics sports" typeof="foaf:Image" /> </picture> </div> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4831&amp;2=field_comment&amp;3=ffw_comments" token="977f9bcd"></drupal-render-placeholder> </section> Tue, 27 Dec 2016 20:17:04 +0000 leigh.anderson 4831 at https://ffwagency.com Announcing Docksal, a Docker-Based Development Environment https://ffwagency.com/digital-strategies-blog/announcing-docksal-docker-based-development-environment <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Announcing Docksal, a Docker-Based Development Environment</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/leigh-anderson" typeof="schema:Person" property="schema:name" datatype="">leigh.anderson</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 11/23/2016 - 16:48</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p dir="ltr">At FFW, 90% of our staff spends all day, every day, working with code. We’re site builders and developers, and we’ve created a number of tools to help make our jobs easier. Today, we’re excited to share our Docksal development environment with you in the hopes that it will make your team’s life easier, too.</p> <p dir="ltr">Docksal is an open-source tool created by FFW for defining and managing development environments. It brings together common development tools, minimizes time spent on configuration, and ensures the consistency of local development environments throughout a team’s continuous integration workflow.</p> <p dir="ltr">Docksal automatically configures each project's environment to ensure team members are using the same tools, and versions, regardless of the individual requirements of each project. Most importantly, it makes the entire process easy. Docksal offers fully containerized environments with Docker, provides cross-platform support (MacOS, Windows, and Linux,) and has built-in tools that include:</p> <ul><li dir="ltr">drush</li> <li dir="ltr">Drupal Console</li> <li dir="ltr">WP-CLI</li> <li dir="ltr">composer</li> <li dir="ltr">PHP Code Sniffer</li> <li dir="ltr">Apache Solr</li> <li dir="ltr">Varnish</li> <li dir="ltr">Memcache</li> <li dir="ltr">Built-in testing support with Behat and Selenium.</li> </ul><p dir="ltr">Docksal will even automatically configure virtual hosts for you, so no more editing host files and server configurations.</p> <h2 dir="ltr">How can Docksal help your organization?</h2> <p dir="ltr">Docksal has a threefold value proposition. It improves time-to-market and quality on development projects through:</p> <ol><li dir="ltr">Bringing together common development tools on a unified platform</li> <li dir="ltr">Minimizing time spent configuring development environments</li> <li dir="ltr">Assuring quality by ensuring that local environments are consistent across a team’s continuous integration and development workflow.</li> </ol><p dir="ltr">Docksal makes it easy to bring new team members onto projects in no time flat: the software allows them to get set up and running easily and quickly. We built Docksal to streamline the process of adding team members to our projects: previously, they’d have to go find the code for the project, get it set up on their laptop, get it to work with everything on their laptop, perform a database dump, get the site running. We wanted to simplify this process.</p> <p dir="ltr">Docksal reduces the work of several hours to several minutes. Our developers don’t have to waste time figuring out why the code isn’t working with the configurations they have on their computers, and our teammates who aren’t code-oriented don’t spend frustrating hours trying to simply access the project. With Docksal, anyone can get a specific Drupal environment set up and running on their machine in two minutes -- and everyone is running the same environment, which acts as an important check on quality and consistency.</p> <h2 dir="ltr">Our suite of development tools</h2> <p dir="ltr">Docksal’s features may sound familiar to those of you who previously used our Drude tool. That’s because Docksal is Drude renamed and expanded. Docksal doesn’t just work with Drupal: it works with WordPress, stand-alone HTML files, or any other PHP project— because even though we all love Drupal, sometimes we have to work with other technologies, too.</p> <p dir="ltr">In addition to Docksal, we’ve also created another development tool called CIBox. CIBox (Continuous Integration toolbox) is a development workflow tool that simplifies the process of checking changes to each project’s codebase. CIBox uses continuous integration -- the process of immediately testing new code when it’s contributed to a project -- to support a truly Agile development process.</p> <p dir="ltr">CIBox allows developers to have an unlimited number of testing environments, deployment plans, and additional automations. It supports a continuous integration server dedicated to running site builds and tests, as well as a toolbox of scripts for Code Driven Development with Drupal, Wordpress, Symfony, Sylex support. It offers deployment plans and skeletons, and an improved QA workflow from most CI tools. Stay tuned for an upcoming blogpost that speaks to CI Box in more detail.</p> <h2 dir="ltr">Try the software for yourself</h2> <p dir="ltr">Docksal and CIBox are both great tools for building projects and managing development environments. Both have saved us a lot of time and ensured that we have streamlined, quality-focused processes.. To get Docksal for yourself, visit <a href="http://docksal.io/">docksal.io</a> for downloads and more information, or to try CIBox, <a href="http://cibox.tools/">check here</a>.  We hope that you give them a try — we think they’ll make your life better, too.</p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Docksal%20CI%20Hero%20Image.png?itok=5Iw2z3jM 1x, /sites/default/files/styles/blog_single_desktopx/public/Docksal%20CI%20Hero%20Image.png?itok=uPeC8_Gz 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Docksal%20CI%20Hero%20Image.png?itok=5Iw2z3jM 1x, /sites/default/files/styles/blog_single_desktopx/public/Docksal%20CI%20Hero%20Image.png?itok=uPeC8_Gz 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/Docksal%20CI%20Hero%20Image.png?itok=Q_2bwmjn 1x, /sites/default/files/styles/blog_single_tabletx2/public/Docksal%20CI%20Hero%20Image.png?itok=X0FuXHpy 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/Docksal%20CI%20Hero%20Image.png?itok=Y0NZWe6k 1x, /sites/default/files/styles/blog_single_mobile2x/public/Docksal%20CI%20Hero%20Image.png?itok=g6kaVXa0 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/Docksal%20CI%20Hero%20Image.png?itok=5Iw2z3jM" alt="Black and white image of Docksal site on a laptop" typeof="foaf:Image" /> </picture> </div> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4651&amp;2=field_comment&amp;3=ffw_comments" token="4ca98d47"></drupal-render-placeholder> </section> Wed, 23 Nov 2016 16:48:29 +0000 leigh.anderson 4651 at https://ffwagency.com The ABC's of Drupal: Article, Base Theme, Content https://ffwagency.com/digital-strategies-blog/abcs-drupal-article-base-theme-content <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">The ABC&#039;s of Drupal: Article, Base Theme, Content</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 10/07/2016 - 17:51</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>For anyone who's ever looked up a definition of a Drupal term and been left wondering what it all means, here are some practical real world explanations you can use to navigate the Drupalverse. Watch this space and use comments to send us your feedback and requests.</p> <p><strong>Article</strong>: While newspapers and magazines have articles, the term 'Article' in Drupal denotes something more specific. An Article is one of two content types that have come preconfigured with Drupal since Drupal 7. As a content type, an Article is made up of Title, Body, Image, and Tag fields.</p> <p>All content types are part of Drupal’s core fields system and can be customized with different fields. The output of an Article is usually configured to appear either as a teaser or a full version, which is sometimes referred to as the default or as a node. Unless your home page has been customized, article teasers will appear on your home page as a river of news with older items sinking to the bottom. This makes it easy to begin building a site with time sensitive content such as a blog. Most home pages are even customized so that selecting the ‘promote to front page’ toggle has no visible effect. If this happens to you, don't worry! Your site is not broken. It's just Articles at work.</p> <p><strong>Base Theme and Themes</strong>: A theme in Drupal is a collection of CSS, template files, and javascript that helps determine the look and feel of a Drupal website or application.</p> <p>A theme typically defines different regions in code which can then be used to place various elements via configuration in a user interface. Base Themes are a common way of standardizing and optimizing Drupal front end development. They enable developers to focus on CSS styling and javascript without having to manipulate Drupal internals. A variety of different methods can be used to essentially copy and customize the styling of a base theme.</p> <p>Among the advantages of using a base theme are less risk from custom coding and updates often provided by base theme maintainers that enable greater functionality or enhanced security. Some base themes make it easier to build a theme based on a popular published library, such as Twitter Bootstrap. Organizations often develop their own themes and use them internally as a base theme for different projects.</p> <p>As a note: base themes typically only work with a given Drupal major version. For example, Drupal 7 theme will not work with a Drupal 6 or 8 theme. Major changes have taken place in theme development between Drupal 7 and the current version Drupal 8. But don't worry! Drupal 8 includes a new templating engine called Twig. Twig is a Symfony framework component that eliminates the necessity to write preprocess functions and other code. Generally, that's often not part of a front-end developers skill set, so Twig makes it easier than ever for front-end developers to create responsive and other advanced designs.</p> <p><strong>Content</strong>: The word "Content" can mean different things to different people, especially when Drupal is involved. When speaking to a Drupalist who’s been around for many versions, it may mean only something created by Drupal’s core node module or anything that has been created via a content type form by clicking on an ‘add content’ link. Others will use it to represent anything presented on a webpage.</p> <p>Depending on who you are talking to and what their role is, this can lead to confusing discussions or debates about whether something is Content or something else. The best way to deal with this on a project is to understand the other definitions and always ask the speaker to please define what Content means to them. </p> <p>For example, Content can be structured or unstructured. (The preferred best practice in Drupal is always structured content validated at the field level.) Comments, images, and file attachments may also be considered Content. Images and file attachments are often referred to as assets because they are stored in a file system. In Drupal 8 you are more likely to hear this kind of Content referred to as an Entity, which thankfully simplifies the conversation.</p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_2.png?itok=CxKvETyI 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_2.png?itok=E_IpFkUg 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_2.png?itok=CxKvETyI 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_2.png?itok=E_IpFkUg 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/drupal-words_2.png?itok=SzJY9ZvY 1x, /sites/default/files/styles/blog_single_tabletx2/public/drupal-words_2.png?itok=tGO-I1yD 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/drupal-words_2.png?itok=yUnKlF4L 1x, /sites/default/files/styles/blog_single_mobile2x/public/drupal-words_2.png?itok=qK_tLRfy 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_2.png?itok=CxKvETyI" alt="Drupal word cloud" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/drupal" property="schema:keywords" hreflang="en">drupal</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4281&amp;2=field_comment&amp;3=ffw_comments" token="a96b06e4"></drupal-render-placeholder> </section> Fri, 07 Oct 2016 17:51:30 +0000 Ray Saltini 4281 at https://ffwagency.com The ABC's of Drupal: Dev Ops, Display and Distribution https://ffwagency.com/digital-strategies-blog/abcs-drupal-dev-ops-display-and-distribution <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">The ABC&#039;s of Drupal: Dev Ops, Display and Distribution</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 08/24/2016 - 18:43</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p dir="ltr">For anyone who's ever looked up a definition of a Drupal term and been left wondering what it all means, here are some practical real world explanations you can use to navigate the Drupalverse. Watch this space and use comments to send us your feedback and requests.</p> <h2 dir="ltr">The Discipline of Dev Ops</h2> <p dir="ltr">Dev Ops, or Development Operations, is the intersection between IT managed hosting support and development. While it is a specialization in many organizations, senior developers, tech leads, and architects should be conversant in the various systems and tools to be used by your IT team or provider.</p> <p dir="ltr">One of the primary goals of Dev Ops is to create standardized operating system iterations that are consistently reliable and easily replicable. Your unique infrastructure or hosting service plays a big role in these systems, which is why they tend to be customized to each project.</p> <p dir="ltr">Standardized Dev Ops systems are used to create local and remote development environments, as well as staging and production environments, which all function in the same way. Having good Dev Ops systems in place means that your organization can support continuous development practices like version control and automated testing.</p> <p dir="ltr">For any site that’s even moderately complex, having Dev Ops standards is huge. You don’t have to try to become a Dev Ops genius yourself: instead, you can find an organization like FFW to provide the level of Dev Ops help and support that is appropriate for the size and scope of your project.</p> <h2 dir="ltr">Defining a Display</h2> <p dir="ltr">Displays, unlike Dev Ops, are a little simpler. A Display in Drupal typically refers to how queried data is organized and shown to visitors. It is usually used in connection with a native database query referred to as a View.</p> <p dir="ltr">One View (or database query) can have several Displays sorted in different ways. For instance, a set of queried data can be output in the following ways:</p> <ul><li dir="ltr">a sortable table</li> <li dir="ltr">a grid</li> <li dir="ltr">as consecutive field sets</li> <li dir="ltr">in a rotating banner</li> <li dir="ltr">as a calendar or list of coming events</li> <li dir="ltr">as points on a map</li> </ul><p dir="ltr">… and these are only just a few examples of the many different kinds of Displays.</p> <h2 dir="ltr">The Details Around Distributions</h2> <p dir="ltr">A Distribution is a pre-developed assembly of database data, code, and files. Distributions commonly include saved content, configuration settings, Drupal core, contributed and custom modules, libraries, and a custom theme. It’s basically a pre-built Drupal site.</p> <p dir="ltr">Most people first become acquainted with Distributions as different iterations of Drupal that are built for specific use cases or verticals, such as e-commerce or publishing. Many distributions are robust, production-ready applications that will save you tremendous work. They let you take advantage of the distribution sponsor’s subject matter expertise.</p> <p dir="ltr">There are other kinds of distributions, such as ones developed mainly for marketing purposes to showcase what Drupal can do and how Drupal can be used. Both of these types of distributions have value, but it is important to differentiate between the two.</p> <p dir="ltr">Distributions can be vetted in much the same way that a Drupal module or theme can be vetted. When evaluating a Distribution, I always like to ask the following questions:</p> <ul><li dir="ltr">Who are the contributors?</li> <li dir="ltr">What is their experience?</li> <li dir="ltr">Is the project actively maintained and are new features or versions planned?</li> </ul><p dir="ltr">The other primary consideration when vetting a Distribution is how much complexity and effort is required to ‘unravel’ a distribution. Many organizations have found that the more fully realized distributions are difficult to customize around their specific workflows and therefore are more expensive to change than starting fresh with a more basic version of Drupal.</p> <p dir="ltr">If you want to know more about Distributions, I recommend looking at <a href="https://www.drupal.org/project/project_distribution">Drupal’s distribution project pages</a> and this<a href="https://www.drupal.org/documentation/build/distributions"> documentation page</a>.</p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_1.png?itok=2kCMKfEd 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_1.png?itok=_LbPIy7z 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_1.png?itok=2kCMKfEd 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_1.png?itok=_LbPIy7z 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/drupal-words_1.png?itok=LtQ0DJtd 1x, /sites/default/files/styles/blog_single_tabletx2/public/drupal-words_1.png?itok=8iD82bkb 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/drupal-words_1.png?itok=EqAXAYds 1x, /sites/default/files/styles/blog_single_mobile2x/public/drupal-words_1.png?itok=gEA9Ps8u 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_1.png?itok=2kCMKfEd" alt="Drupal word cloud" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/drupal" property="schema:keywords" hreflang="en">drupal</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4091&amp;2=field_comment&amp;3=ffw_comments" token="85abb1fb"></drupal-render-placeholder> </section> Wed, 24 Aug 2016 18:43:01 +0000 Ray Saltini 4091 at https://ffwagency.com Mastering the Basics: The Content Plan https://ffwagency.com/digital-strategies-blog/mastering-basics-content-plan <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Mastering the Basics: The Content Plan</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 08/09/2016 - 19:26</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>It is amazing how often the content equation is underestimated or misunderstood whether building new properties or renewing existing sites.</p> <p>The essence of any web project is the content or message to be conveyed. Understandably organizations will engage terrific creative agencies that will put tremendous effort into strategy and design. Unfortunately this often has the unintended effect of de-emphasizing existing content that may, or may not, need to be migrated to your new project. A thorough content audit early on in your planning process will help streamline your project and your budget.</p> <p>Rarely is content brought over to a project wholesale without some important changes. This can be obvious like making PDF content more search engine friendly or less obvious like adding or changing metadata and reforming its underlying data structure. An audit will help determine if content migration should be included in your web development scope or handled as a separate component.</p> <p>But unlike planning for strategy and design, resources are often scarce when it comes to content planning and conducting a content audit. It is likely the content planning process will be reduced to task level milestones and allocated to support staff or subject matter experts with little accommodation for the importance, difficulty or breadth of the requirements. This can lead to unforeseen and unwanted surprises during the development and user acceptance cycles of your project. </p> <p>Here are a few quick resources to get you started understanding the content planning process is Drupal.</p> <p>A topic central strategy from a blog post that has only gotten more important: Understanding Content Planning: <a href="https://ffwagency.com/blog/training-notes-helping-students-understand-content-planning-or-why-taxonomy-is-their-new-best">Why Taxonomy is Your New Best Friend</a></p> <p>A great book from an accomplished Drupalist that will answer a lot of basic questions around content planning: The <a href="http://sitebuildingextravaganza.com/buy-book">Drupal User's Guide</a> by Emma Jane Hogbin Westby.</p> <p>And a new series of articles about distributed content management by our very own Hank VanZile Director of Pre Sales Consulting starting with <a href="https://ffwagency.com/what-is-distributed-web-content-management">'What is Distributed Content Management'</a></p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Distributed%20Web%20Content%20Management_0.jpg?itok=cum73YUV 1x, /sites/default/files/styles/blog_single_desktopx/public/Distributed%20Web%20Content%20Management_0.jpg?itok=R_2Xe71v 2x" media="screen and (min-width: 1601px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Distributed%20Web%20Content%20Management_0.jpg?itok=cum73YUV 1x, /sites/default/files/styles/blog_single_desktopx/public/Distributed%20Web%20Content%20Management_0.jpg?itok=R_2Xe71v 2x" media="screen and (min-width: 1201px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/Distributed%20Web%20Content%20Management_0.jpg?itok=e5OZiNRo 1x, /sites/default/files/styles/blog_single_tabletx2/public/Distributed%20Web%20Content%20Management_0.jpg?itok=6ZqM0PQy 2x" media="screen and (min-width: 769px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/Distributed%20Web%20Content%20Management_0.jpg?itok=PdMgDebf 1x, /sites/default/files/styles/blog_single_mobile2x/public/Distributed%20Web%20Content%20Management_0.jpg?itok=NCecfHuI 2x" media="(min-width: 0px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/Distributed%20Web%20Content%20Management_0.jpg?itok=cum73YUV" alt="Content Image" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/content-management" property="schema:keywords" hreflang="en">Content management</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4066&amp;2=field_comment&amp;3=ffw_comments" token="d7e24d16"></drupal-render-placeholder> </section> Tue, 09 Aug 2016 19:26:59 +0000 Ray Saltini 4066 at https://ffwagency.com Breaking New Ground - Tapping Free Open Source Drupal to Achieve Big Gains in the Energy Sector https://ffwagency.com/digital-strategies-blog/breaking-new-ground-tapping-free-open-source-drupal-achieve-big-gains <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Breaking New Ground - Tapping Free Open Source Drupal to Achieve Big Gains in the Energy Sector</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 08/09/2016 - 19:10</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Upheavals in the energy sector in recent years are driving a new Texas-sized need for efficiencies in all facets of business operations and are leading companies to begin mining new areas for streamlining and savings.</p> <p>Houston, we have a solution.</p> <p>The good news is open source technologies are opening up areas for exploration previously overlooked by many in the energy sector. In this multi-part series we’ll begin to look at how energy companies use the web and how open source internet technologies can drastically reduce acquisition costs, enable rapid prototyping, and create a potential for windfall profits.</p> <p>Here’s a preview of our upcoming series on Drupal for the Energy Sector. Use the form below to sign up for our newsletter to get notified when we post new articles or <a href="https://www.eventbrite.com/e/breaking-new-ground-tapping-the-free-open-source-drupal-cms-to-lower-costs-and-achieve-big-gains-in-tickets-25176944920">sign up for our free training session on September 16 in Houston</a>.</p> <h2><strong>Acquisition Cost</strong></h2> <p>Ever test drive a Lamborghini? Me neither. How about a proprietary web experience platform by one of the venders in Gartner’s Quadrants? Not happening. You wouldn’t buy a car you couldn’t test drive. Why consider purchasing a software platform you couldn’t pilot? Unless it’s open source you’re going to have to pay dearly for the privilege of any kind of test drive. Among the platforms listed in Gartner’s magic platform, Drupal is the only system you can freely pilot around your business needs.</p> <h2><strong>Rapid Prototyping</strong></h2> <p>Just because its free doesn’t mean you know what to do with it. Many open source systems have a huge transparent install base. You can install a simple plugin in your web browser that will tell you what Content Management System, technology or platform is being used. Drupal takes it even further with free custom developed distributions for different functional needs like ERP, localization and translation, publishing, ecommerce, event organizing, and networking. Agencies can build in various front end technologies and connect them to a Drupal backend with minimal customization.</p> <h2><strong>Windfall Profits</strong></h2> <p>How large is your IT department? Chances are the answer is something like, ‘Not big enough to do the job we have ahead of us.’ The nature of an open source project means you can tap more personnel than you could ever achieve a return on with a proprietary system. Drupal alone has over 3,000 developers that contributed to their latest version, Drupal 8. All of them are writing code that is highly secure and available for you to try and use for free.</p> <p>Stay tuned for more on each of these and other topics in the coming days.<br />  </p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/energy-slide4.jpg?itok=t0Ofnjd2 1x, /sites/default/files/styles/blog_single_desktopx/public/energy-slide4.jpg?itok=CaXn53sf 2x" media="screen and (min-width: 1601px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/energy-slide4.jpg?itok=t0Ofnjd2 1x, /sites/default/files/styles/blog_single_desktopx/public/energy-slide4.jpg?itok=CaXn53sf 2x" media="screen and (min-width: 1201px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/energy-slide4.jpg?itok=jK1cZxBJ 1x, /sites/default/files/styles/blog_single_tabletx2/public/energy-slide4.jpg?itok=ArQC4UmR 2x" media="screen and (min-width: 769px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/energy-slide4.jpg?itok=Jpt-5Yim 1x, /sites/default/files/styles/blog_single_mobile2x/public/energy-slide4.jpg?itok=pWuVQITu 2x" media="(min-width: 0px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/energy-slide4.jpg?itok=t0Ofnjd2" alt="Houston Skyline" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/energy-houston" property="schema:keywords" hreflang="en">Energy, Houston</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4061&amp;2=field_comment&amp;3=ffw_comments" token="39e85466"></drupal-render-placeholder> </section> Tue, 09 Aug 2016 19:10:02 +0000 Ray Saltini 4061 at https://ffwagency.com Real Time Government Personalization https://ffwagency.com/digital-strategies-blog/real-time-government-personalization <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Real Time Government Personalization</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 07/29/2016 - 19:10</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>We got a great response to our Real-Time Personalization Strategies for Government Websites session at Drupal GovCon last week. Most of the questions we received were from representatives of agencies just beginning to explore their options who wanted to know how to get started and to begin to understand how other agencies have started using personalization.</p> <p>So together with other staff here at FFW we’ve begun to put together a library of personalization use cases. If you work with a government agency or quasi-public authority send us your examples so we can share our findings with your colleagues.</p> <p>In the meantime we’re making <a href="http://go.ffwagency.com/personalization-strategies-for-government-websites.html">our presentation slides</a> available as a guide to personalization basics for government agencies. Once again I’d like to acknowledge my colleague Dave Sawyer for his excellent work on this topic. Feel free to contact me directly with questions at ray.saltini@ffwagency.com.</p> <p>For those of you just tuning in, web personalization allows content to be tailored to the interests of the visitor, resulting in increased engagement and better experiences. Personalized content is essential to an effective digital communications strategy, but planning and implementing a personalization solution can be complex and cost prohibitive. </p> <p>This guide introduces the basics of web personalization and presents several simple ways for government agencies to get started with web personalization using Drupal. It includes:</p> <p>    •    An overview of common personalization use cases<br />     •    A checklist of prerequisites for implementing personalization on a Drupal project<br />     •    How personalization for authenticated users differs from that of anonymous visitors<br />     •    Special privacy considerations<br />     •    Why Drupal is the best CMS to execute a personalization strategy</p> <p>Click on the <a href="https://ffwagency.com/personalization">personalization</a> tag for more information on this topic. You can also download the FFW eBook, <a href="http://go.ffwagency.com/personalization-amr-east.html">The Basics of Real-Time Personalization</a>. It has all the content shared on the blog, and more.</p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Gov-Desktop-1920-549.jpg?itok=1LAYu-_7 1x, /sites/default/files/styles/blog_single_desktopx/public/Gov-Desktop-1920-549.jpg?itok=ucCq4ift 2x" media="screen and (min-width: 1601px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/Gov-Desktop-1920-549.jpg?itok=1LAYu-_7 1x, /sites/default/files/styles/blog_single_desktopx/public/Gov-Desktop-1920-549.jpg?itok=ucCq4ift 2x" media="screen and (min-width: 1201px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/Gov-Desktop-1920-549.jpg?itok=cefY8O6E 1x, /sites/default/files/styles/blog_single_tabletx2/public/Gov-Desktop-1920-549.jpg?itok=hRjNYT6F 2x" media="screen and (min-width: 769px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/Gov-Desktop-1920-549.jpg?itok=ZSgJ7sHi 1x, /sites/default/files/styles/blog_single_mobile2x/public/Gov-Desktop-1920-549.jpg?itok=IazrdRv8 2x" media="(min-width: 0px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/Gov-Desktop-1920-549.jpg?itok=1LAYu-_7" alt="Laptop and notes" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/personalization" property="schema:keywords" hreflang="en">personalization</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=4036&amp;2=field_comment&amp;3=ffw_comments" token="bc23119d"></drupal-render-placeholder> </section> Fri, 29 Jul 2016 19:10:22 +0000 Ray Saltini 4036 at https://ffwagency.com The Power of Extending Twig Templates https://ffwagency.com/digital-strategies-blog/power-extending-twig-templates <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">The Power of Extending Twig Templates</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/david-hernandez" typeof="schema:Person" property="schema:name" datatype="">David Hernandez</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 07/21/2016 - 07:06</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Extending in Twig is a method by which one template can inherit content from another template, while still being able to override parts of that content. This relationship is easy to imagine if you are familiar with Drupal’s default system of template inheritance.</p> <p>A theme can have multiple page templates, many node templates, even more field templates, and a plethora of block and Views template. And it is common for those templates to largely be identical, save for a snippet of markup or some logic. The advantage in extending templates is reducing this duplication, thereby simplifying architecture and easing maintenance.</p> <p>Let’s say, for example, you want to change the template for a specific block, adding a wrapper div around the main content area. This might be done by copying the standard block template and giving it a name specific to your block.</p> <p>Classy’s <em>block.html.twig</em> template<br /><code>{%<br />   set classes = [<br />     'block',<br />     'block-' ~ configuration.provider|clean_class,<br />     'block-' ~ plugin_id|clean_class,<br />   ]<br /> %}<br /> &lt;div{{ attributes.addClass(classes) }}&gt;<br />   {{ title_prefix }}<br />   {% if label %}<br />     &lt;h2{{ title_attributes }}&gt;{{ label }}&lt;/h2&gt;<br />   {% endif %}<br />   {{ title_suffix }}<br />   {% block content %}<br />     {{ content }}<br />   {% endblock %}<br /> &lt;/div&gt;</code></p> <p>Copied to <em>block--my-special-block.html.twig</em><br /><code>{%<br />   set classes = [<br />     'block',<br />     'block-' ~ configuration.provider|clean_class,<br />     'block-' ~ plugin_id|clean_class,<br />   ]<br /> %}<br /> &lt;div{{ attributes.addClass(classes) }}&gt;<br />   {{ title_prefix }}<br />   {% if label %}<br />     &lt;h2{{ title_attributes }}&gt;{{ label }}&lt;/h2&gt;<br />   {% endif %}<br />   {{ title_suffix }}<br />   {% block content %}<br />     <span style="color:yellow">&lt;div class=”content-wrapper”&gt;</span>{{ content }}<span style="color:yellow">&lt;/div&gt;</span><br />   {% endblock %}<br /> &lt;/div&gt;</code></p> <p>This accomplishes your goal. You have a template specific to this particular block, and a wrapper div just where you need it. Following the same method, and with a complex site, you can end up with lots of different block templates (or node templates, or field templates, or … you get the idea.)</p> <p>But, now you have a different problem. The majority of the template is duplicated. All the CSS classes, the outer wrapper, the markup for the block title, etc. If any of that needs to be changed, like changing all block titles from H2s to H3s, you have to update every single one of those templates.</p> <p>Even if this happens infrequently enough not to be considered time consuming, it is still prone to errors. You might make a mistake in one template, miss one that needs changing, or even change one that should not be changed.</p> <h3>This is where <em>{% extends %}</em> comes in</h3> <p>Extending templates allows you to reference the original template, and only override the parts that are unique to the child template.</p> <p>In the block example, we can create a <em>block--my-special-block.html.twig</em> template with this content:</p> <p><code>{% extends "block.html.twig" %}<br /> {% block content %}<br />   &lt;div class=”content-wrapper”&gt;{{ parent() }}&lt;/div&gt;<br /> {% endblock %}</code></p> <p>That’s it. That is the whole template. Twig uses the original <em>block.html.twig</em> template as the main template, and only uses what we override in the more specific <em>block--my-special-block.html.twig</em> template.</p> <p>The <em>parent()</em> function simply returns all of the content within the <em>{% block %}</em> tags in the original template. This saves us from having to duplicate that content; keeping the template simple, and future proofing it. If any of that content changes in the original template, we don’t have to update the <em>block--my-special-block.html.twig</em> template.</p> <p>In this example, the content in the original template is fairly simple, only printing the <em>content</em> variable, but imagine if there was a large amount of multiline html and Twig code wrapped in those <em>block</em> tags.</p> <h3>Twig blocks, not Drupal blocks!</h3> <p>This overriding is done by using Twig blocks. (Terminology is fun!) The Twig block is what you see identified by the <em>{% block %}</em> and <em>{% endblock %}</em> tags. The word "content" is the identifier for the block. You can have multiple blocks in a single template.</p> <p>In the <em>block--my-special-block.html.twig</em> template file, we can do anything we want inside the block tags. Twig will replace the original templates “block” with the one in <em>block--my-special-block.html.twig</em>.</p> <h3>What else?</h3> <p>Well, you have access to pretty much everything in the main template, except the printed markup. So, for example, you can modify the variables it uses.</p> <p><code>{% extends "block.html.twig" %}<br /> {% set attributes = attributes.addClass(‘super-special’) %}</code></p> <p>This template will add a CSS class called "super-special" to the attributes printed in the outer wrapper of the original block template. The alternative would be to copy the content of the entire <em>block.html.twig</em> template just to add this class to the ‘classes’ array at the top of the file.</p> <p>You can also just set a variable that will be used by the original template.</p> <p><code>{% extends "block.html.twig" %}<br /> {% set foo = 'yellow' %}</code></p> <p>Imagine a series of variant field or content type templates that set variables used by the original template for classes, determining structure, etc.</p> <p>You can even add Twig logic.</p> <p><code>{% extends "block.html.twig" %}<br /> {% block content %}<br />   {% if foo %}<br />     &lt;div class=”content-wrapper”&gt;{{ parent() }}&lt;/div&gt;<br />   {% else %}<br />     {{ parent() }}<br />   {% endif %}<br /> {% endblock %}</code></p> <p>Pretty much anything you still might want to do with Twig, inside or outside of the <em>block</em> tags, you can still do.</p> <h3>Things to note</h3> <p>Before you jump right in, and bang your head against a wall trying to figure out why something isn’t working, there a few things to know.</p> <ul><li>The <em>{% extends %}</em> line needs to be at the top of the file.</li> <li>When overriding <strong>markup</strong>, you can only change what is within <em>block</em> tags in the original template. So add <em>{% block %}</em> tags around anything you might want to modify.</li> <li>You cannot print additional things outside of the overriding <em>block tags</em>. You will have an <em>extends</em> line. You can set variables, add comments, add logic, and override blocks. You cannot put other pieces of markup in the template. Only markup that is inside a <em>block</em>.</li> <li>If Drupal does not extend the correct template, based on what you expect from template inheritance, you may have to explicitly state the template you want.<br /> Example: <em>{% extends "@classy/block/block.html.twig" %}</em></li> </ul><h3>Additional Resources</h3> <ul><li><a href="http://twig.sensiolabs.org/doc/tags/extends.html">Twig's <em>extends</em> documentation</a></li> <li><a href="https://www.drupal.org/theme-guide/8/twig">Drupal.org's Twig documentation</a></li> <li>Keep an eye on this Drupal 8 core issue related to template inheritance problems: <a href="https://www.drupal.org/node/2387069">https://www.drupal.org/node/2387069</a></li> </ul></div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/landscape-nature-sunset-trees.jpg?itok=m3PnhsbK 1x, /sites/default/files/styles/blog_single_desktopx/public/landscape-nature-sunset-trees.jpg?itok=VFq5afZq 2x" media="screen and (min-width: 1601px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/landscape-nature-sunset-trees.jpg?itok=m3PnhsbK 1x, /sites/default/files/styles/blog_single_desktopx/public/landscape-nature-sunset-trees.jpg?itok=VFq5afZq 2x" media="screen and (min-width: 1201px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/landscape-nature-sunset-trees.jpg?itok=iLzqoYqW 1x, /sites/default/files/styles/blog_single_tabletx2/public/landscape-nature-sunset-trees.jpg?itok=8Fb8qvt4 2x" media="screen and (min-width: 769px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/landscape-nature-sunset-trees.jpg?itok=zww8ip2d 1x, /sites/default/files/styles/blog_single_mobile2x/public/landscape-nature-sunset-trees.jpg?itok=94CRSWAf 2x" media="(min-width: 0px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/landscape-nature-sunset-trees.jpg?itok=m3PnhsbK" alt="Blades of grass" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/drupal" property="schema:keywords" hreflang="en">drupal</a></li> <li><a href="/drupal-8" property="schema:keywords" hreflang="en">drupal 8</a></li> <li><a href="/theming" property="schema:keywords" hreflang="en">theming</a></li> <li><a href="/twig" property="schema:keywords" hreflang="en">twig</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=3951&amp;2=field_comment&amp;3=ffw_comments" token="ed8f09e3"></drupal-render-placeholder> </section> Thu, 21 Jul 2016 07:06:49 +0000 David Hernandez 3951 at https://ffwagency.com The ABC's of Drupal: Component, Composer, Console https://ffwagency.com/digital-strategies-blog/abcs-drupal-component-composer-console <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">The ABC&#039;s of Drupal: Component, Composer, Console</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/ray-saltini" typeof="schema:Person" property="schema:name" datatype="">Ray Saltini</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 07/18/2016 - 18:15</span> <div property="schema:articleBody" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>When we said we'd introduce you to the ABC's of Drupal we didn't just mean the easy stuff. Here are three C's that will help you understand the power behind Drupal 8.</p> <p><b>Component</b>: In Drupal 8 the word component is often used to identify one of the libraries managed by the Symfony project used by Drupal. Visit this link for a full list. <a href="https://ffwagency.com/blog/what-symfony-components-are-going-into-drupal-8">https://ffwagency.com/blog/what-symfony-components-are-going-into-drupal-8</a> While Twig is often cited as a Symfony component, strictly speaking it is a PHP theming engine created by the same individuals who founded and maintain the Symfony project.</p> <p><b>Composer</b>: Composer is a dependency manager tool for PHP, Drupal’s core scripting language. If you are familiar with a package manager it is similar but not the same. Practically speaking Composer will help you download, install and manage specific code libraries and any additional code libraries they in turn may be dependent on for a given project. It’s important to understand that Composer is project centric - it defaults to managing code and dependencies within projects (like websites) rather than globally across projects. Composer’s use in the Drupal space is growing with the adoption of Drupal 8 and has begun to be used as an alternative to .make files which have been used to help manage Drupal installs and distributions.</p> <p><b>Console</b>: Console is a component of the Symfony project. Most often when a Drupal developer refers to using Console they are talking about using Drupal Console, a suite of tools run from a command line interface (CLI) to generate boilerplate code and interact with a Drupal 8 installation. In 2014 FFW hired Drupal Console’s lead project developer Jesus Olivas to develop the project and contribute the tool back to the Drupal community to strengthen Drupal 8 adoption. Drupal Console is used as a learning tool, module and theming scaffolding, debugger and configuration tool for Drupal 8. For more information on Drupal console visit <a href="https://ffwagency.com/blog/drupal-console-an-overview-of-new-drupal-cli">https://ffwagency.com/blog/drupal-console-an-overview-of-new-drupal-cli</a></p> </div> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_0.png?itok=4SRz7IWC 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_0.png?itok=ijFjquw3 2x" media="screen and (min-width: 1601px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_0.png?itok=4SRz7IWC 1x, /sites/default/files/styles/blog_single_desktopx/public/drupal-words_0.png?itok=ijFjquw3 2x" media="screen and (min-width: 1201px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_tablet/public/drupal-words_0.png?itok=kEePdKDb 1x, /sites/default/files/styles/blog_single_tabletx2/public/drupal-words_0.png?itok=TJwRZavy 2x" media="screen and (min-width: 769px)" type="image/png"/> <source srcset="/sites/default/files/styles/blog_single_mobile/public/drupal-words_0.png?itok=okp8_5bp 1x, /sites/default/files/styles/blog_single_mobile2x/public/drupal-words_0.png?itok=3O_vIq4s 2x" media="(min-width: 0px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img property="schema:image" srcset="/sites/default/files/styles/blog_single_desktop/public/drupal-words_0.png?itok=4SRz7IWC" alt="Drupal word cloud" typeof="foaf:Image" /> </picture> </div> <h6 class="field-label heading">Tagged with</h6> <ul class="links field-items"> <li><a href="/drupal-console" property="schema:keywords" hreflang="en">Drupal Console</a></li> <li><a href="/drupal" property="schema:keywords" hreflang="en">drupal</a></li> <li><a href="/drupal-8" property="schema:keywords" hreflang="en">drupal 8</a></li> </ul> <section property="schema:comment"> <h2>Comments</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=3966&amp;2=field_comment&amp;3=ffw_comments" token="253a24ea"></drupal-render-placeholder> </section> Mon, 18 Jul 2016 18:15:24 +0000 Ray Saltini 3966 at https://ffwagency.com