One of our big Drupal 7 to Drupal 9 migration projects included bringing across image cropping functionality and data on a longstanding client's website. This site had used the Imagefield Crop module, but that was only for Drupal 7. We set up Image Widget Crop for the new site, which is better in a few ways but is also fundamentally different. The old site referenced the cropped images from content, only bringing in the originally-uploaded images for edit pages, to allow editors to adjust the cropping, which was then used wherever that image appeared on the frontend. The new Image Widget Crop module, however, allows configuring different crops for different situations. For example, the same image could be cropped one way for use as a widescreen banner, but another way for when it appears in a grid of squares (as in the following screenshot). 

The real challenge was in migrating the data! But we call ourselves Drupal experts, so of course we dug to find solutions. What we came up with might not work for everyone, but hopefully sharing this might help someone else that might be close enough to our situation. We found the following steps were necessary...

1. Set up the new configuration

Configure the crop types, cropping settings, fields and widgets etc for the Drupal 9 site to use, including an image media type. I won't go into detail here as there are already guides about how to do this - e.g. from the Drupal Media Team and OSTraining. What I'm focussed on is how to migrate the cropped images and their original files, and the references to use them in the right places.

2. Migrate files, including media entities, and references to them

The old site's files can be migrated into the new site easily enough. I then use the Media Migration module to create media image entities that reference those files. In my situation, it was fine to migrate the file IDs over and to use matching media IDs too. I expect this won't be an option on some projects but it made things much easier for me.

The Media Migration module uses 'dealer' plugin classes to cover different types of media, but its 'image' dealer plugin ignores images handled by Drupal 7's Imagefield Crop module. So I had to replace that with a custom plugin.

In general, I aimed to migrate the originally-uploaded image files (i.e. from before cropping was applied), and reference those from host content. That's how the new Image Widget Crop module usually references the images, whereas the Imagefield Crop module referenced the cropped image files. The Image Widget Crop module usually maps to the cropped images via the chosen 'crop type' referenced in image styles so that different crops can be used for the same field when output in different places. Therefore, any migrations for it will have to translate back from the IDs of cropped image files to the IDs for 'uncropped' ones.

A custom module's hook_migrate_prepare_row() did that file ID translation, and also skipped migrating cropped images as media entities. Since the cropped images won't be referenced from content, they would just clog up the media library as duplicates of the original uncropped images. Detecting which files were only cropped images that wouldn't be referenced from elsewhere was a bit tricky, and one of the slowest parts of my migrations. So I allowed file entities to be created for these cropped images, as I figured that didn't matter so much. I imagine these two bits could have been done better with specific plugin classes rather than this hook.

For migrating the right data into the media field on every node/entity that referenced croppable images, I made a custom process plugin to make use of that mapping of cropped-to-uncropped file IDs. So my node migration YAML files declared this plugin should be used to get the uncropped file ID on the destination, that corresponded to the cropped images' IDs on the source end, like this:

That plugin basically just looks up the ID of the cropped file from the translation map that was set by the hook_migrate_prepare_row() and returns the ID of the uncropped image file.

3. Migrate cropping data

I needed additional migrations for the data in every Imagefield Crop field about the dimensions and positioning of the crops themselves. These created 'crop' entities, using a custom source plugin for a database table that extended Drupal\migrate\Plugin\migrate\source\SqlBase. This allowed me to use a bundle filter in my migrations, so different crop types could be used in Drupal 9 for images on different content types that happened to use the same source field storage in Drupal 7. The YAML for these migrations is simple enough to share:

4. Mitigate missing features in the new site

The old and new modules have their own different approaches, which means they don't quite have feature parity. I actually think the new Image Widget Crop module has a better overall approach but our old site did make use of some settings unique to Imagefield Crop which we wanted to bring across. Most interestingly, as many of the old site's image fields were configured to use the same dimensions or aspect ratios, we could set up crops on the new site to be shared across those fields. However, there were a few fields that had slightly different constraints on 'input' despite appearing the same on 'output'. So we had to alter Image Widget Crop's widget (via two levels of #process Form API callbacks!) to apply different maximum post-cropping dimensions for certain contexts. Editors could bypass this fairly easily, but it covers the most common journeys that they would normally follow.

Mission accomplished!

After all that, you can probably see it was quite a complex challenge! A lot of code went into this, which I have shared barely any of here but if you find yourself in a similar scenario and need help, get in touch or leave a comment here. If anyone actually needs the PHP or YAML code, maybe I can look at packaging it up to share. But I know it's probably not generic enough to cover everyone's situations - I'd love to contribute it back to the community otherwise.

In today’s digitally-focused world, it’s nearly impossible to do business without a presence on the world wide web. In fact, your website should be a cornerstone of your marketing efforts and a primary tool for reaching your audience.

