Lorem ipsum dolor sit amet, consectetur adipiscing elit. . Required fields are marked *. Blog Post Optin Form. Is there a similar code I can use to prevent Divi from cropping my featured images in the Blog Module, in Fullwidth layout mode? The beautiful masonry mosaic gallery is designed using a plugin called Responsive Lightbox & Gallery. Blog Post Optin Form We release a full tutorial every Tuesday! We send out a roundup email once or twice a month with tutorials and new products, so that's what you will get! return $size; } My hope is that whether you’re a newbie at Divi and web design or if you’re an experienced Divi expert, you’ll be able to apply these ideas and will be inspired to take your Divi galleries to the next level! The Divi Portfolio Module and the Divi Filterable Portfolio Module crop the featured image by default. These 17 free Divi plugins are a great way to add some new features to Divi without buying premium Divi plugins. Hi Nelson, If the images were properly optimized before uploading, then it shouldn’t affect the load time much at all. This tutorial will show you how to remove the crop from the Divi Portfolio Module and the Divi Filterable Portfolio Module. In order to make such a hot Mosaic Gallery follow the next instructions: Click New Gallery Tab on the left navigation menu of the plugin. add_filter( ‘et_pb_gallery_image_height’, ‘pa_gallery_image_size_height’ ); function pa_et_theme_image_sizes( $sizes ) { The only way around that would be to use images that are properly optimized, and you could even use a plugin like Smush to change their size. In this third example, we’re going to be using a CSS “clipping mask” to create a nifty little border around our gallery images. Dear Josh Thank you very much! Out of the box, Divi creates an additional image size for the blog featured image, which is smaller than the one shown on blog posts. If you have any questions or if this series has helped you out or encouraged you in any way, feel free to leave me a comment below! “Image File Types Explained”, JoshHall.co © 2020 | Privacy Policy | Terms & Conditions. You can select the All.json file to import all of the layouts at once, or choose a… You will find that all of our popular Divi tutorials address problems like this, so if you are new to the blog — that what ya get! } Other’s will be a little more advanced and will require a little CSS and other customizations. This is great, worked first time, super easily. All you have to do is add the following code snippet to your Divi child theme. The Gallery module lets you create and organize galleries anywhere on your website. You might also like. Hi Walter, Add this snippet to the functions.php file of a Divi child theme. It’s been ages since I used Extra, if I get a chance someday I will check but you could ask in an Extra Facebook group if you need help with this now. The code specifically targets the parts of Divi. Hi Aravind, Thanks so much for your excellent tutorials. } This code snippet will remove the default Divi cropped image size for the gallery images and will use the original aspect ratio instead. I particularly like how you go on detail explaining how the code works so we can adjust it as needed. You are welcome! } Much appreciated. Regards from Berlin. If it’s taking longer then several things comes to mind. You resolved the issue of my gallery images cropping… Only issue I have now is, my galleries page takes a long time to load. return $sizes; If you want to expand Divi for free, check out these 17 free Divi plugins to download today. Professional high-converting custom website design, Use your website to increase client leads and product sales, Premium website hosting, maintenance, and marketing, Get users to your site from your blog, ads, and social media, How To Highlight Event Categories By Color In Divi Events Calendar, How To Style And Customize The Divi Post Navigation Module, How To Fix The Divi Theme Builder Post Content Module Width, https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/, Divi Portolio/Filterable Portfolio Module. Would be glad to hear from you. My page is looking great on desktop, but my blog module featured images are still cropping to the default size on mobile. Learn how to stop the featured images from being cropped in the Divi blog module and portfolio modules, as well as images in the gallery module. There is one common issue I see a lot, and I wanted to put and end to it once and for all. Several of my clients spanning across multiple industries seem to LOVE this layout so I’m excited to share it with you! If you don’t already have one, you can download our free Divi child theme here. I can add the chile theam after finishing my website? I can’t imagine that it is related, even if it seems like it. Masonry Gallery. I offer exclusive discounts and deals to my email list and promise not to abuse the privilege to email you directly. to display your images. If you’re new to CSS, my goal is to make it a little less daunting and for you to see how just a few lines of code can take your designs to the next level. It looks like you are adding this code to the style.css file…that is only for CSS. I’m glad I ran across your site. Hello Josh, please how can I crop the portrait sized images and all the images to be same size in the thumbnails inside the gallery module. To use this new layout pack you’ll need to first download it’s zipped file by clicking the download button below. if(is_page(24811)){ Hi there, Join my mailing list and get exclusive discounts to my courses, layouts & more. Join over 4,200 others and subscribe to our helpful Divi videos! With the Divi Gallery Module we can create awesome, eye catching galleries that’ll draw in our website visitors. Yes, you can get the page idea (when you edit the page the number in the url) and replace it in this code snippet: function pa_gallery_image_size( $size ) { add_filter( ‘et_theme_image_sizes’, ‘pa_et_theme_image_sizes’ ). Nullam quis risus eget urna mollis ornare vel eu leo. Join my Divi Web Designers Facebook group to get free support and to be automatically plugged into an awesome, supportive community of fellow Divi/WordPress web designers! Happy to hear you are combining tutorials! Like in my screenshot? Get 20% OFF Divi when you join using my link! The Divi Gallery Module automatically puts the Grid style layout in 4 columns, but every once in a while it’d be nice to lay them out in 3, 4, or 6 columns, right? Please check out the video below to see the plugin in action. 25% OFF all Divi Plugins, Courses, and Child Themes! Controllers – For the instances where there are multiple slides used for navigation (like I’m showing the different Gallery pages) this is moving the dot controllers to the right and also removing … Hi Nelson, thank you so much for this helpful post! 075 – The Ins & Outs of Running A Website Maintenance Plan with Stephanie Hudson, 074 – Staying Power > Starting Power (10 tips for building longevity), Best Divi Facebook Groups to Join in 2020, 5 Ways Divi Changed my Business (and Life). Thanks for this – super detailed & helpful! In this tutorial, I am will show you how to style and customize the Divi Post Navigation module with CSS for navigating previous and next posts and pages. This tutorial will show you how to remove the crop from the Divi blog module. Otherwise, try this: No spam. Its powerful options make it easy to create beautiful mosaic galleries with lightbox effects. }. Shop Now. Oh, and you’ll also get my latest e-book on (Only Sale Of The Year! ) Blog Post Optin Form In this second example, we’re going to create a tight-tiled gallery look with custom padding to add a clean and uniform white space between each image. } I assume its now loading full resolution images? unset($sizes[‘1080×675’]); This tutorial will show you how to remove the crop from the Divi gallery module. If you’re new to web design or Divi, an effect like this can seem intimidating but I’ll provide step by step instructions below on how to achieve this trendy grayscale-to-color look. Hi Chris, Is there a way around this? Check this out! When the portability modal pops up, select the import tab. Pls help. add_filter( ‘et_pb_gallery_image_width’, ‘pa_gallery_image_size’ ); function pa_gallery_image_size_height( $size ) { However, I started noticing now my media library in gallery view does not load any images anymore. Like and Follow Me on Facebook to connect with me, see exclusive Facebook-only webinars, Q&A’s and to get exclusive deals and offers I only provide to my FB followers! donec ullamcorper nulla non metus auctor fringilla. ; Push Add Images button. Then, locate it in your downloads folder and unzip it. Awesome, Arlene! by Josh | Feb 8, 2017 | Elegant Themes Series | 4 comments. This powerful plugin allows you to create great looking galleries quickly and easily. This code snippet will remove the default Divi cropped image size for the blog feed featured image and will use the original aspect ratio instead. Thank you in advance for your answer. ; Name your new gallery and elect Pro Mosaic template. Hi Sudha, that is very strange, do you have it in a media query? The Divi Gallery Module also crops the images by default, which is usually nice. } The Divi Builder gallery module comes in both grid and slider format and supports large galleries with pagination. I’m going to give your three solutions today and stop the crop in the following four Divi modules. is it possible to have different widths and not different heights on the gallery module. Hi Rich, View A … Divi is a remarkably good tool, but sometimes we face a niche or specific challenge that is not possible by default in Divi. if(is_page(PAGEIDHERE)){ ; Choose a mosaic layout: Default (2+3), Multi-column, One row (1+2), One row (1+4); Approve your choice by clicking OK button. I was obsessing over the crop issue all of yesterday and this was the simplest, best solution. 076 – Personal Brand vs Business Name…What’s best for you? Oh and you’ll also get my latest eBook! A beautiful mosaic gallery. return $sizes; If you’re not too familiar with CSS, don’t worry, I’ll provide the code and explain what it’s for and how to use it. This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories. $sizes[‘1080×9998’] = ‘et-pb-post-main-image-fullwidth’; In this Divi mini series, we’re going to go over 5 Impressive Divi Gallery Layouts and how to create them. Great help! Next, navigate in your WordPress admin to Divi > Divi Libraryand click the “Import & Export” button at the top of the page. if(is_page(PAGEIDHERE)){ Gallery Widget – lets you display a photo gallery or photo slideshow in your site’s sidebar ... Divi Lightbox for Jetpack Tiled Galleries – helps Divi users by adding the Divi Lightbox to Jetpack Tiled Galleries; I’ll let you know when my next tutorial, podcast or post drops and promise not to bombard you with spammy emails. Sometimes this is not very noticeable if your images are a similar shape, but there are times this can be very annoying. But sometimes you want to have these uncropped and display at the same aspect ratio as the actual images. Awesome. Maybe some kind of plugin conflict, not sure. Tiled Galleries – lets you arrange your galleries in three ways: rectangular mosaic, square mosaic, and circular grid. This behavior in Divi was driving me crazy. return 700; In this post, I’ll show you how! Galleries are one of the most important tools in web design today. This is fine sometimes, but if you want to show off your projects in their original shape, for example, a square, you need to modify Divi with some PHP code. Really appreciate you putting this out as I’ve been trying for ages to get portrait images to work in a design (book covers – they look rubbish cropped!) Here is my full 5 Impressive Divi Gallery Layouts and How to Create Them series from the Elegant Themes Blog. I implemented the “stop divi image cropping” and “change portfolio module image ratio” and everything works fine on the frontend. Sharing a collection of images is always a great way to visually engage users in your content. Our method here will simply remove that smaller size and replace it with the original size, which will also give it the same aspect ratio as the one you upload. Is there a way to remove gallery image cropping on certain pages, rather than site wide? This type of code needs added to the functions.php file. return $sizes; https://wordpress.org/plugins/final-tiles-grid-gallery-lite/, Your email address will not be published. A collection of different gallery formats such as tiled, mosaic, and masonry. Do you see any reason why that is? Hi Kevin, The Divi Gallery Module automatically puts the Grid style layout in 4 columns, but every once in a while it’d be nice to lay them out in 3, 4, or 6 columns, right? Unfortunately with the Divi gallery that doesn’t work. Hi Mauricio, This tutorial will show you how to remove the crop from the Divi gallery module. a cool mosaic gallery. ; Tick images you like at the WordPress Media Library. } You’re welcome Tom, I’m very happy to help and glad you could show off your book covers! return $size; Your email address will not be published. And the good news is…it’s pretty easy! This email list will send you an email when we post a new blog post. In this post, I’ll show you how! Hi Micheal, I’d like to use more than one Divi gallery modules on a website and I need different thumbnail sizes and ratio for these galleries. add_filter(‘et_theme_image_sizes’, ‘pa_remove_featured_post_cropping’); function pa_remove_featured_post_cropping($sizes) { morbi leo risus. 25% OFF all Divi Plugins, Courses, and Child Themes! Etiam porta sem malesuada magna mollis euismod. This code snippet will remove the default Divi cropped image size for the portfolio featured image and will use the original aspect ratio instead. Hi Nelson, Today’s Before & After: Divi Slider Modules as a Navigation Mosaic. Last but not least, we all know the Divi Blog Module crops the featured image by default. But sometimes you want to have these uncropped and display at the same aspect ratio as the actual images. You want to have vertical or square images as your featured image in the Divi blog feed. It’s my pleasure. For this final example, I wanted to share with you an effect that my clients love and is one that took a little creativity and trial and error to achieve. thanks for these posts – the one about columns really helped me out of a fix. Would really appreciate your help! Will the code snippet for the blog module only work for the mosaic or grid blog layouts? Lightbox viewing, for users to get a larger version of the photos in your gallery. I actually use this plugin for advanced galleries! The Masonry Gallery module allows you to create amazing galleries! And Then There Were Three. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I don’t think I have tested it on the fullwidth layout, so if you do let me know if it works for that too! Works like a charm in combination with your other solution for blogs (displaying images as squares at ratio 1:1 and zooming in on hover). Hi Martin, be sure to check out my other tutorials, this one should help: https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/. He loves helping small businesses, exploring, building websites with Divi, and teaching others. Image commenting for creating a community and conversation behind your photos. Some of these examples will be fairly simple and will just require some adjustments to the Divi module settings. return 500; They’re easy to use and add modules to the Divi Builder or style Divi in a way that looks great or makes it easier to use. Thanks, by the way, your posts are super informative and helpful. if (isset($sizes[‘1080×675’])) { Thank you Nelson and thank you for all the help you give us on a daily basis, I don’t know what I am doing wrong i just copy and paste but the Code just wont work. $sizes[‘225×225’] = ‘pa-et-pb-post-main-image’; I think it should. We also release other helpful tips, freebies, and resources throughout the week. Can you recommend a solution using your tip »Stop Divi Gallery Images from Cropping«? I’m afraid that’s not possible in Divi, sorry. Whether you’re a designer wanting to showcase your work, a photographer wanting to display your photos, or a business wanting a prominent portfolio–-the need for online galleries goes on and on. Thank you so much! Thank you very much! Thank you so much for all your efforts! Image sharing, through social media and other options like email. Then, click the “choose file” button and go back to the folder you unzipped in your downloads folder. In this Divi tutorial I will show you how to fix the width of the Divi Theme Builder Post Content module when used with the Divi Builder. Just special deals, important announcements and a notification when a new tutorial or video goes live! I’m actually working on a free layout of 5, 6, 7, and 8 column layouts for the Divi builder so hopefully that’ll help as well! Its advanced design settings allow you to fully style this module to your liking, and to … So glad these posts helped you out. Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. The Divi Gallery Module also crops the images by default, which is usually nice. Sure, I could give that, but I would suggest instead to use the Divi Theme Builder and use an image module with dynamic content set for the Featured Image. The majority of the settings we’ll change are in the standard module options, then we’ll just add a little CSS for the custom padding.