On today’s show we share interviews we conducted with sponsors, speakers and attendees at New England Drupal Camp in November. Seventeen in all.

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

Interviews with:

Michael Miles Nick Silverman Matt O’Bryant Ethan Aho Mike Anello Patrick Anderson Brian Perry Aubrey Sambor Brigitte Ayerves Valderas Chris Wells Richard Hood Chris Amato Ivan Stegic Philip Frilling Rod Martin Jacob Rockowitz Whitney Hess

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Martin Anderson-Clutz - mandclu Stephen Cross - StephenCross.com

As we welcome the dawn of a brand-new year, it's the perfect time to reflect on the past and set our sights on the future. New Year's resolutions offer us the chance to positively change our personal and professional lives. Whether it's adopting healthier habits, pursuing new skills, or fostering stronger connections, the start of the year serves as a powerful catalyst for growth and self-improvement.

In the spirit of resolutions, let's focus on personal goals and consider how we can collectively enhance our contributions to the Drupal community. As advocates for open-source collaboration and innovation, we have the opportunity to amplify the reach of Drupal and strengthen its impact. By fostering a culture of inclusivity and diversity within the Drupal community, we can ensure that our collective efforts lead to more robust, accessible, and user-friendly solutions.

In the coming year, let's commit to bringing Drupal to new heights by actively engaging with and reaching out to a broader audience. Embracing diversity and inclusion within the Drupal community enriches our collaborative environment and opens doors to fresh perspectives and ideas. Let's make 2024 a year of growth, unity, and empowerment for ourselves and the Drupal ecosystem.

We're excited to share some intriguing Drupal-related news from last week! Vimal Joseph, Director of MarTech at Zyxware, conversed with Jonathan Carter, the Debian Project Lead (DPL). This insightful dialogue originated during their in-person meeting at the Global DebConf, the Debian Project's annual developer conference, held in Kochi, Kerala, India. The conversation culminated in an engaging email interview, shedding light on Carter's journey within the Debian ecosystem. To read the complete interview, click here. 

In addition, The DropTimes (TDT) contacted the initiative leads and contributors of Distributions and Recipes. Tim Hestenes Lehnen and Jim Birch generously accepted our request. In an email correspondence with Alka Elizabeth, sub-editor of TDT, they shared valuable insights. Dive into the complete article here.

Delve into my latest articles featuring insights from Coby Sher and Pratik Kamble on the transformative API Client initiative. Coby shares his excitement for the project, emphasizing its efficiency for developers, while Pratik highlights the positive impact of the official JavaScript library on data retrieval. Read the full article here.

Also, experience the festive zeal of Specbee's dynamic team in Elma John's holiday reflection. Discover their celebrations and aspirations for the Drupal community in this heartwarming piece. Don't miss out – read the full article here for festive inspiration and community spirit.

Secure your spot at Drupal Mountain Camp 2024 with Early Bird tickets! Act now, as Early Bird pricing ends on January 20, 2024. Drupal Mountain Camp 2024 is gearing up to host an illustrious keynote speaker—Preston So, a distinguished figure in product, design, engineering, and innovation, and Jutta Horstmann, a passionate advocate for feminist sustainability and a leading voice in free software advocacy, is set to be another keynote speakers at Drupal Mountain Camp. 

Secure your spot at the two-day nerd-delicious NERD Summit 2024. Get your tickets and be part of an empowering event where knowledge and collaboration take center stage. MidCamp, a significant Drupal event, extends its speaker submission deadline to January 7, 2024.  Start the year with the Twin Cities Drupal community at the University of Minnesota's Sprint Day on January 12, 2024!

Discover how the User One Time Login module in Drupal revolutionizes user authentication by enabling secure single sign-on links and unique login access, offering enhanced control and flexibility for site administrators. Read about the View Filter Commerce Promotion module, designed to streamline commerce promotion management within Drupal. Klaus Purer, Ivan Tibezh, Juraj Falat, and Andrii Cheredn have been officially recognized as current security release members of the D7Security initiative to bolster Drupal 7 projects' security.