For your site to effectively drive your business forward, it needs to be well-constructed and consistently maintained. That’s a big job. And it needs the right partner.

Our four-part process for website development is a proven approach to building an impactful online presence. Our ebook outlines the expectations and considerations for each distinct phase —  Discovery, Design, Development, and Post-Launch — so that you are well-prepared to build a website that will serve your business now and into the future.

We've had lots of requests for changing the design of subsites in LGD. Here's how I'd do it.

This year’s IWD’s theme is #EmbraceEquity. This should remind everyone everywhere about the importance of creating a genuinely inclusive society, challenging gender stereotypes, and calling out biases. 

In the ImageX team, we are wholeheartedly aligned with these values and committed to fostering a truly equitable workplace. Even though tech is seen as a male-dominated industry, the Women of ImageX are key drivers behind the success of our organization. In celebration of this year’s day, we’re showcasing some of our team who are leaders in their areas; Mahya Golabi [design], Carol Pettirossi [development], Alla Petrovska [operations], and Kylie Aldridge-Ogden [delivery].  These four women are just a small snapshot of the awesome talent we are fortunate to work alongside everyday at ImageX, with each and every one of our women leading the way in their roles within a male dominated industry. 

Getting acquainted: roles and backgrounds

To start, the team shared their roles and how they ended up where they are today:

Carol, Software Architect: “I’m a female Drupal Architect that has been working in the Tech industry for 14 years. I started creating websites back in the day of blogs.

I studied programming in high school which gave me the opportunity to start my tech career before getting a university degree. I love working with sites and platforms, building the best experience for users so they can find information and perform tasks digitally whenever possible.”

Alla, HR & Operations Manager (Ukraine): “ I’ve been with the organization for 6 years already and being an explorer in my soul with a love to connect the right people with each other and make things work, I find ImageX the perfect match for me. It is a place with a multicultural team distributed over the globe where diversity is well represented."

Talking about the meaning of IWD

We then asked the team why International Women's Day is important to them.

Mahya: “As an immigrant, I believe, recognizing and celebrating the contributions of immigrant women to society can help promote inclusion and reduce stereotypes and prejudices. It can also provide a platform for immigrant women to share their experiences and advocate for their rights.

I think Women's Day serves as a reminder that women, regardless of their background, deserve equal rights and opportunities.”

The importance of diversity in the workplace

We were curious to know what the group thinks about diversity in the workplace, especially as it’s one of the intrinsic values of our international team.

Carol: “Women, as well as other underrepresented groups, bring diverse skill sets, viewpoints, and experiences to the workplace. Different cultures and experiences are proven to help businesses function better and also improve their processes. Each employee has their individual strengths and potential. Valuing the differences of others is what ultimately brings us all together and can be the secret to a successful, thriving workplace and a fair work culture.”

Mahya: “As a creative person, in my view, diversity brings in creativity and innovation: When people from different backgrounds and with different experiences work together, they bring different perspectives and ideas to the table. This can lead to more creative and innovative solutions to problems.”

Sharing their role models

Many women have a role model who inspires and drives them toward greatness. So who are the role models for the women of ImageX? 

Kylie: “From a professional standpoint, Sheryl Sandberg, the COO of Meta is one role model. I was introduced to her through her book, Lean In, which was recommended to me by a former male boss. Sheryl has a belief that echoes mine — if you’re going to have a family, make sure there is equity in the household. Another role model of mine is Heather Reisman, the CEO of Indigo. She was the first major female CEO in Canada and as an avid reader, I always kept an eye on her work. From a personal standpoint, my role model is my mother. I’ve always had a working mother and as a daughter, that is an amazing thing to witness.”

Mahya: “My mother is a strong entrepreneur who started as a teacher and now owns and directs three schools. She has shown me how to be an independent, strong woman when you are confident, resilient, and self-sufficient.”

Carol: “It would also be my mom. She is a symbol of resilience to me. She had a difficult upbringing and had to stop studying early. However, she overcame the difficulties and after I was born she decided to restart studying and become a nurse. She does night shifts at the hospital but she always enjoyed her job and taught me how important it is to love what you do.”

Alla: “My role model is all Ukrainian women: on the front line of the battlefield, or cultural, political, and social front lines — they all are fighting now for democracy, equity, freedom, and protection of human rights.”

Advice to women at the beginning of their career

It can be challenging to start a path in a new professional field, especially as a woman. How can women grow professionally and fight gender stereotypes in the workplace? 

Alla: “Listen to yourself and seek a role model or mentor. If you fail, learn from it - it is your opportunity to grow, don’t skip reflecting on it, as most likely you’ll fail over the same thing again in the future; have a plan…and a back-up plan.”

