Today we are talking about the Drupal State module with Brian Perry.

For show notes visit: www.talkingDrupal.com/377

• NedCamp
• Drupal State Module
• Who is involved
• Drupal State - a module without a release
• NPM
• Decoupled menus
• What problem does this solve
• How is this different from GraphQl
• In production
• Roadmap
• Getting involved
• Which front-end
• Individual Drupal ecosystems like commerce
• Evaluating JS Frameworks
• Stability

• Vite
• Snowflakes

Brian Perry - Brianperry.dev @bricomedy

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Leslie Glynn - redfinsolutions.com @leslieglynn

Martin Anderson-Clutz - @mandclu Christmas Snow Adds a Javascript snow effect to your website.

On the day Drupal 10 is released DXPR will come out not just with compatible versions of our Drupal page builder and low-code Drupal theme but with an entirely new distribution that will give an out-of-the-box Drupal experience that will impress just about anyone whether they are site builders, developers, or content editors.

TLDR:

• Drupal 10 support
• Bootstrap 5 support
• Acquia Lightning alternative
• Gin + DXPR =  winning hearts

Bootstrap 5 support

On Wednesday we are not just coming out with full Drupal 10 support but also with both DXPR Builder and DXPR Theme being capable of running on Bootstrap 5!

No need to worry if your site is still on Bootstrap 3, we don't suggest you update your existing site to Bootstrap 3 as the migration between bootstrap versions is painful. We will keep supporting Bootstrap 3 and 4 as well. More details to come!

Launch with DXPR and Drupal 10

Launch your new site with the best Drupal version ever. Drupal 10 is faster and better in significant ways. You can read all about it in our Drupal 10 blog. We started early with making our products compatible with Drupal 10 and today you can already start using DXPR Builder and DXPR Theme on Drupal 10.

Since we had time to spare, on Wednesday we're also launching 2 new Drupal distributions (demo sites) on Drupal 10.

Adopting the Gin ecosystem

Drupal 10 is shipping with the Claro admin theme but DXPR is now adopting Claro's younger brother: Gin. Gin is a design system made by Sacha who is also responsible for the Claro theme. Gin is where the state of the art of Drupal UX is happening and DXPR is committed to using the Gin ecosystem and contributing to its development. 

Our Acquia Lightning alternative: Marketing CMS

DXPR's demo sites used to be based on Acquia Lightning. This Drupal distribution has been great but met the end of its life a year ago. We learned a ton from working with this distribution, and we realized that we don't want to depend on other companies' distributions anymore, so we created Marketing CMS.

Marketing CMS sets up Drupal 9 of 10 with DXPR Builder and DXPR Theme, complete with content types, drag and drop blocks, media library integration, and 3 user profiles to provide simple DXPR Builder UIs to different user roles. We also ship the distro with modern UX solutions like responsive preview and admin toolbar searching (see video above). 

The admin demo is free, no card required!

Whilst working on a module I found that I needed to do something that was difficult to find information for. I think part of that is because the solution is simpler than I was thinking, but it did cause me to get lost in source code and internet issues for a while.

What I needed to do was to load in a list of configuration entities that matched certain parameters. The configuration entity I was dealing with was used to manipulate the output of a form, but only if certain conditions were met first. I thought that this information might be useful to others who are looking to load configuration entities.

In this article I will show how to search for configuration entities and how to load those entities once found. I'll be using blocks for the examples here, but the same rules will apply to any configuration entities you want to load.

Loading The Entity Query Service

What we need to do first is get the entity query service. In case it wasn't obvious (and it wasn't to me) you can search for configuration entities in the same way as you would any other sort of entity. If you have used entity query to find users or pages of content then this is the same mechanism. There are, however, a couple of ways to go about doing this.

The first (and simplest) way of loading entity query is to just grab the object for the configuration entity we want to load.

Whilst using this method does allow us to search for configuration entities, it doesn't allow us to load those entities. To do that we need to use entity_type.manager service to find the storage for the configuration entity we want to load.

Read more.

My role on the committer team is that of a release manager. We're the folks who actually create the Drupal core releases that you can install on your site.

Images are a crucial consideration when you’re updating or expanding your website. Done right, they're a powerful tool for communicating your message and enriching the user experience. Done wrong, they can leave a bad impression and weaken your digital presence. 

This guide explains how to pick meaningful images that create a connection with your audience. You’ll also learn how to optimize, resize, and compress images so they’re ready for the web. 

Selecting the Right Images

Take time to explore the images available to you. You can search and download free images via Unsplash and Pexels. 

Here are some key points to consider:

• Quality. Choose images with a high resolution and correct exposure to show users you care about quality. Avoid images that are low-res, blurry, tilted, or incorrectly exposed.
• Tone. Images should match how your organization wants to come across. If there are people in the image, think about the impression their poses and clothing give – for example, do they seem professional, friendly, or casual?
• Inclusivity. Pictures are a great way to connect with your audience. Portraying different people can help make them feel welcome. Be inclusive of all races, genders, ethnicities, abilities, sexual orientations, and other characteristics. Pay particular attention to traditionally underrepresented groups. 
• Variety. Show a variety of environments to keep things interesting for users. Have some images that feature people and some that don’t. Switch things up with different crops and angles.
• Composition. Images with simple compositions and no clutter tend to be less distracting and overwhelming. This allows users to focus on what’s really important.
• Distinctiveness. Look for images that make your platform stand out from the crowd. Avoid generic stock photos as they’re boring and leave a poor impression on users. 
• Design specifications. For example, banner images can be tricky to pick due to their unusual dimensions. Avoid close-ups of people as their heads may get chopped off on mobile. Ensure any text over the banner is legible. 

Examples of Well-Chosen Images

The Princeton International website encourages students to explore international learning opportunities. Its visual design is inspired by travel websites to create a sense of adventure. It includes a variety of eye-catching photos that showcase the exciting destinations and diverse cultures students can experience. 

The Canada Foundation for Innovation website features banner images that reflect the key themes of each page. A variety of colours, environments, and angles creates visual interest, while simple compositions ensure they don’t get distracted. The white text is positioned over darker and cleaner parts of the image so that it’s easy to read.

The OCAD U Admissions website features student-created art in a variety of striking styles. It’s a bold visual direction that supports the university’s reputation for excellence in art, design, and digital media.

Making Touch-Ups

Once you’ve chosen your images, use a photo editing app to fine-tune them. There are a variety of correction tools in Photoshop under Adjustments. Or you could try a free app such as Pixlr or GIMP. 

Adjust the following settings if necessary to enhance your photo and match it to the style of other images on your site: 

• Exposure to change the overall brightness of the image.
• Brightness to change mainly the brightness of midtones. 
• Contrast to control the difference between shadows and highlights.
• Saturation to control how colourful your image is. 

Use the crop and rotation tools to fix bad angles and reduce visual clutter. You’ll also need to crop images to the aspect ratio specified by your platform’s design. Aspect ratio is the ratio of width to height. For example, an aspect ratio of 1:1 is a perfect square. If you had a 2500px by 3500px image, you’d need to crop the top or bottom of the image by 1000px for a 1:1 aspect ratio.

Saving Images at Retina Dimensions

Retina dimensions are a nice way to create a higher-resolution image. It means saving an image at double the required dimensions. 

Here’s an example. Let’s say that we are designing a picture for a banner whose actual dimensions are 2400 x 1600px. We would save it as 4800 x 3200px to create a retina image. 

The image won’t appear bigger than usual if you’re using web components. Drupal will automatically fit the image into the given physical space. By squeezing twice the number of pixels into the same space, it creates a higher pixel density and therefore a better quality image. 

A retina image may appear bigger if you’re creating a WYSIWYG page. You can either force the image dimensions in the front-end or upload the image at its normal (non-retina) dimensions. 

Compressing Images for Faster Load Times

It’s important to balance image quality with image compression. Compressing your images reduces their file size so that loading them is faster and takes less data. This makes your platform more accessible, especially to users with slow-speed internet connections and those who are using mobile data while they’re on the move. 

Images should typically be no larger than 300-500KB. Smaller is usually better, especially for smaller-scale images. If many of your images exceed this, users will experience a slow and laggy web performance.

You can run an action in Photoshop to automatically batch and save multiple images in one clean sweep. Export your images at a quality between 80-85%. Finally, compress the images with a free tool like TinyPNG or Compressor before uploading them to your platform.

Defining Focal Points in Drupal

Drupal automatically scales your images for desktop, mobile, and tablet. This means you don’t have to upload different versions of the same image. 

Some images will scale at the same aspect ratio meaning the image will look the same except smaller or bigger. Other images (e.g. mobile banners) may be cropped to fit various devices meaning parts of the image may not always be visible. 

You can control how images scale on different devices by selecting a focal point on the image in Drupal. Preview the image on desktop, mobile, and tablet to ensure it looks good before publishing.

Need more guidance?

This article is a great starting point for adding visual interest to your site and ensuring your images look as good as possible. 

Want to take your knowledge to the next level? Sign up for training in UX design or content strategy. 

Drupal 10 was released on December 14, 2022, with new features and new possibilities. Here's what you need to know.

Making Drupal beautiful with Claro and OIivero

Drupal 10 has two new default themes, and we are proud to say that we helped push these initiatives forward so that they would be ready and stable for this release.