OPTASY: Drupal Web Development Agency Toronto
(416) 243-2431Drupal SupportRequest A QuoteQuote

Main navigation

  • Home
  • Services
    • Digital Strategy
    • Design
    • Web Development
      • Drupal
      • WordPress
      • Magento
      • Laravel
      • Shopify
      • Sharepoint
      • Contentful
      • Gatsby
      • Next.js
      • Node.js
      • React
      • AngularJS
    • Mobile & App
      • IOS
      • Android
      • Augmented Reality
      • Artificial Intelligence
      • Virtual Reality
    • Maintenance & Support
      • Drupal Maintenance
      • Wordpress Maintenance
    • Staff Augmentation
  • Portfolio
    • Web
    • Mobile
    • Ar
  • About
    • Who we are
    • Values
    • Events
    • Awards
    • News
    • Careers
    • Partners
      • Acquia
      • Google
      • Pantheon
      • Shopify
      • Wordpress
  • Blog
    • Drupal
    • Drupal 8
    • HTML
    • CSS
    • Javascript
    • PHP
    • Microsoft
    • Web Design
    • Design
    • Tips
    • News
  • Contact
(416) 243-2431 Drupal Support Request A QuoteQuote

In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Here Is How You Add Responsive Images To Your Drupal 8 Website
Drupal 8

Here Is How You Add Responsive Images To Your Drupal 8 Website

by Adrian Ababei on Nov 29 2016
 
Proudly wearing its “mobile-first” aura, Drupal 8 is here to help you deal with the issue of responsiveness nice and smoothly. No need to write miles of code anymore, to master the art of pulling off HTML, back-end languages and JavaScrip combos anymore. 

 
In other words: Drupal 8 is here, have no fear! It projects a new world of easy-to-build responsive themes.

 
It simply “spoils” you with an easy-to use responsive image setup (which comes in its core, another great news). Basically, it puts an image formatter and breakpoint mappings at your full disposal so that you can have your due-sized images, using HTML 5 picture tag, ready in just a few quick steps. Thus, you'll get your images adapted to every device's viewport in no time.

 
Well, not really “in no time”, but in 5 simple steps! Walk us through this step-by-step demo:

 

1. Turn on Your Responsive Image and Breakpoint modules

You've got that right: the Responsive Image Module is part of core Drupal 8, you get it upon installation and yet, if you want to use it you still have to first enable it. It's the same thing for the Breakpoints module, as well. 
How do you enable the Responsive Image Module in Drupal 8 you say?

 
  1. You go to /admin/modules

     
  2. You click the check box close to “Responsive Image”

     
  3. You click the “Install” button

     

2. Set Up Your Breakpoints

“What is a breakpoint?” you say (if you're new to Drupal)? It's a window width that you get to set up, thus letting Drupal know that it should start using a different size image starting from that particular width size. Got it?

 
Do you remember how things used to be in Drupal 7's Breakpoint module (oh, the (not so) good old days when Breakpoint was a contributed module!)? You could define your breakpoints in your admin interface.
Well, not anymore! In Drupal 8 you have to set them up in code.

 
If it's a pre-built theme that you're using, there's a high chance that your breakpoints are already set up. If you're creating your own theme instead, then you need to set them up yurself in breakpoints.yml file.

 
So, here is how you set them up (make sure you start with the smallest ones):

 
your_theme_slug.bannerImage.narrow:
  label: narrow
  mediaQuery: ''
  weight: 0
  group: Banner Image
your_theme_slug.bannerImage.wide:
  label: wide
  mediaQuery: '(min-width: 600px)'
  weight: 1
  group: Banner Image 

 

3. Create Your Image Style 

What image styles do you want for each one of your previously defined breakpoints?

 
Once you've answered yourself that, go ahead and set them up (after you've done a bit of math setting up your breakpoints):
 
  1. Go to /admin/config/media/image-styles/add

     
  2. Type in your image style's name (we suggest you go for something descriptive) and click “Save”

     
  3. Click “Select a new effect” (you'll find it there, under “Effect”, in the next screen that will open up once you've clicked “Save”)

     
  4. Click “Scale and crop”

     
  5. Enter the width and height sizes

     
  6. Click “Add effect”