Kylie: “Never feel guilty to ask for what you need. While the pay gap is narrowing, more often than not, women who don’t get pay rises that mirror their male peers because they don’t ask for it. Make sure you advocate for yourself. Also, don’t internalize the labels and tropes that women are given in the workplace. For instance, “women are bossy while men are bold” or “women are emotional, men are direct”. We don’t need those, they’re not for us.”

Empowering other women in the workplace

Women can empower other women, lift them up, and help them grow. Together, they can be an invincible force. The women of ImageX have shared some useful ways they look toto empower other women in the workplace: 

Carol: “Providing mentorship and training to develop junior women into senior and leadership roles. Making sure that they are heard and have a seat at the table.  Making sure that there is an open communication mechanism for women to report on situations that they feel undervalued or not heard.”

Alla: “Be yourself, accept and respect others individuality; speak openly (everyone has their own strong and weak sides — be open about them); treat everyone fairly; be approachable, offer help and be ready to back up; don’t be afraid of speaking about the failures; celebrate wins together!”

Dinner with three inspirational women

Asking everyone to choose three inspirational women, dead or alive, that they would have dinner with was one of our favourite talking points. 

Kylie: “I couldn’t narrow it down to 3 so I have four:

1. Mary Wollstonecraft — She was the leader of the suffrage movement in England. She was fighting to make women people under the law. She was one of the pioneers that laid the groundwork for where we are today;

2 & 3. Gloria Steinem & Ruth Bader Ginsberg — Two feminist icons who have done more for gender equity and advocacy than anyone else. We wouldn’t have half the rights we have now without these two women. They worked together and were longtime allies, you can't have one without the other.

4. Michelle Obama — Who wouldn't want to have lunch with her? She built herself a platform and never took it for granted. She comes across as so humble and down to earth, and yet has this huge and beautiful platform that she uses for positive change.”

Carol: “1. Gloria Maria: She was a black Brazilian journalist that always talked about women being empowered. She represented the black community and had racism and feminism in her agenda. She also traveled around the world reporting different cultures. Can you imagine how wonderful a chat would be with her?

2. Susie Wolff: She is the Director of Formula 1 Academy and a former racing driver. She is now responsible for nurturing female talents in the sport. In such a male dominant field, it would be great to have dinner with her and learn how she deals with the challenges on a daily basis. 

3. Helena Rizzo: She is one of the best chefs in the world and the only Brazilian female chef leading a restaurant awarded with a Michelin star. Gastronomy is another field dominated by men and she excels in it. She is also involved in many charity and feminist initiatives.”

How organizations can #EmbraceEquity

The ultimate question that wrapped up our conversation was related to the IWD 2023’s #EmbraceEquity campaign theme. How do the team feel that organizations can create a culture which supports equity? 

Kylie:  “I read a 2022 study from PwC on Global Workforce Hopes and Fears. The largest workplace cultural contribution to equity that can be done is for a workplace to offer flexibility of schedule. One of the things that ImageX has done well is not only offer that but stand by it — giving their employees a flexible schedule and keep pushing equity forward. At ImageX, we do it without gender labels or bias, so that nobody is penalized.”

Mahya: "In my opinion it should be two areas:

1. Promoting transparency 

2. Identify biases in the organization and address them"

Alla: “Organizations can create a culture of equity by embracing it from the top — ensuring equal support and opportunities during the recruitment process; giving equal access to development opportunities upon employment; nurturing a strong sense of belonging to the workplace where differences are celebrated.”

Carol: “Providing an open communication culture where women in any position can admit to past failures and vulnerabilities without being judged. This culture paves the way for other women to have confidence that women in leadership are not super powerful. It helps everyone to understand that you can be yourself, you can fail, you can have feelings. An empowered woman doesn’t mean a Flawless and Perfect woman.”

And That’s a Wrap!

We are very grateful to Kylie, Mahya, Alla, and Carol for this wonderful conversation. Hopefully, their insights and answers resonate and shed light on gender equity, diversity, and the need to empower talented women in male dominated industries.

Wishing everyone a Happy International Women's Day! 

Working in the front end of Drupal can be difficult and, at times, confusing. Template files, stylesheets, scripts, assets, and business logic are often scattered throughout big code bases. On top of that, Drupal requires you to know about several drupalisms, like attaching libraries to put CSS and JS on a page. For front-end developers to succeed in a system like this, they need to understand many of Drupal's internals and its render pipeline.

It was high time we said goodbye to Bartik. Having been Drupal’s default front-end theme for over a decade (from Drupal 7 to 9.4,) Bartik was quite the veteran. And although it served users well for many years, the theme didn’t get any major updates after 2011. Its age began to show: aside from an increasingly dated look, Bartik didn’t evolve to work well with new functionality such as Layout Builder.

