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.
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

DrupalDrupal 8
Is Drupal Good for eCommerce? 11 Excellent Reasons Why You’d Choose It over Another Platform

Is Drupal Good for eCommerce? 11 Excellent Reasons Why You’d Choose It over Another Platform

    "... wanna run eCommerce on Drupal 8 but don't know if it's a good idea."   But is Drupal good for eCommerce?    And, most of all: Is it better suited for your own online business needs and feature requirements than other eCommerce platforms out there? Some legitimate questions you're struggling with there… To give you a hand, here's a list of 11 excellent reasons why you'd lean towards Drupal eCommerce solutions for building your e-commerce site.    Reason #1: You're in Full Control of the Source Code to Make Any Changes You Want In other words, you don't need to convince the vendor first that the changes you need to make are beneficial for him/her. You're free to extend Drupal eCommerce platform's core functionality, to adapt, and extend its code till it meets your needs entirely.    … till it integrates perfectly into that specific software that you use.   Which is not the case when you go for a commercial solution: you're not granted access to the core code for any custom software development work that you might need to make. Of course, this "reason" becomes a really strong selling point only if/when: you have non-standard business requirements it's a large, complex eCommerce website that you're building Reason #2: Your eStore Grows With Drupal  Drupal scales with your business... effectively.   And by that I mean that it's designed to keep the resources and the time required to handle your online store's growth at a minimum.   Being: flexible by nature (its open-source nature) powered by the API-first initiative … Drupal eCommerce solutions make the best choice if "scalability" is on top of your list of requirements.   Reason #3: You Get to Reach Out to Your Customers Across Multiple Channels  "Is Drupal good for eCommerce?"   It becomes the perfect option for your own eCommerce website if you're planning to reach out to your customers across an entire network of sales channels, thus boosting your digital marketing efforts.  Let's say you have your main/central eCommerce website and you need to pull content from there and to distribute it across a whole ecosystem of channels — eCommerce apps, digital kiosks, conversational interfaces — and devices. Then, the API-first initiative allows you to tap into a headless commerce Drupal architecture and: use Drupal as a back-end content repository configure your content to fit all types of formats and reuse it whenever (and wherever) needed increase your outreach incorporate business automation into your development team's workflow: help them work smart and achieve more Reason #4: You Get to Deliver Content-Driven eCommerce Experiences With Drupal, you get the best of both worlds:   an eCommerce platform (by integrating one of its specialized eCommerce modules into the content management system) a content platform   And this is what makes it ideal for: tapping into the experience-led eCommerce model getting the most out of your content marketing efforts (think blog posts, effectively interconnected product pages, user guides, etc.) Reason #5: You're Free to Integrate Any Third-Party Service into Your Online Store From: marketing platforms to analytics services to payment gateways of your choice (there are 80+ payment options available with Drupal Commerce) to third-party add-ons that would automate your team's tasks and boost their productivity (while boosting online sales, as well) … Drupal & its eCommerce component accommodates any type of integrations you need to make.   Reason #6: "Is Drupal Good for eCommerce?" It Is for Delivering High-Speed eCommerce Experiences Just think… real-time shopping cart updates.  Or pretty much any action that your customers would need to carry out on your eCommerce site, then turbocharge it with top speed. A decoupled Drupal Commerce setup (add the JavaScript framework of your choice here) enables you to deliver such type of dynamic user experiences.    Reason #7: You Have No Limits to How Much You Can Extend Your Drupal 8 eCommerce Website Drupal Commerce can grow as much as your business needs. Whether you need to integrate: a whole network of third-party systems a whole lot of contributed modules an eCommerce Drupal distribution (a bundle of multiple modules) a Drupal eCommerce theme  … and extend your eCommerce store's functionality, there's no limit to what you can incorporate into your Drupal eCommerce website.   Reason #9:  You Benefit from an Extremely Configurable eCommerce Solution "Whereas eCommerce solutions are often developed with an application mindset, highlighting what you can do with it out of the box, Drupal eCommerce solutions were developed with a framework mindset, focusing on what you can build with them." (Source: Drupal.org)   Basically, you're free to customize every little piece of your Drupal 8 eCommerce site, till it: delivers that unique shopping experience you want it to meets all your ultra-personalized requirements: to trigger certain actions based on user input, to display multiple tax rates, to have an out-of-the-ordinary checkout flow, etc. Here, it's up to you and it depends on what you need to build: Are you looking for a cookie-cutter eCommerce solution, that would help you get a generic webshop up and running in no time? Or do you want unlimited customization freedom, that comes at the cost of…  investing more time in writing custom code?   Reason #10: You're Free to Sell Both Physical and Digital Goods And that thanks to Drupal Commerce's flexibility:   It provides you with the functionality you need to start building your product catalog and selling your digital products — subscriptions, tickets, online courses, etc. — on your online store. A key aspect to consider when comparing the features of your best options in terms of eCommerce platforms in 2020.   Reason #11: You Can Make the Most of the Granular and Differential Access to Content Drupal allows you to define different roles for your team members and to assign several levels of permission to each role. Not everyone would then be authorized to edit content, add products, manage orders, publish content, etc. This way you get to: set up a convenient hierarchy harden your online store's security  So, Is Drupal Good for eCommerce? Maybe a more appropriate question would be: "Is Drupal the right solution for my eCommerce business?"  It might be... And these 11 reasons mentioned here do become the best arguments for you to choose it over another platform (Ubercart, Prestashop, Shopify…) if: it's a growing or an already established eCommerce business that you run (otherwise, all that configuration and custom work might be an overkill for a small business) you have complex feature needs for your online store: you need to integrate it with coupon rules, several backend systems, and so on Do you fit the eCommerce business owner "profile"? For we do fit the profile of that Drupal eCommerce agency and development company you're looking for, capable to tweak it till it fits your complex requirements to the slightest detail. Just challenge us and see how Drupal eCommerce solutions can accelerate business outcomes.    ... Read more