Learn about the recently introduced Bunny Stream module by Borja Vicente, which seamlessly integrates Drupal Media with Bunny.net’s streaming service, offering enhanced video upload and embedding capabilities for Drupal websites. Explore TokenLink, the recently launched Drupal module revolutionizing token integration. Developed by Cosmos, this module offers enhanced flexibility and promises efficient token management for diverse content needs. Get the complete insight here. Learn about the recently revealed Drupalwned script designed to escalate Cross-Site Scripting vulnerabilities to critical levels within the Drupal CMS. 

Due to the compulsion to limit the selection of stories, we can only share this much for now. Wishing you continued success and inspiration in your Drupal journey!

To get timely updates, follow us on LinkedIn, Twitter and Facebook.

Thank you,

Sincerely

Kazima Abbas
Sub-Editor, TheDropTimes

This December was the second incarnation of the Drupal Advent Calendar project.

This started on a whim in 2022, and while fun, I knew I didn’t want to write it all myself the second year.

So at DrupalCon Lille, I started asking people to get involved in this year’s calendar, initially focusing on people I know. The response was generally positive, with most people eager to take part.

My aim was to have a different person talk about an aspect of Drupal behind each door, and that was more or less how it worked out.

When I thought of asking people to take part, my aim was to cover 24 topics without…

Allowing your content creators to embed images in text fields is a big risk if you don't have the right measures in place to get properly rendered images without jeopardizing your site's performance. We faced this issue first-hand with embedded images due to not using the right configuration and this lead to extremely large images being rendered. In this post I'll go over the techniques I took for addressing those issues and set up a system for image embeds that is solid and performant.

I started by writing a seven-part guide on how to setup responsive images. In this post I'll focus on image embeds. If you followed or read the responsive images guide, you should be able to take advantage of some of the work we did there in this post. The guidelines covered here include:

• Defining requirements
• Image styles
• Media view modes
• Text format configuration

Defining requirements

Before you write the first line of code or set the first drupal configuration for this issue, you need to have a clear understanding of your requirements. Here is a summary of my requirements:

• Only certain user roles can embed images

  This means we need to figure out if the text formats used in our site will allow us to set the restrictions we need. Otherwise we may need to create or edit a text format for our target user roles.

• Users need to be able to choose the image size and aspect ratio when embedding images

  We defined the image sizes and aspect ratios and assigned names that were user-friendly for non-technical users. We came up with name options we think our users will find easy to work with such as:

  • Small square, Small portrait, Small rectangular
  • Medium square, Medium portrait, Medium rectangular, Medium rectangular wide
  • Large square, Large rectangular, Large rectangular wide
  • Extra large square, Extra large rectangular, Extra large rectangular wide

• If no option is selected by users, set a default image size

  For the default option when no selection is made by the user, we decided to use the Medium rectangular option. This has an aspect ratio of 3:2 and it measures about 720x480.

• Existing Media items need to be available for embedding

  This was a tricky one because my original inclination was to create a new Media type so we can isolate all configuration for its view modes and not overpopulate our default Media type. However, this ended up not working for us because when you limit your image embeds to only use a new Media type, you don't get access to any of the media items (images), that have already been uploaded to the Media library using other media types. Ultimately we ended up using Drupal core's Media type, Image, and our dev team had to compromise on having a very busy list of view modes for this media type.

• Images need the ability to be cropped wihin the Media page

  Since most of our images already provide the ability to be cropped at different aspect ratios, using the core Media type in the previous bullet point made this an easy solution.

Image styles

It all starts with image styles. I'm not going to go over how to create image styles, you can read my post Image styles in Drupal. The one thing I am going to repeat however is the importance of creating reusable image styles. Reusable image styles can help you reduce the number of image styles you create while providing the flexibility you need with each use case.

Image styles are key as each of the size options we defined above translate into image styles. So Small square for example, is an image style that is defined as 1:1 (250px). Medium rectangular would be something like 3:2 (720x480), etc. You may be wondering, how do you plan on using fiendly names for your content editors when your image styles names are not very friendly? Great question. Since we are using Drupal's Media, content editors do not interact directly with image styles, they do with Media view modes and this is where we will use more friendly names.

Media view modes

View modes are one of Drupal's powerful features. Being able to display content is different ways with little effort can turn a simple website into a dynamic content hub. The example I always give when someone asks me what view modes are or how do they work is the Amazon website. When you are viewing a product in amazon.com, or most retail websites for that matter, you will notice that the same product or similar ones appear all over the page but in slightly different ways, with different fields or styles. See the page below for an example.