Bartik got its figurative cannon salute in 2022. It was retired and replaced with Olivero: a modern and accessible theme for the future. 

The idea for Olivero was conceived in a hotel lobby at DrupalCon Seattle, 2019. It grew into the Drupal 9 theme initiative, with considerable support from Dries and key contributors. Over several years, the Olivero Team worked to build a cutting-edge theme based on five design principles:

• Simple: a clutter-free environment that’s easy to navigate and use
• Modern: support for the latest browser features and interaction modes
• Flexible: gives multiple options to Drupal front-end developers
• Focused: includes eye-catching, meaningful design elements
• Accessible: WCAG Level AA compliant from the ground up

Olivero was initially introduced as an experiment in Drupal 9.1. It’s now the default front-end theme in Drupal 9 and Drupal 10. (Bartik is deprecated in Drupal 9.5 and unavailable in Drupal 10.)

[Quote]

"It looks amazing, and it’s also by far the most accessible theme that we’ve ever shipped in the history of Drupal."

– Dries Buytaert, DrupalCon Portland 2022’s Driesnote

Drupal 10’s default theme is clean, modern, and accessible. 

Rachel Olivero’s Legacy of Championing Accessibility 

The Olivero theme was named in memory of Rachel Olivero, who passed away in 2019. Rachel was an accessibility advocate and a valued member of the Drupal community. As a person who was blind, transgender, and a lesbian, Rachel had a deep understanding of the importance of inclusivity and a passion for making technology better for everyone. 

"We chose the name Olivero not just because we have made accessibility a top priority, but also because we aspire to develop this new theme in our community in a manner that is consistent with the qualities that Rachel Olivero embodied, including patience, generosity, and inclusivity."

– The Olivero Team

A Rundown of the Olivero Theme’s Best Features

Modern Colour Palette 

Olivero uses a vivid blue as its base colour for a bright, professional look that gives a subtle nod to Drupal’s branding. Neutral grays provide visual balance. The palette provides both dark and light shades, as well as secondary colours, to enable an accessible, high-contrast design. 

A clean, accessible colour palette gives Drupal 10’s default theme a modern look and feel. 

Simple Forms and Buttons

Content editors will be delighted with the simple elegance of text fields, checkboxes, radio buttons, and submit buttons in Drupal 10’s default theme. 

Web accessibility is clearly at the forefront of the design. Forms are simple for users to fill out thanks to their uniform look and clear labels. Buttons are high-contrast and have easily-perceivable focus modes that work well for keyboard users. 

Forms are clear and clutter-free in Olivero. 

Accessible Typography

Olivero makes content more readable and scannable thanks to a base font-size of 18px for body copy. Other text elements are scaled accordingly and typography is adjusted for mobile devices. The Olivero team gave particular focus to maintaining consistency throughout line-height and spacing. 

Olivero also perfectly displays right-to-left languages including Urdu, Arabic, and Hebrew. This is critical for supporting Drupal’s multilingual capabilities. 

Typography is scaled to provide a responsive, accessible, and consistent experience for users. 

Intuitive Headers and Menus

The header in Olivero can collapse into a hamburger menu as the user scrolls down the page. This means users have easy access to the navigation links regardless of where they are on the page. Olivero also supports secondary dropdown menus in Drupal – something that wasn’t possible with Bartik.

There are multiple versions of the header to choose from. All of them are designed to seamlessly incorporate any type of logo. 

An animated, sticky hamburger menu makes navigation easier for users. 

Eye-Catching Messages 

Olivero uses brightly coloured icons to convey the purpose of different types of messages. Error, alert, and success messages are displayed in boxes with plenty of padding to ensure they’re noticeable and easily readable. 

Olivero has an eye-catching design for messages.

Useful Sidebar 

Olivero features a sidebar that floats next to the primary content. This is a great place to display things like related content and social buttons. 

Improvements for Developers

Taking a lead from Claro, the new default admin UI, Olivero has implemented PostCSS to reduce maintenance overhead. It uses CSS Grid to help developers build complex layouts more easily. And for added flexibility, Olivero uses CSS custom properties to enable front-end developers to customize the theme on a block-by-block basis.

Planning to migrate to Drupal 10?

We are so interested in who you are. Are you a designer? We can suppose it as you are interested in this topic. However, it can be assumed that you are not. Basically, you may not even be related to design, and the last time you drew was in school. Did we guess? Whoever you are, we've written this blog for you!

Migrating at scale is daunting, but the right tools can make it easier. In this blog we draw on our experience from migrating 50 sites in one go.