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 to Find the Best Drupal Developer for Your Needs

How to Find the Best Drupal Developer for Your Needs

  Building a robust Drupal development project that supports your business objectives can be challenging and time-consuming. But with the right Drupal partner that has the experience and expertise needed to help you build a website that will meet all of your needs, you will find this process a lot easier. This article talks about the competitive advantages of hiring Drupal developers and how you can find the best fit that meets your Drupal project needs.  The benefits of hiring Drupal developers Hiring a Drupal developer is an investment in your company's success as it provides plenty of competitive benefits that set you apart from the competition. These advantages include: Building highly-personalized Drupal projects that boost your brand awareness and increase sales. Designing and developing custom Drupal features and functionalities that suit your project requirements. Dedicated support for your Drupal project throughout its lifecycle from content migration and system integration to API design and web accessibility. Having access to ongoing updates and continuous maintenance and support. Reduced costs and increased ROI by having a dedicated team working on your project. What are some of the challenges of hiring Drupal developers? When hiring Drupal developers, there are several challenges that organizations may encounter. Here are some common challenges associated with hiring Drupal developers: Drupal-specific knowledge. Drupal is a complex content management system with its own specific architecture, concepts, and terminology. Finding candidates with in-depth Drupal expertise can be challenging, as it requires knowledge of Drupal's module system, theming, configuration management, and custom module development. Technical skills. Apart from Drupal-specific knowledge, Drupal developers should have a strong foundation in web development technologies such as PHP, JavaScript, HTML, CSS, and databases. Assessing candidates' technical skills and ensuring they are up to date with the latest Drupal version can be a challenge. Experience and expertise. Drupal development experience is valuable when hiring developers. However, experienced Drupal developers are often in high demand, making it competitive to attract and retain top talent. Finding developers with a proven track record of successful Drupal projects can be a challenge, especially for organizations that require specific domain expertise. Community involvement. The Drupal community is active and vibrant, and participation in the community can indicate a developer's commitment to learning and staying up to date with Drupal best practices. Evaluating candidates' involvement in the Drupal community and their contributions is many times a real challenge. Scalability and performance. Drupal websites can vary greatly in terms of size and complexity. Hiring developers who understand how to build scalable and performant Drupal applications is essential, as performance issues can arise when handling large amounts of content or high traffic volumes. Assessing candidates' ability to optimize Drupal websites and troubleshoot performance problems can be challenging during the hiring process. Communication and collaboration. Drupal developers often work in teams, collaborating with designers, front-end developers, project managers, and stakeholders. Finding candidates with strong communication and collaboration skills, who can effectively work in an agile environment and contribute to project success, is not always easy. To address these challenges, organizations can adopt strategies such as conducting thorough technical assessments, reviewing candidates' portfolios and past projects, leveraging Drupal community resources, seeking recommendations from trusted sources, and providing opportunities for continuous learning and skill development.     How to spot the right Drupal partner for your business requirements There are several things you should consider before hiring a Drupal developer. Here are some tips to help you identify the right Drupal developer for your project: Do your research first and gain a good understanding of what a Drupal developer is and what are their responsibilities.  A Drupal developer has plenty of duties like conducting research and installing Drupal modules that best fit your needs, extending existing modules so their functionality increases, managing how your website looks and works for high-quality user experiences, migrating existing websites and content, architecting  Drupal projects and web infrastructures, etc.   Also, a Drupal developer can have three main roles that you should pay attention to: Drupal Front-End Developer. A front-end developer is responsible for designing and building the interface of your site using HTML, CSS, JavaScript, jQuery, Bootstrap, Foundation or any other framework. This includes elements such as buttons, forms, navigation menus, or tables and also includes how your page looks. Drupal Back-End Developer. A back-end developer is responsible for programming the logic behind your site's functions and processes. This includes writing code that handles database queries, creates pages, manages users, and more. Drupal Theme Developer. A theme developer is responsible for styling the look and feel of the entire website including the layout, colors, fonts, images, and anything else that makes up the overall appearance. They will work with the front-end developer to ensure that everything on the site matches and flows well together.        2. Identify and examine your project needs.  Now that you know in more detail what a Drupal developer does, it's time to understand your project needs and what you require from a developer's services. Key questions to ask at this stage are: Do you need a back-end expert or a full-stack developer? Do you only need Drupal maintenance? Do you need a whole new enterprise-grade Drupal solution? Would you like to hire a freelance developer or a contract-to-hire? Do you just have a rough idea of what you’d like him/them to develop? What type of experience do you want them to have? How much time would you be willing to spend working with them? How many hours per week would you be able to dedicate to the project?       3. Know where to look for talented Drupal developers. Top channels to consider for passive searches: job portals like LinkedIn, Monster, Glassdoor, Indeed online Drupal (or PHP) communities freelance platforms like Upwork, Toptal, Scalable Path Top channels for your active searches: social media Drupal groups local IT communities LinkedIn (when you start analyzing particular profiles on LinkedIn your passive search becomes active) Drupal.org (select the top Drupal profiles there and start evaluating them against your own requirements) developer communities like GitHub, Stack Overflow       4. Ask the right questions. Among the most important questions to ask potential Drupal partners are: How long have you been working with Drupal development solutions? What Drupal experience do you have? Are you familiar with my business model? Can you provide references? What Drupal skills do you possess? What Drupal technologies do you use?       5. Evaluate your potential Drupal partner carefully. Essential things to consider are: How experienced they are in working with different Drupal versions What their technical expertise is / How skilled they are at Drupal module development Their GitHub Profile (how much time they spent on different projects, samples of their written code, details on their contributions) Their involvement with the Drupal community What past clients say about working with them   Optasy's team of experienced Drupal developers is here to help you We are a development company and we are ready to leverage and to "fuel" your project with all that Drupal expertise that we've been gaining as a Drupal firm during these +10 years: whether it's custom module development, Drupal migration, AI implementation, or any type of new feature integration with Drupal that you need us to do. We're web developers, but with a mobile-first approach to our website development projects, in fact: we commit to helping you deliver the message to your users in an intuitive, effective, and nonetheless appealing way, on all devices.  We'll be in for the long run: our Drupal development services include 24/7/365 support & ongoing maintenance, which means much more than just rolling out patches and updates; we'll ensure that your OPTASY solution (be it Drupal, Laravel, WordPress, Magento, React or Angular-based) keeps meeting your goals, that it continues to remain relevant in the context of future technology changes. From structure planning, to Drupal website development, all the way to maintenance and long-term support, we've got your back; stay assured: full-cycle projects are our specialty as a Drupal 8 agency. As a development company in Toronto we have the experience and the expertise to handle your most specific requirements:   back-end development: we design and develop the custom features and functionalities that suit your project requirements front-end development: from custom themes to user-friendly Uis, to user experience design, to designing responsive layouts content migration system integration API design and development web accessibility  website maintenance: pass over the maintenance burden on our shoulders; we provide ongoing updates and continuous maintenance and support   For more information on how our talented Drupal experts can help you build a robust project for your web development needs, contact us.    Photo credit: Unsplash.... Read more
Raluca Olariu / May 23'2023
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

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