The image above shows many ways in which a product can be displayed. I've numbered each display.

In Drupal, every entity such as content types, media types, blocks, etc., offer the ability to create view modes. For the purpose of image embeds, we will create a Media type view mode for each image style we plan on using. The view modes is what content editors will interact with when choosing an image size or aspect ratio during the image embed process. This is where we will use the user-friendly names we defined earlier. Let's go over how this relationship between view modes and image styles works for image embeds.

Configure view modes for the Image media type

1. In your Drupal site, create an image style for each image size option you wish to provide to users when embedding images.

2. Next, create a Media view mode for each image style (/admin/structure/display-modes/view). Very iimportant: Remember the view mode's label (name) is where we are going to use the friendly name (i.e. Medium rectangular (720x480)). I like to keep the machine name similar to the label so it's easier to debug or identify in code (i.e. medium_rectangular_720x480).

3. Now, let's tie 1 & 2 together:

   • Go to the media type you plan on using for media embeds (/admin/structure/media/manage/image/display). I am using Drupal core's Image media type.
   • Scroll down and expand the Custom display settings fieldset.
   • Check each of the view modes you created in step 2 and click Save.

4. Now click each of the view modes and update the image field to use the respective/matching image style.

Configure the text format

View modes and image styles are all configured. Now let's configure the Text format that authorized users will use to embed images.

1. Go to the Text formats and editors page (/admin/config/content/formats)
2. Click Configure next to the text format you plan on using (i.e. Full HTML)
3. Ensure the right user roles are selected
4. Within the Toolbar configuration section, drag the Drupal media button from the Available buttons options to the Active toolbar section. You could probably remove the original insert image button since you won't be using it.
5. Scroll to the Enabled filters section and check the Embed media checkbox
6. Scroll to the Filter settings section and set the following:

   • Default view mode: This is the default display that will be used if content editors don't pick an option when embedding images. Select any of the view modes that represents the image size you want to use as default.

   • Media types selectable in the Media Library: Select the Media type you plan on using. In my case is Image.

   • View modes selectable in the 'Edit media' dialog: Finally, select each of the view modes you created in the previous section. FYI: View modes will be sorted in alpha order by their machine name. In my case I had to prefix some of the machine names with either "a" or "b" so the list of options for the users to choose from would be nicely organized by their label name. See screnshot below.

   • Click Save configuration

Testing your configuration

Now that we've completed all the configuration we should be able to take it for test drive.

• Go to any page where there is a text field with a WYSIWYG editor
• Make sure you are using the right text format by selecting it at the bottom of the text field where you want to embed an image
• Click the Insert media button from the editor's toolbar
• Select or upload the image you'd like to embed
• When the image has been inserted, click on it and you should see several options of actions you can do with the image. Things like align the image, add a caption, link it, and you should also see a selection box listing all the view modes you created.
• After making your selection you should immediately see the image size/aspect ratio change to the one you selected. When you are happy with your selection, click the Save button to save your page.

Important: Depending on your site's configuration, the options for changing your image size may look different than mine. In my case, I am only using Drupal's core modules and this is how the options look for me:

In closing

Putting a system like this for your image embeds will give you the piece of mind that content editors have options to choose how big or small they would like images to be displayed, and from a performance point of view, if your image styles are done properly, you can rest assurred that bloated images will never be rendered because you have put the guard rails in place to avoid this from happening.

I hope you found this article useful and can put these techniques to use in your own Drupal project. Happy New Year! 🎉 🎊 🎆 👋

When it comes to building an e-commerce website, choosing the right platform is crucial for success. With so many options available, it can be overwhelming to decide which one is the best fit for your business. However, if you want a flexible and powerful solution, Drupal Commerce should be at the top of your list.

Drupal is an exceptional open-source content management system (CMS) that has captivated the hearts of business organizations worldwide. Its incredible features, scalability, flexibility, and ability to effortlessly handle large and complex websites give it an edge over all its competitors.

Drupal development services comprise a wide range of themes, modules, and features, the CMS is a popular choice for multitudinous applications from personal blogs to enterprise-level websites. It has a standard version that works perfectly for small websites that require limited functionality and an enterprise version for large websites that need more functionality.