Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)
PhpStorm has a Drupal plugin you can add to your IDE. In this tutorial you will learn how to configure the Drupal plugin and which new special features it provides, such as code generation, code completion, knowledge of Drupal coding standards, and more.
For more information about using PhpStorm with Drupal 8 and Symfony, read PhpStorm’s Symfony2-specific features for Drupal 8 tutorial from JetBrains.
Additional resources
Please note that this series covers PhpStorm versions 6 and 7 only.
For the latest documentation (including up-to-date videos), see JetBrains documentation.
Image Styles
CourseThis video is about making custom image sizes for automatic display on your site! I am going to show you how you can create custom thumbnail sizes that can be used in your content types.
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! And we can specify the exact site we want to use.
I am assuming that you already know how to update the field display settings in your content type to select an image style preset.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled.
We are going to create an image display that has an aspect ratio of 4”x6”, but much smaller. Then we are going to add a couple other treatments to it so that it fits the theme of Photo Journal.
Patches are used to describe modifications made to one or more code files, and can be used to share those changes.
Entities are the fundamental building blocks that make up any Drupal site. Having a good understanding of the Entity system is an important part of ensuring the data model of your Drupal site is set up properly.
Modules are bundles of primarily PHP code that extend Drupal in order to add new features or alter existing functionality.
Theme Drupal Sites
GuideStandardized documentation is crucial to a project, whether it is just you or an entire team working on it. In this tutorial we're going to look at:
- Standards for
@docblock
comments - Standards for inline comments
- Why standards for documentation and comments are as important as standards for the rest of your code.
By the end of this tutorial you'll know how to add inline documentation for all the PHP code that you write for Drupal.
Formatting standards cover things like the use of whitespace, how to format control structures, and other aspects that affect your code's appearance and format.
In this tutorial we’ll talk specifically about standards regarding formatting. This is by no means an exhaustive list of PHP syntax rules, but rather is focused on formatting standards for Drupal.
By the end of this tutorial you'll know about the most common Drupal code formatting standards as well as where to find more information when questions arise.
Translations have their own special functions in both Drupal 7 and 8, and there are some rules for standardizing how they are used that make things clearer for everyone.
In this tutorial we'll look at:
- When to use, and when not to use, translation utilities to output translatable strings
- How placeholders work in translatable strings
- Tips for creating links inside of translatable strings
By the end of this tutorial you should know when, and how, to make strings in your code translatable using Drupal's translation utility functions.
Once you know what code standards are and why you should use them, you need to learn how to implement Drupal coding standards in your projects. This tutorial will walk through some of the steps you can take to make this as easy as possible. We'll cover:
- Configuring your editor or IDE to warn you of coding standards violations
- Setting up the Coder module and phpcs to scan and review your code
- Performing team code reviews
By the end of this tutorial you should be able to configure your development environment and implement processes in your workflow that help to ensure your code meets Drupal's coding standards guidelines.
Drupal core uses object-oriented programming (OOP). This method of programming introduces new coding standards to the project. In this tutorial we'll cover the Drupal coding standards that relate to object-oriented PHP code.
By the end of this tutorial you should know how to implement the Drupal coding standards related to OOP, and where to find more information when you've got questions about the standards.
Before you dive into using coding standards it makes sense to understand exactly what they are and why they’re important, generally and specifically in the Drupal community. In this tutorial we will look at:
- What coding standards are
- Why following coding standards is a good idea
- Where coding standards come from
By the end of this tutorial you'll have a better understanding of what coding standards are, and why you should be adhering to them when you write code.
Today's Drupal developer needs more than just a text editor and FTP. Best practice Drupal development involves a suite of tools, processes, and more than one server environment.
This tutorial is directed toward an audience that is not familiar with best practices in Drupal Development and methods involving version control with Git, IDEs, local development environments, and deployment environments (i.e. stage, live). Here we're providing a high-level overview of these topics with links to dive deeper if you need more information.
In this tutorial, we'll cover:
- Introduce Version Control Systems such as Git
- Discuss how Git can be used to deploy to remote web servers
- Review programming-centric text editors and Integrated Development Environments
- Identify the need for a local development environment.
- Explain shared deployment environments including production and stage.
Layouts
TopicA layout can describe how various components are arranged on various levels—from an entire page from the header to the footer, to just the “middle” where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.
Coding Standards in Drupal
CourseIn this exercise you will demonstrate that you understand the CSS patterns used for smaller elements of Drupal such as fields, and can create selectors which override them appropriately. You will also override template files to create your own markup and suggest new template files.
In this exercise you will demonstrate your ability to attach JavaScript to themes, and use Drupal behaviors to enhance the functionality of a website.