0 Comments
Lazy load inline images using Filter API & Image styles
Lazy loading is a technique that defers the loading of images when it is actually required and not loading them upfront. Thus, images will be loaded only when an image is in the viewport of the browser as the user scrolls. This helps in reducing the initial size of the payload of a webpage and improving the performance. There is an excellent article Lazy Loading Images and Video which describes how to use Intersection Observer API to register an observer to watch image elements. The whole idea is to load a small lightweight placeholder image upfront on page load and lazily load the original image when the observer detects an image in the viewport. This is similar to the technique used by Medium to load images on their portal. Using the method described in Lazy Loading Images and Video, to lazy load an inline image in Drupal we will need to do 3 things:
Tl;drCheck out the plugin file here: https://github.com/malabya/imalabya/blob/master/web/modules/custom/im_filters/src/Plugin/Filter/LazyLoad.php The JavaScript file with the intersection observer: https://github.com/malabya/imalabya/blob/master/web/themes/imalabya/src/scripts/lazyload.es6.js Add an image style to create a lightweight placeholder imageThis step is fairly simple. Create a new image style to generate a small lightweight placeholder image. This placeholder image will be loaded when a page is loaded to show a blurred out image which will be replaced by the intersection observer. For this, create an image style called Add a filter to alter the HTML markup of imagesTo lazy load an image we will the image to be in a particular HTML structure
Filter API is a great plugin that can be added to text formats which will alter the text before it is being rendered and gets cached. We can also attach libraries to the plugin which will ensure that the intersection observer JavaScript gets loaded only when it is required [more performance improvement]. Start off by defining a Filter plugin using annotations.
The plugin class extends the To apply the
The last thing to do is to add the attributes for the image HTML. In the HTML snippet above there are 3 attributes that need to be added.
Add an intersection observer in JavaScript to lazy load imageIntersection Observer API is a relatively new API in browsers that is really simple to detect when an element enters the viewport and take an action when it does. The javascript will fetch all the
Lazy loading in actionOnce, the plugin and the javascript is implemented and the filter is enabled on a text format check, the lazy load functionality will kick in for all the images being uploaded in CKEditor. To check how if lazy loading actually working, watch the below gif animation. As you can see in the initial stage, only the placeholder images are loaded which are pretty lightweight ~750B in size. As I scroll down the page, the ConclusionLazy loading, if implemented properly can significantly improve the page speed by loading the necessary content of a page and defer loading the big image assets when it is required. All done keeping the content intact. With faster loading of pages, the user experience will also improve greatly which users will love. Down the lane, I am planning to build a Drupal module out of it to contribute it back to the community so that more people can use this on their sites and improve the performance. malabya Mon, 05/25/2020 - 21:42 Drupal development , PerformanceOriginally from Drupal.org aggregator https://ift.tt/2Md6nyr Happy to announce we're attempting to kick off a new community initiative primarily focused on fixing and closing bugs. We're hoping to
We need you!Resolving core bugs requires a wide range of skills - we're looking for volunteers to join us who can help with one or more of the following tasks:
If you are are looking to get involved - come join us on Slack in the #bugsmash channel. We will meet asynchronously in the #bugsmash slack channel fortnightly on a Tuesday at 0400 UTC which maps to the following times:
Originally from Drupal.org aggregator https://ift.tt/2XcSp68 I organized Drupal 9 Porting Day for April 28 as part of my #DrupalCares funding sub-campaign to help the Drupal Association bounce back from their financial losses due to the ongoing pandemic. It was a lot of fun with Lee Rowlands, Vladimir Roudakov, Adam Bergstein and Mike Lutz helping lead the contribution before and after my time of availability. 126 issues were worked on and 43 newly Drupal 9 compatible releases were made then. Given how fun it was, with Drupal 9 coming out next week it was logical to do another event. Last Friday would have been a great opportunity in person at DrupalCon Minneapolis if not for the pandemic (again). So I decided to schedule the event for that weekend. Surabhi Gokte and Gabriele Maira helped a lot in getting the event off the ground and we announced Drupal 9 Porting Weekend for May 22-23 to accommodate people available on the workday as well as the weekend. With more time to prepare, a lot more interested folks signed up to help lead the event in their respective timezones. 14 leads signed up and helped contributors for 52 hours, while the event lasted. Thanks Vladimir Roudakov (VladimirAus), Janna Malikova (JannaKha), Vaibhav Jain (vaibhavjain), Tsegaselassie Tadesse (tsega), Gabriele Maira (gambry), João Ventura (jcnventura), Oleh Vehera (voleger), Matthew Radcliffe (mradcliffe), Michael Lutz (mikelutz), Adam Bergstein (nerdstein), Kristen Pol, Qiangjun Ran (jungle), Jaideep Singh Kandari (JayKandari) and Digant Jagtap (digantdj), you were fantastic! Kristen Pol and Tsegaselassie Tadesse were also very active in the planning stage, Kristen published a very detailed guide to the weekend, Tsega wrote up and posted developer tips. The Bassam Ismail posted this video based on those guides of an actual Drupal 9 project update running with Upgrade Status and Rector, ending in submitting the patch: So with everything well prepared, Vladimir and Janna started the weekend and the leads were handing off responsibilities to each other throughout the whole event. This is how time coverage looked like for the whole 52 hours. There was not a single time when someone was not there to help: We had a lot of fun and learned a ton from each other. While numbers will not explain the event, that is all we have after the fact to look at, so here they are:
When looking at project releases, the weekend also supported a major increase in daily newly Drupal 9 compatible releases also with several days of after-effects (I am counting these with my own script): New releases at the weekend and shortly after included fun modules like Pirate but also seriously cool modules like the Tome static site generator, Quicklink and top 200 most used modules like Views Accordion and Schema.org Metatag. As luck would have it Drupal 9.0.0 RC1 was also released on this weekend, which meant that people testing their updated projects also gave the Drupal 9 release candidate a test drive right away. For me this event was amazing to organize. The results in new Drupal 9 compatible projects before the stable core release and the additional testing of the release candidate are all good material outcomes. The raised awareness around the porting process and tools as well as the know-how shared will last even longer as people use what they learned and teach others as well. Also the concentrated increased use of the tools resulted in more improvement suggestions, so we can make them even better for the next wave of porters to come. Thanks all for your involvement, you made a lasting difference. Keep spreading your know-how and all the good things about Drupal 9! Ps. Next up is celebrating the release on June 3rd, 2020! Post your artwork, selfies, videos and events at https://celebratedrupal.org/ and let's have some fun together. Originally from Drupal.org aggregator https://ift.tt/3cfGmcu
5 tips for universal design
silje May 29, 2020
Universal design of ICT is about designing websites, apps and self-service machines so that as many people as possible can use it regardless of disability. Those who use your website may be visually impaired or blind and therefore dependent on screen readers, or people with disabilities who use keyboard only or other tools to navigate the website, or users with cognitive disabilities. 01 Typography - make your website easy to readYour website should be easy to read. Those who use the website may be visually impaired, may have cognitive impairment, or may simply want to scour the content of the page. Simple design concepts such as using the right size of the text, length of lines and subheadings help here. In documents and on print it is common to use 12 dots on text, while on screen this text becomes very small. It is recommended to use 14 or 16 points instead. The text should also stand out above the background. Avoid long texts on images and, if necessary, use a semi-transparent background color. Long lines are harder to read, and the long distance from end to start of the next line can also interfere with the flow of reading. For a single-column page, 45 to 75 characters are considered satisfactory lengths. It also helps with the read flow that the start of each line is equal. Body should therefore be aligned to the left, not centered. Divide the text into paragraphs and use headings and subheadings. This makes it easier to understand the structure of the text. Make sure the headings are bigger so that they are different from the body text. 02. Contrast for the visually impaired and color blind, but also those who are out in the sun.It is of little help that the text is large enough if you have light gray text on a white background. Good contrast on texts, buttons and icons is very important. This is not only for the visually impaired, but also for users who have low brightness and contrast on their screen, such as when out in the sun. For at innholdet skal komme godt nok frem skal kontrasten være 7:1 på liten tekst (f.eks brødtekst) og 3:1 på overskrifter og større illustrasjoner, ikoner o.l. For the content to appear clearly enough, the contrast should be 7: 1 on small text (eg body text) and 3: 1 on headings and larger illustrations and icons. 03. Proper use of alt textAlt text is a texts that can be read by screen readers so that those who cannot see the image won't miss any important information on the page. A typical mistake is to start the alt text with "Picture of ..". or "icon for ...". The screen readers knows that the content is an image, but it needs a text to describe it to the user. Therefore, use the alt text to describing the image rather than explaining that it is an image. It is also important to be detailed if it is important to the context. The alt text should not consist of keywords, but be a complete sentence. Examples of bad alt text for the image above would be "Person with mask, graffiti wall". A better alt text is "Man with a white Guy Fawkes mask is facing camera in front of a graffiti wall." Also, make sure the text is not too long. The maximum length of the alt text is 125 characters. 04. Make the links stand out from the textLinks in the body text can sometimes be difficult to detect, especially for the visually impaired and color blind. The links should therefore be clearly distinguished from the text around, both in color and underline. But it is not just in the design that one can make a difference, it also matters what text you use. We often see links at the end of a sentence that are named "here". For example, “Read about our services here”. Instead, you want to tell the user what the link does or what content it links to in the link text itself. A better link text would be "Read about our services". 05. Make the texts easily understandableThis tip is very much related to the first, but this is more about language and content production than design and layout. Keep in mind that some users might have some cognitive disabilities. A simpler language and shorter sentences might make it easier for these users.
Originally from Drupal.org aggregator https://ift.tt/3gCbfeH In a recent Drupal training, I got a question about a replacement for the Drupal 7 Nodequeue module for Drupal 8 and other future versions. What this module allowed you to do was sort your content in whichever order you preferred. In Drupal, we make lists of content using Views and out of the box, and we have the ability to sort this content in different ways, such as:
But what if I want a list of content sorted in whichever order that I want? This is what Nodequeue allowed me to do: let me sort my content arbitrarily. Unfortunately, the Nodequeue module no longer exists for Drupal 8. But good news: there's a replacement called Entityqueue. This module does everything that Nodequeue lets us do in Drupal 7, and more. But content creation in Drupal has changed since Drupal 7. Many people are now using the Paragraphs module to lay out their content, so in this video tutorial, I'll be showing you two different methods of custom sorting:
Entityqueue in ViewsAfter installing the module, we have a new option in Admin > Structure called Entityqueues. By default, there are no queues, so we create one:
After saving our queue, we have two different ways of adding content to the queue. We click 'Edit items' and type in the title of the content in the autocomplete field, click 'Add item', and click 'Save.' Another way to add items to the queue is to go to the content and click 'Edit'. Now, a new tab appears at the top of the page that says 'Entityqueue.' This will show a list of the queues this could be added to (it could be more than one). Click 'Add to queue' to add it. After adding it, we might want to rearrange the order of the items inside of that queue. Click the 'Edit subqueue items' and drag them around. For this tutorial, I've assumed you've already created a View of your content that you'd like to sort. Now, how do we get what we see in our View to match our queue? Add Relationship to Your ViewThe magic of Entityqueues comes from the relationship that we add in Views: whatever happens with our queue can be matched in our View. To add the relationship do the following:
After doing this, the View will now only show content that has been added to the queue. Great! However, the order of our content might be incorrect. How do we get the sorting to match what's in our queue? Add Sorting CriteriaIf you've made no changes to the sorting criteria on your View, your content is likely being sorted by 'Content: Authored on (desc).' Basically, it's being sorted by the date the content was created. We need to remove this sorting criteria:
Now, we need to add a new sort criteria that matches what is in our queue:
And now, our View content and order matches what is in our Entityqueue! Paragraph Type with Content ReferenceAlthough Drupal 7 did have support for the Paragraphs module, this method of laying out content has really gained popularity since Drupal 8 was released in 2016. To keep this tutorial brief, I won't go into all the details of creating new Paragraph types, but here are the basics. After downloading and installing the module, we have a new section in Admin > Structure called Paragraph types:
Add a new 'Content' (reference) field:
On your Paragraphs-enabled content type, you now have the option to add a 'Featured Content' paragraph. This will display an auto-complete field (similar to Entityqueue) where you can type the Title of the content you want to feature. You can add multiple items, and rearrange them how you'd like. By default, what's shown is a simple link to the content, but this can be modified at the theme layer to display however you'd like, such as a slideshow of the featured content (but that's beyond the scope of this tutorial). Comparing the Two MethodsFrom an Editor's perspective, it seems like there's less steps involved going with the Paragraphs approach, so why use that over Entityqueue? There's advantages to both methods and you have to choose which is right for your scenario. If you have a Paragraphs-enabled content type, going down the Paragraphs route may be the simplest option. Editors just add the Paragraph to the page and begin typing and re-ordering the content. However, this features content in only one location on the site. With Entityqueue, though there's a few more steps from the Editor's perspective (and you may want to create a menu item so they can get to the queues quicker), if you need content to be sorted and featured in multiple places on your site, this is the route to go. In the video, I created a Views Page which has a relationship with my queue, but I quickly created a Block, which inherits all the settings I had from my page) and I can now place this in a region and have the two show the same content in the same order. Wrapping UpNodequeue was a great Drupal 7 module, and luckily its spirit lives on (okay, that sentence might be a bit puffed up). But Entityqueue offers a great alternative and even includes some features that Nodequeue didn't, like being able to sort other entities like users and taxonomy terms. And content entry in Drupal 8 has evolved with the Paragraphs module, which also offers us a nice, easy-to-use method of sorting content in whichever order we'd like. To get more in-depth web development training, check out our training page or sign-up for a tutorial. + more awesome articles by Evolving WebOriginally from Drupal.org aggregator https://ift.tt/2XekCcH
This month’s SC DUG meeting featured Will Jackson from Kanopi Studios talking about his virtual background and office. Before everyone was learning to use Zoom virtual backgrounds, Will had built out a full 3D room for his background, including family pictures and other fun details. He talked about what he built and may inspire you to try some more personalized than swaying palm tree and night skies. If you would like to join us please check out our up coming events on MeetUp for meeting times, locations, and remote connection information. We frequently use these presentations to practice new presentations, try out heavily revised versions, and test out new ideas with a friendly audience. So if some of the content of these videos seems a bit rough please understand we are all learning all the time and we are open to constructive feedback. If you want to see a polished version checkout our group members’ talks at camps and cons. If you are interested in giving a practice talk, leave me a comment here, contact me through Drupal.org, or find me on Drupal Slack. We’re excited to hear new voices and ideas. We want to support the community, and that means you. Originally from Drupal.org aggregator https://ift.tt/2XCqhbu The launch of Drupal 9 is less than a week away, and that is cause for celebration. In the past, the Drupal community and the Drupal Association have organized a variety of celebrations across the globe. For Drupal 8's launch we saw more than 200 release parties happen on six continents. Celebrations in the time of COVID-19 are a much different affair; the world looks different than it did for Drupal 8's launch in 2015. But that doesn't mean we aren't going to celebrate! For Drupal 9, the community has built CelebrateDrupal.org - a central hub for all of the virtual celebrations the community will undertake this year for the release of Drupal 9. We encourage you to join in the fun! You can post your virtual events for others to join, upload photos of your Drupal 9 cupcakes, or selfies of your celebration, or add video. We've also provided a complete brand kit with the updated Drupal brand, which you are welcome to use as part of your celebrations. We encourage you to post about your celebrations on social media using the hashtags #CelebrateDrupal, #Drupal9, and #D9LaunchDay (on June 3rd). Finally, we'd love to have you join us for DrupalCon Global, from July 14-17, where we'll be reflecting on the Drupal 9 launch as a community. While we're sad we can't celebrate in person, we're thrilled to celebrate with the whole Drupal community virtually following Drupal 9's release on June 3rd. We'll see you online! Originally from Drupal.org aggregator https://ift.tt/2yIanUH It’s been a long few months for many of us and we’re all ready for some good news!! Luckily, as a part of the Drupal open source community, we have some. Our group continues to be full of strong, resilient, and uplifting individuals who truly understand that we're all in this together. You Have ResourcesWe cannot recommend strongly enough to please, stay connected and in-touch with your local community. Now more than ever, this can help maintain momentum and provide the companionship that many of us miss during this time of social and physical distancing. Many local and regional meetups provide time at the beginning of their events for networking, including dedicated time for those looking for work and those who are hiring. We encourage virtual event organizers to continue to provide (or even expand) this aspect of online events. Beyond the power of word-of-mouth, there are other online resources available to you in these unusual times. There are Drupal Camps that have year-round job boards posted on their websites. Drupal.org has a whole section of their website dedicated to those looking for work. The organizations that are posting here are invested in Drupal, just as you are. This common spark could start you on a new path. What You Can Do for YourselfIn spite of the global state, there are many things you can do - you are empowered! We suggest you start with the following:
How Employers Can HelpGreat leaders know that communication is the key to success. Now more than ever, your leadership skills and community contributions are needed to help pull us through this global crisis. Please,
We Never Stop GrowingEven in challenging times, we as individuals and as groups cannot stop growing. Take time, get talking, and get excited. There are many more roads to be traveled, together. Resources
We welcome additional resources in the comment section, thanks! Originally from Drupal.org aggregator https://ift.tt/3cdHiOo |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
April 2023
Categories |