Et voila! Can you go through all this process all by yourself now? For you still have to go back and create image styles for each one of the breakpoints that you've (virually) set up, you know. 

 
And this is how Drupal automatically resizes all the images, that you'll upload on your site, to the image styles that you will have defined. And it doesn't do all this the rudimentary way, no sir: first it sizes the image, then it crops off the extra so that the result should be a perfectly adapted new image (not the stretched or the shrunk, very unnatural looking type)

 

4. Define Your Responsive Image Style 

After you've created images styles for each breakpoint, go ahead and put them all together in a responsive image style. 
 
  1. Go to /admin/config/media/responsive-image-style

     
  2. Give the “Add responsive image syle” button a click

     
  3. Give your style a name (go for something easily recognizable)

     
  4. Select the “Breakpoint group” (you know, the one that you've set up at step no. 

     
  5. Select the breakpoints one by one and associate them each with one image style

     
Can you see the option for fallback image style there, at the bottom? It's the “default” image that Drupal generates for those browsers that don't support responsive images (such as Internet Explorer 8). We recommend you to select the largest image style!

 

5. Allocate Your Responsive Image Style to An Image Field

Just one more quick step to take and you can upload images on your website and let Drupal do all the formatting/smooth resizing job for you! Before it can do that, you still need to let it know what image field to actually responsify for you:
 
  1. Click on “Structure”- “Content Types”

     
  2. Click the arrow close to “Manage Fields” and then click “Manage Display”

     
  3. Spot your target image field (you'll see the entity type, ranging from taxonomy vocabulary to content type that your image field is assigned to)

     
  4. Select “Responsive Images” (under “Format”)

     
  5. Pick one of the responsive image mappings that you will have set up (under “Responsive image style”)

     
  6. Click “Update”
 
 
And that's it! You've provided Drupal 8 with all the settings it needs for “working its magic”: pulling off images of appropriate sizes without comprising their quality.

Share the article

Development

We do Web development

Go to our Web development page!

Visit page!

Do you want a website

or app developed?

 

Get a Free Quote

and let's make it work!

Get a Quote

Recommended Stories

DrupalDrupal 8Tips
How Can Web Accessibility Grow Your Website

How Can Web Accessibility Grow Your Website

  Accessibility for disabled individuals is extremely important because they use multiple assistive technologies that often require accessible websites and mobile applications to function properly. Web accessibility is not just for people with physical limitations; it has real business value too! Read on to learn seven important benefits of creating an accessible site for your business. According to a survey of around 500 U. S. business executives and developers, most of them admit that making websites accessible requires too much time and financial investment. We're here to let you know that creating an accessible website isn't hard at all, will greatly improve the user interface, and will most likely prevent you from facing any legal issues. Laws regarding web accessibility  In the United States, laws are being updated to make sure that websites are accessible to everyone. The Americans With Disabilities Act (ADA) was first passed in 1990 and has been amended several times since then. The ADA applies to public accommodations, including businesses, educational institutions, government agencies, libraries, museums, and other organizations that provide goods or services to the general public. It also covers places of entertainment such as movie theaters, restaurants, hotels, amusement parks, sports stadiums, and concert venues. As of 2020, there are no federal regulations requiring websites to be accessible to users with disabilities. However, some states have their own laws that apply to websites. For example, California's Business & Professions Code Section 5412(a) says: "All persons shall have equal opportunity to obtain employment, housing, and commercial transactions without discrimination or segregation based on disability." This means that if you operate a business in California, you must ensure that your website is accessible to people who use assistive technology. If you don't comply with this law, you could face fines up to $2,500 per violation. 7 Benefits of Making Your Website Accessible Improved conversion rates. It's true that accessibility only helps the visitor but if you improve the user experience and make it accessible for everyone, you're planting the seeds for:   More visitors means more sales. Better user engagement Improving SEO ranking Higher conversion rate   Legal complications are less likely when you invest in web accessibility. With increasing legal requirements surrounding web accessibility becoming stricter, making your website accessible has become an absolute necessity unless you want to be fined. Be aware of the various web accessibility requirements and ensure that your website complies with them. Bigger customer base. Accessibility means addressing the needs of larger audiences, which may lead to you attracting more people who are likely to interact with your business on a long-lasting basis. Invest in accessibility so you can attract more people who are likely to interact with your business on a longer-lasting basis. An innovative business mindset: an entrepreneurial one By building accessible websites, you challenge yourself to deal with unforeseen issues and so put your creative juices into action. Adaptability means that you need to be able to adapt your designs by incorporating accessibility tools into them. To stay competitive in today’s fast-paced digital world, you need to be innovative and always ready for change. Boosted SEO efforts. You can improve your website's accessibility by including alternative text for any image tags, making sure that your content is easy to read, or choosing a clean and clutter-free design. These steps also mean good SEO practice. By creating an easier-to-navigate website, you're also helping it become more SEO-friendly. You may be familiar with the importance of investing in strong SEO strategies in modern times. It's all about whether your site ranks at the top of search results and how visible your site appears on Google. Improved brand reputation. It’s important to ensure accessibility for your business because it promotes your brand image. Ensuring your web site has a universal interface makes sure everyone who visits your site gets equal access to your content and raises awareness for your company. Today, having an inaccessible website is the digital version of putting up a big "Keep Out" notice outside of your business. Fast page loading times. If you improve a page's accessibility, you'll increase its performance score. To meet the demands of modern web users, you need to improve your site's load time. By implementing features that are accessible to people who use assistive technology, you're making your website a better place for everyone. You can use several different methods to improve the accessibility of your website. For example, if you're designing a web page for blind users, they might be able to use a text-to-speech program to read out loud any important information on your site. Hopefully, this post helps shed some insight into the importance of web accessibil­ity for your business and how making your website more accessible can positively affect your brand. If you'd like to learn more about how we can improve the usability of your website, please contact us today.   Photo credit: Unsplash. ... Read more
Raluca Olariu / Sep 08'2022
DrupalDrupal 8Tips
Why Do You Need Drupal Website Maintenance?

Why Do You Need Drupal Website Maintenance?

  If you're new to Drupal web development and maintenance, it may seem like an overwhelming task. However, once you get started, things start to run smoothly. Building and optimizing a website is similar to buying a new house—you start out by making sure everything works fine, then you fix any issues that come up, and finally, you keep an eye on it, so nothing breaks down. The perfect time to clean up your website doesn't exist, so you might want to start as soon as you feel like it should be done—improve its performance, optimize it for search engines, and refresh it. If you do it yourself, you might even be able to increase your potential market value by 50%. First, it's important to understand why regular maintenance is crucial, how to tell if you need Drupal maintenance, what Drupal maintenance includes, and what happens during Drupal Maintenance. Read this article to find out more about why you need regular Drupal maintenance.  Does regular maintenance help keep your site running smoothly? Yes, regular maintenance can help with plenty of aspects of your web strategy. Security Website maintenance used to be an option. It wasn't something that had to be done every month or even every week. You could just let it sit there and not touch it at all for months at a time. As the digital landscape continues to expand and become more vulnerable to cyberattacks, Drupal support is essential for maintaining a secure security posture. While Drupal is known for its high level of security, this only applies if you keep up with the latest security updates and patches. If you don't stay current on the latest security updates and modules, then you're putting yourself at risk for a breach. Updating Drupal core modules regularly helps protect websites from attacks and security breaches. Fixing errors If you want your site to perform well and meet the needs of the modern digital user, then it’s important to fix any bugs and errors. These malfunctions may occur due to rushed coding and deployment, inadequate testing, or miscommunications. They may affect your website's performance and loading speed or even alter its functionality. Because users don't want to wait more than four seconds for websites to load, they won't pay attention to fixing bugs if they're not there. Stay up-to-date by adding new features to your site One reason why Drupal maintenance matters so much are because it allows you to scale your site as your business grows. With Drupal 8, integrations are much cheaper than they were before, so if you haven’t upgraded yet, you may want to talk to a Drupal agency to help determine whether an upgrade is the best option for your business. User behavior has changed drastically in the past year, so content creation, new features, and improvements allow brands to remain fresh and aligned to this changing environment. SEO optimization It’s important to maintain good SEO practices so that your site stays relevant. A great Drupal maintenance team includes SEO experts who perform Drupal SEO audits and optimizations. “Good SEO only gets better over time; it’s only search engine tricks that need to be constantly updated when the algorithm changes.” -Jill Whalen. To know when you need Drupal maintenance, ask yourself these questions: Do you get error messages? If you aren't already convinced that you need Drupal Support and Maintenance Services for your website, here's an indicator that you can't delay it anymore without hurting your business: You have been getting error messages like "404 Not Found" or "500 Internal Server Error". These errors mean that your site isn't functioning properly. Your site might be down or slow to load. Your visitors will leave your site immediately if they see these errors. The solution is simple: hire a professional Drupal developer to do the job for you. We at Optasy have a team of expert developers who specialize in Drupal development. Our team of dedicated professionals will ensure that your site is always working smoothly. Check this page for more details. Photo credit: Unsplash. ... Read more
Raluca Olariu / Aug 09'2022
DrupalDrupal 8Tips
How to Migrate to Drupal 9

How to Migrate to Drupal 9

  Drupal is a free open-source content management system (CMS) that allows you to create websites, blogs, and other web applications. It has become one of the most popular platforms for building custom sites. The process of migrating from Drupal 8 to Drupal 9 is no small task. There are several changes and new features that you’ll want to consider before moving forward. In this article, you'll discover some of the major changes that you’ll encounter when migrating from Drupal 8 to Drupal 9. As you migrate to Drupal 9, you’ll notice a significant change in the way things look and function. The biggest difference between Drupal 8 and Drupal 9 is the introduction of a completely redesigned user interface. This means that you'll need to rework your entire site from scratch. What Does a Drupal Migration Mean? A Drupal migration process involves taking an existing Drupal website or blog and converting it into a Drupal 9 installation. You can also perform a complete Drupal 9 install by starting with a blank slate. When you migrate to Drupal 9 from Drupal 8, you need to update your Drupal 8 website to the latest version of both core and contributed modules and themes. If you have any custom code, such as custom content types, views, and fields, you will need to convert them to Drupal 9 compatible versions. You may also need to upgrade your database schema to support Drupal 9's new data model. And finally, you should make sure that all your files are converted to Drupal 9 standards. What Is Drupal 9? Drupal 9 is the same as the Drupal 8.9 version but without the deprecated code available in the previous version. It's identical to the 8.9 version for editors, website builders, and developers and it is built with an API-first approach in mind. Drupal 9 improves structural tools and editorial workflows.  Key Drupal 9 benefits Drupal 9 brings forward a continuous innovation cycle that delivers all the best features of Drupal 8, plus updated system requirements that improve security support.  Drupal 9 provides feature additions twice a year, so you'll be up-to-date with the latest technology innovations. What is more, your developer team will most likely work very easily with Drupal 9, as the Drupal 8 experience is quite similar. Prepare your upgrade process and get a cleaned-up, consistent, API-based modern environment.  You might also like: Drupal 10 New Features and How to Prepare Your Migration. Migrating to Drupal 9: What do I need to know? Before you begin your Drupal 9 migration, there are three key areas where you'll need to take action: Update Your Site Core In order to successfully migrate to Drupal 9, your site must be updated to the latest version of Drupal 8 core. To ensure that your site works properly after the migration, you should use the same version of the core that you used during development. Upgrade Modules and Plugins When you migrate to Drupal 9 you'll need to upgrade all your modules and plugins to their respective Drupal 9 versions. For example, if you're using Views 7.x-3.0 then you'll need to upgrade to Views 8.x-2.1. Similarly, if you're using CCK 3.x-7.x then you'll need to move to CCK 4.x-4.6. Convert Custom Code If you've developed custom content types, views, or fields, you'll need to convert these items to Drupal 9 compatible versions so they work properly on your new site. How does a Drupal migration affect your brand reputation and business value? Upgrading to Drupal 9 comes with benefits like all system and software upgrades. To understand the business value added by such a migration, consider asking the following questions: Are your current features and modules secure and relevant for your business scope? How would you rate them? Do you clearly know the scope of a Drupal migration for you? How many resources like time and money do you plan to spend on this migration? Does your developer team have the necessary skill set to plan and complete it successfully?  How will your Drupal migration impact the content design and architecture on your site? Tools & Modules For Completing Your Drupal Migration Now that you've asked the right question, you might be ready to start your migration. If so, here are some tools and modules to help you in this process:  Core Migrate Module Suite: migrate your content and site configuration   Upgrade Rector: automate module updates for Drupal 8 sites of common deprecated code to the latest Drupal 9 compatible code Drupal Module Upgrader: scan and convert outdated code on your site Upgrade Status Module: provide information about contributed project availability 4 Steps to Prepare Your Drupal 8 site for Migrating to Drupal 9     Check out this to-do list before starting your migration to Drupal 9: 1. Check that your hosting environment meets the compatibility requirements of Drupal 9. 2. Update your contributed projects so that you resolve Drupal 9 compatibility issues gradually, keeping Drupal 8 compatibility at the same time.  3. Make sure to upgrade to the latest Drupal 8 version available (Drupal 8.8 and 8.9). 4. Edit your custom code by removing deprecated API use.   The transition from one version to another can be challenging, but the migration process is simple once you learn how it's done. If you find it overwhelming and want to opt for professional services, check out Optasy's services.  Our dedicated team of Drupal experts will support you in every step of your migration process and ensure that your website is up and running smoothly after the migration. Optasy offers assistance and custom migration to suit the specific needs of each business.   Photo credit: Unsplash.... Read more
Raluca Olariu / Jul 07'2022

Browse cities

×

Toronto

WordPress Development Services in Toronto
iOS App Development Services in Toronto
Drupal Development Services in Toronto
Magento Development Services in Toronto
Laravel Development Services in Toronto

Montreal

WordPress Development Services in Montreal
iOS App Development Services in Montreal
Laravel Development Services in Montreal
Drupal Development Services in Montreal
Magento Development Services in Montreal

Vancouver

Magento Development Services in Vancouver
iOS App Development Services in Vancouver
Drupal Development Services in Vancouver
WordPress Development Services in Vancouver
Laravel Development Services in Vancouver

New York

WordPress Development Services in New York
Laravel Development Services in New York
iOS App Development Services in New York
Drupal Development Services in New York
Magento Development Services in New York

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

contact@optasy.com

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York

Newsletter

Get the latest OPTASY news, tips and how-to’s on the go, right in your inbox!
OPTASY
clutch
Pantheon Premier Partner
  • Drupal 8
  • Services
  • Contact Us
  • Partners

  • Drupal
  • Google
  • Magento
  • Shopify
  • Wordpress
Facebook
Twitter
LinkedIn
Drupal
  • Cities
  • Support

© 2023 All Rights Reserved. Built with Drupal