Adriana Cacoveanu / Aug 10'2021
DesignDrupalDrupal 8Web Design
What Are the Benefits of Web Accessibility for Your Business?

What Are the Benefits of Web Accessibility for Your Business?

  For people with disabilities, web accessibility is highly beneficial. They use multiple assistive technology tools that often require accessible web design and apps to function properly.  It is obvious how web accessibility benefits users with disabilities, but what about businesses? What are the advantages of building accessible sites for your company? Keep reading, and you'll discover seven key benefits of making your website ADA-compliant.    Why do companies hesitate to invest in web accessibility?   A survey of around 500 U.S. business leaders and web designers shows the main reasons behind the reluctance of some companies to make a website accessible. Most of the respondents confessed they are worried about the financial investments and potentially high costs (73.6%), while 66.9% think optimizing their sites for accessibility will require too much time.  We are here to tell you that making your website accessible for people with disabilities doesn't require too many resources, will highly benefit the user experience, and most probably keep you away from web accessibility lawsuits.    7 Benefits of Making Your Website Accessible   1. Increased traffic on your site. There's a myth regarding accessible websites that says accessibility only benefits the visitors. However, by improving the user experience and making it accessible for anyone, you plant the seeds for: Higher traffic rates on your site Better user engagement Improved search engine optimization rankings Higher conversion rate   2. Lower risk of legal complications. As legal requirements regarding web accessibility are getting tougher, optimizing your site for people with disabilities becomes non-optional—unless you don't mind being prosecuted. Make sure your site meets specific accessibility guidelines and pay attention to the accessibility standards required by the industry that you're operating in.    3. Bigger customer base. Making your website accessible means addressing the needs of bigger social groups, and that, in the long term, could lead to you growing your customer base. By investing in accessible design, you can attract more visitors that are likely to engage with your brand on a long-term basis.   4.  A more innovative business mindset. Building accessible design for your website visitors challenges you to deal with unanticipated issues and thus puts your creativity at work.  The constraint of adapting your design so that it incorporates a whole set of accessibility features challenges you to... come up with innovative solutions—and to preserve that mindset for innovation in the long term. In the current dynamic digital landscape, staying creative and ready for innovation is key to keep up with the ever-changing trends.    5. Boosted SEO efforts.  You can improve your site's accessibility by adding ALT-text to images, writing clear content, or choosing a clutter-free page layout. All of these steps also mean good SEO practices.  So, by making your website more accessible, you're also making it more SEO-friendly. You probably already know the importance of investing in robust SEO strategies in today's digital landscape. It's all about how high you rank on SERPs and the level of visibility that your website is gaining.    6. Improved brand reputation.  Accessibility is also essential for your business as it helps grow your brand reputation. By ensuring your website's universal design grants equal rights and easy access to your content, you raise awareness and build a positive reputation around your business.  Today, having an inaccessible website is the digital equivalent of sticking a big KEEP OUT sign in front of your business.    7. Faster page loading time.  It has been proven that if you improve a page's level of accessibility, you boost its speed score. As modern internet users demand fast website experiences, you want to improve your page loading times to keep up with your visitors' needs. By implementing features designed for users with disabilities, you're making your site a better place for all users.    There are many ways in which you can promote accessibility on your website. For example, users that struggle with visual impairments benefit the most from screen readers to help them understand the content on a particular website. This is a way to make your website accessible for people with sight issues and offer some support in making their daily lives a bit easier.    Hopefully, this article sheds some light on the importance of web accessibility for your business and how building a universal design for your site can positively impact your brand.  For more insights on how Optasy can help you make your website more accessible, check out our Drupal Website Accessibility services.    Photo credit: Wirestock on freepik.       ... Read more
Raluca Olariu / Jul 12'2021
DrupalDrupal 8
6 Experts Talk About the Advantages of Using Drupal

6 Experts Talk About the Advantages of Using Drupal

  As the digital landscape is constantly evolving, there is increased pressure on web content management systems (CMSs) to keep pace with the needs of the modern consumer.  To meet these complex demands that revolve around highly personalized and interactive web experiences and streamlined connectivity between devices, companies require websites that can support these goals.  One of the most powerful enterprise-level CMS platforms, Drupal, can handle more complex projects and its capabilities, as the Drupal founder, Dries Buytaert, reveals, only get better with experience.    Why is Drupal web development the right choice?   There are multiple competitive advantages that organizations can reap from using Drupal to handle their online presence. How do you know if Drupal is the right choice for your next web development project? Check out this list of key features and capabilities that Drupal offers and see how they can fit in with your needs and demands.   Are you looking to highly customize your website and content? Drupal's widely-known customizing power allows you to adjust and edit over 16,000 plug-ins and modules. If you need a CMS that can support your web development projects by implementing additional custom features like CRM, security, or SEO, with a focus on customizability, then Drupal might be the best fit.   What do the experts say? Nick Wilde, a Full-stack developer (including DevOps) at North Studios, thoroughly recommends Drupal for companies looking to change and customize their digital approaches:  "I love a *lot* of the changes in Drupal 8 compared to 7 or 6, but most of them didn't really change the way I worked. I mean, sure, using slightly different hooks etc. - but that's not really any different than integrating with different modules to my mind at least. What really did change my way of working was the Configuration Management Initiative's work, and by changed I mean massively improved. Yes, some degree of custom integration is possible with Drupal 7 with hook_update_N() and/or the features module, but in Drupal 8, a solid reproducible, testable CI and deployment process is not just possible but easy. (Yes, I'm a smidge of a fanatic about DevOps and process, despite being primarily a developer). When doing complex back-end work, moving to an Object Oriented system has felt like coming home since I started programming with Python in an OOP code-base.”   Is flexibility important for your web development project? A major selling point of Drupal lies in its rich potential to build and manage a wide range of content types, whether it is a blog post, podcast, or any other custom content types. By enabling a flexible design platform, Drupal allows users to create and manage content-rich media or eCommerce sites.    What do the experts say? Alex Moreno, a software architect, based in London, is helping big companies with their Drupal and IoT projects and has revealed how he uses Drupal's flexible core capabilities to catch up with the ever-evolving technology transformations: “Although you could flex Drupal 7 to adapt to this changing environment, the real power and flexibility comes with having a Drupal 8 architecture, where this flexibility is already in the core. That has implications for performance, adaptability, simpler architecture of services around Drupal, etc.”   Are you considering scalability as an important asset for your web project? If so, Drupal is a winning choice. When accommodating content growth becomes a challenge, Drupal steps in with its tremendously scalable capabilities and supports your growth in an effortless manner.    What do the experts say? Drupal expert, Malabya Tewari, talks about how Drupal Modules can help build a responsive design and flexible user experiences: “When I started my career with Drupal 6 briefly and then moved on to Drupal 7, I really liked the abundance of modules Drupal 7 had. ‘There is a module for that’ was a common statement while building a feature. When I transitioned to Drupal 8 and when it was in its pre-release state, there were no contributed modules. Of course, views and entity reference were in core, but it lacked the huge pool of modules that Drupal 7 had. Instead, Drupal 8 had some great flexible and robust components which mostly worked for me. Even though there was a lot of learning to do, pretty soon I got the hang of it and found out that you don't need a module for that. That's how it changed my working approach with Drupal 8 because I can build a lot of great things without any contributed module.”   Do you need greater functionality around your site's translation capabilities? Drupal 8 supports 100 different languages for translation, and these multilingual features come with the installation interfaces. That means that you can build your multilingual Drupal website easier than ever before, at no additional costs.    What do the experts say? Penyaskito is a Drupal contributor and developer at Lingotek, who manages a cloud-based translation management system for their clients. He speaks highly of Drupal's multilingual capabilities: “Thanks to the Drupal 8 Multilingual Initiative, translation is not an afterthought in Core anymore. And thanks to the clean APIs that were designed with this in mind, we are able to improve every day functionalities for our clients in our integration with Drupal 8. While with other CMS we devote time constantly to integrate with contributed modules or alike, we can focus on new functionalities as this APIs make us compatible with most contrib modules out of the box without any extra effort on our side.”   Are you interested in building a content management framework based on API architectures? Drupal's caching modules support faster page loading, optimized bandwidth, and a robust web performance to meet the needs of the modern digital consumer. Whether used for content publishing or for optimizing the user interface, Drupal's 8 API-based architecture is a top upgrade compared to previous versions.    What do the experts say? Let's see what Dries Buytaert, the father of Drupal and CTO of Acquia, has to say about Drupal's web service APIs: “You want to enable your developers to easily deliver content to different devices, channels, and platforms. This means that the content needs to be available through APIs. This is aligned with Drupal 8's roadmap, where we are focused on web services capabilities. Through Drupal's web service APIs, developers can build freely in different front-end technologies, such as Angular, React, Ember, and Swift, as well as Java and .NET. For developers, accomplishing this without the maintenance burden of a full Drupal site or the complexity of configuring standard Drupal to be decoupled is key.”   If you are not yet sure about choosing Drupal for your next web development project, we are more than happy to help you with professional advice tailored to your needs and demands. Contact us and let's start your outstanding web development project. Also, you can check our Drupal Maintenance services as well.    Here's another quote from a Drupal expert, Nick Lewis, on how Drupal 8 is influencing the way he approaches his tasks:  “Drupal 8 is looking very interesting indeed, a big leap forwards from its previous versions. I’m busy working out how to get D8 modules up and running for a client project. Well I am working on a project right now for a large global fast food outlet (here in the UK), switching from one very popular CRM system into D8 as it will cut costs tremendously and not only that, recruitment will be easier given Drupal’s wide adoption in the community.”   Photo credit: Den Harrson on Unsplash.  ... Read more
Raluca Olariu / Jul 01'2021

Need a new Project?

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

Start a Project

(416) 243-2431

Contact

(416) 243-2431

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