Awesome video. You're one of the BEST Divi specialists on YT. Love your videos, Nelson. Thanks so much for all the great content you create - really helps us out!
Hi, at first it didn't work for me but then I realized in your blog post you have .pa-blog-image-9-16 which I copied exactly but then learnt from the video after watching it a third time you don't copy the dot! it's just pa-blog-image-9-16. Thanks for sharing :)
Hi Micheal, check out this article from Elegant Themes: intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript
Hi Neon, I'm not really sure what you mean about loading. Yes if you can have a standard image for your blog then for sure, do that. This would be more for client sites where you never know what people will upload.
Creating my very first website using a Divi theme. I am brand new at this. I just found your tutorials, thank you. Just watched the "Mega Menu" tutorial and creating a button over an image. I have 3 images, on my home page, which are linked to each of my UA-cam videos. Even though you can choose for the link to "open in the same page" the link will open a new page and take you to UA-cam. I also noticed that most of the plugins show that you have to work from a "post" page. Non of the plugins show how to use an image in your home page. Do you have a tutorial which shows you how to create a lightbox which will stay in the same page? Do you have a tutorial showing how to add CSS to an image in you home page? Thank you in advance for any guidance you can provide. Kindest Regards, Louis Krudo
@@PeeAyeCreative Thank you for the response and yes to the pop up without leaving the page. I only have a home page, no post page at the moment, where I have 3 side by side modules with a picture on each one. Each picture is linked to a UA-cam URL. When you click on the picture it will open a new tab and open UA-cam. Is it possible to create a pop up or lightbox which will not require a new window tab to open? Thank you in advance. Louis Krudo
@@PeeAyeCreative Yes I know about that function but what do I do in the following case... 1 page with different sections... each section has a Woo Products module with different categories for example. section 1 - t-shirts (I want 2.3 ratio images)- Portrait section 2 - shoe (I want 1.1 ratio images) - Square section 3 - bike (I want 4.3 ratio images) - Landscape I know there is a fuction in the customizer - uncropped But I want it to look neat with text and price being in same line. Is this even possible?
This tutorial is about the Blog module, but the same principle could be used in other modules for changing the image aspect ratio. It would be completely different selectors.
Hi, I’m a new blogger, and I’m only just learning about SEO, what size should my images in my blog posts be? My blog content width area is about 650px.
Hi Swid, I'm not an SEO expert so I can't really give good advice on that specifically. Just try to keep the images you upload close to the actual size they will be displayed. If it is a featured image use the size they are displaying in your blog post template.
And what if I'd like to change the aspect ration in the archive pages? For instance I'm using Extra Divi Theme and I'd like to change the thumbnail aspect raion in a category page. Can I use this method?
hey so all of my featured images are 1200x630. and i don't want them to be cropped when the thumbnail shows. for some reason, divi by default crop my featured images to 1080x630. is there a way to fix that?
Hi Nelson, Love your videos, you deserve a million subscribers. I noticed that different posts all have same height. As at 4:50 I believe this is because their titles and excerpts have the same length. I tried on my website and found if the length of the titles and excerpts are different, their heights will be different. Will you please make a tutorial on how fix this? I would like to make them have the same height. Thanks.
Hi Matt, there are some tricks like setting a min-height on the title, but there are no real solutions to what you describe without it also looking bad. You could set a crazy min-height to cover really long titles, but then it looks silly too. You can however limit the excerpt length in the settings.
This works well for the blog loop but what about on a single blog post? The featured image is still being cropped. Is that a different filter? The lack of control and layout options without hacks and/or 3rd party plugins for the DIVI blog module is extremely frustrating.
Hi I thought I finally had a solution but my images won't fit. Even with css "cover". In fact Divi goes fetching another image ratio for my original images which has the Pinterest format. So instead of pushing my 2:3 image it's fetching a 3:2 copy of my image and tries to makes it cover my 2/3 space... :-(
When the image propagates onto the page it is not being responsive...it just crops into the middle of the image. So all edges are cut off. What am I doing wrong?
Hi Tammy, are you referring to the default Divi behavior? This tutorial doesn't affect that, but you may be looking for our other tutorial about actually removing the crop: www.peeayecreative.com/how-to-stop-divi-image-crop/
My comment disappeared, where I said if some posts have image and some don't your blog layout would be broken with just CSS solution from video. I found javascript/jQuery fix: (function($){ $(document).ready(function() { $('article.et_pb_post').each(function(i, v) { $(".entry-featured-image-url", this).insertAfter(jQuery(".post-meta", this)); }); }); })(jQuery);
I'm not sure what you mean. If you are trying to remove any crop and have the same aspect ratio as what you uploaded, please see our other tutorial: ua-cam.com/video/ijeTKJdNk7Q/v-deo.html
Why do the Featured images on the Blog Page and on the same featured image on the individual post page have different aspect ratios ? This doesn't make sense
why would anyone want their pictures to be all different aspects and heights. Some basic design principles as defaults would make divi much better. As it is. All its default options seem to be bad design choices. then to fix them you need to learn how to code. Something as simple as make all pictures in a row the same size. Requires 2 hours of youtube and web searching and still no solution. sigh
Why don't you copy-paste your css codes above :) This is like torture. And I don't think sb else would steal them to created another hit divi blog aspect ratio video.
That would be horrible formatting. In fact, UA-cam does not even allow carrot braces, so I couldn't. It certainly has nothing to do with anybody stealing it, the code is public on my blog.
@@PeeAyeCreative Thanks for deleting the Whaaat part :) I didn't know UA-cam limitations, my ignorance. I urged you to do so because such codes helped me enormously when inserting a customized upload plugin code, etc. Thanks for your efforts.
Unfortunately, it does not work for me. I have this problem with the blog module showing different thumbnail sizes in category pages. Still struggling to find an answer.
Awesome video. You're one of the BEST Divi specialists on YT. Love your videos, Nelson. Thanks so much for all the great content you create - really helps us out!
Wow, thanks! I'm so happy to hear that, and glad you like my content!
I have been looking for days for this solution. Thank you.
Hey, so glad you found our tutorials!
Thanks again. Always to the point and easy to understand.
Thanks Julie, I am glad you like it and appreciate my style, thank you!
damn you made this so so easy and clear with the copy and past blog post to accompany this. you rock!
I like to make it easy! I'm so glad you found it helpful, thanks!
Hi, at first it didn't work for me but then I realized in your blog post you have .pa-blog-image-9-16 which I copied exactly but then learnt from the video after watching it a third time you don't copy the dot! it's just pa-blog-image-9-16. Thanks for sharing :)
Hi Donna, yes that's one of those confusing things, I should remember to mention it more.
the blog still crops the image,
so i'm losing its quality,
how can i prevent the blog post from doing that ?
Thanks !
@Pee-Aye Creative
I have the same issue
Same issue @Pee-Aye Creative
Same issue.
A very helpful video. Keep it up, mate.
Great, so happy people are loving this so much!
Hi. Useful info, thanks. Is there a simple code snippet to change the height/width on the full post layout?
Hi Micheal, check out this article from Elegant Themes: intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript
Hi Pee-Aye this seems really good but what about fast loading aren't we better to crop the image?
Hi Neon, I'm not really sure what you mean about loading. Yes if you can have a standard image for your blog then for sure, do that. This would be more for client sites where you never know what people will upload.
Creating my very first website using a Divi theme. I am brand new at this.
I just found your tutorials, thank you.
Just watched the "Mega Menu" tutorial and creating a button over an image.
I have 3 images, on my home page, which are linked to each of my UA-cam videos.
Even though you can choose for the link to "open in the same page" the link will open a new page and take you to UA-cam.
I also noticed that most of the plugins show that you have to work from a "post" page.
Non of the plugins show how to use an image in your home page.
Do you have a tutorial which shows you how to create a lightbox which will stay in the same page?
Do you have a tutorial showing how to add CSS to an image in you home page?
Thank you in advance for any guidance you can provide.
Kindest Regards,
Louis Krudo
Hi Louis, so it sounds like maybe you want the videos to open in a popup? Is that correct?
@@PeeAyeCreative Thank you for the response and yes to the pop up without leaving the page.
I only have a home page, no post page at the moment, where I have 3 side by side modules with a picture on each one.
Each picture is linked to a UA-cam URL.
When you click on the picture it will open a new tab and open UA-cam.
Is it possible to create a pop up or lightbox which will not require a new window tab to open?
Thank you in advance.
Louis Krudo
Is there a way to just have it use each images ”natural” ratio?
Yes, for that you need my other tutorial for stopping the crop. ua-cam.com/video/ijeTKJdNk7Q/v-deo.html
Did you ever do a video on.. Image Aspect Ratio for the shop Module?
I have not, but I believe that can be set in the Customizer with WooCommerce
@@PeeAyeCreative Yes I know about that function but what do I do in the following case...
1 page with different sections... each section has a Woo Products module with different categories for example.
section 1 - t-shirts (I want 2.3 ratio images)- Portrait
section 2 - shoe (I want 1.1 ratio images) - Square
section 3 - bike (I want 4.3 ratio images) - Landscape
I know there is a fuction in the customizer - uncropped
But I want it to look neat with text and price being in same line.
Is this even possible?
Will this work for a podcast module? (I use the Seriously Simple Podcasting plugin)
This tutorial is about the Blog module, but the same principle could be used in other modules for changing the image aspect ratio. It would be completely different selectors.
Hi, I’m a new blogger, and I’m only just learning about SEO, what size should my images in my blog posts be? My blog content width area is about 650px.
Hi Swid, I'm not an SEO expert so I can't really give good advice on that specifically. Just try to keep the images you upload close to the actual size they will be displayed. If it is a featured image use the size they are displaying in your blog post template.
can you limit this to one post only? so it's not a global change but a case by case basis?
That would be kind of odd to do. You could if you want badly enough, but it would take some customizariom to target one post.
You are the best!
Thanks ;)
How do I find out what the default aspect ratio is?
And what if I'd like to change the aspect ration in the archive pages?
For instance I'm using Extra Divi Theme and I'd like to change the thumbnail aspect raion in a category page. Can I use this method?
Yes, just use the Divi Theme Builder template with the blog module.
Love you Nelson.
:)
hey so all of my featured images are 1200x630. and i don't want them to be cropped when the thumbnail shows. for some reason, divi by default crop my featured images to 1080x630. is there a way to fix that?
Yes, for that, please see the other tutorial about uncropping images: ua-cam.com/video/ijeTKJdNk7Q/v-deo.html
Thank you, but I was hoping to get the information area below it from being different sizes. I've been trying to add some "flex box" shit to no avail.
I think I'm looking at it wrong. I need to limit the "post-comment-inner" via css.
Can you explain what you are trying to do? Are you talking about equal height blog grids?
Hi Nelson, Love your videos, you deserve a million subscribers.
I noticed that different posts all have same height. As at 4:50
I believe this is because their titles and excerpts have the same length.
I tried on my website and found if the length of the titles and excerpts are different, their heights will be different.
Will you please make a tutorial on how fix this? I would like to make them have the same height.
Thanks.
Hi Matt, there are some tricks like setting a min-height on the title, but there are no real solutions to what you describe without it also looking bad. You could set a crazy min-height to cover really long titles, but then it looks silly too. You can however limit the excerpt length in the settings.
hey im not sure this works anymore on the latest version of divi could you explain how to fix?
It definitely works. Just tried it.
@@PeeAyeCreative yes it does I figured it out I put the css on the wrong spot
This works well for the blog loop but what about on a single blog post? The featured image is still being cropped. Is that a different filter?
The lack of control and layout options without hacks and/or 3rd party plugins for the DIVI blog module is extremely frustrating.
On the blog post you should have no issue - be sure to be using the Theme Builder!
@@PeeAyeCreative I haved used that in the past, but it's annoying to have to build out a template just because we can't control the thumbnail size.
Hmm, I guess just for that one reason it would be annoying, but I could name 20 reasons why using the Theme Builder is better.
@@PeeAyeCreative by curiosity, so it is better to create the page separately, then create its template in page builder and assign it to that page ?
This is awesome
Thank you, glad you found it helpful!
I didnt see this in your Divi Blog Module playlist. Want to add it?
Done, thanks! I really need to go back through all of them and do that.
@@PeeAyeCreative You are so wonderfully responsive! Thank you. I am having fun learning Divi and you are helping so much.
The settings button at the bottom of my page settings is taking forever to open and is not saving the code that I'm trying to put into it.
Hi there, sounds like a hosting server issue. Take a look at my full guide here: www.peeayecreative.com/how-to-fix-divi/
Hi
I thought I finally had a solution but my images won't fit. Even with css "cover". In fact Divi goes fetching another image ratio for my original images which has the Pinterest format. So instead of pushing my 2:3 image it's fetching a 3:2 copy of my image and tries to makes it cover my 2/3 space... :-(
Hi Christelle, please check out my other video which sounds more suited for your needs: ua-cam.com/video/ijeTKJdNk7Q/v-deo.html
Pee-Aye Creative is the best and most helpfull
I'm so glad you are enjoying our resources!
When the image propagates onto the page it is not being responsive...it just crops into the middle of the image. So all edges are cut off. What am I doing wrong?
Hi Tammy, are you referring to the default Divi behavior? This tutorial doesn't affect that, but you may be looking for our other tutorial about actually removing the crop: www.peeayecreative.com/how-to-stop-divi-image-crop/
My comment disappeared, where I said if some posts have image and some don't your blog layout would be broken with just CSS solution from video. I found javascript/jQuery fix:
(function($){
$(document).ready(function() {
$('article.et_pb_post').each(function(i, v) {
$(".entry-featured-image-url", this).insertAfter(jQuery(".post-meta", this));
});
});
})(jQuery);
Not sure what you mean but okay
This didn't work for me . Followed instructions directly. maybe a divi update has made this redundant ?
Not sure...should work.
This method crops already cropped image. Doesn't help.
I'm not sure what you mean. If you are trying to remove any crop and have the same aspect ratio as what you uploaded, please see our other tutorial: ua-cam.com/video/ijeTKJdNk7Q/v-deo.html
Why do the Featured images on the Blog Page and on the same featured image on the individual post page have different aspect ratios ? This doesn't make sense
Hey Tom, I'm not sure exactly what you are asking, but I guess because of the way they crop the thumbnail. Not sure though!
no work in blog_list :(
Hi Christian, what do you mean?
the code does not work in blog list, left image and right text, biogenesisanimalhealth.com/inicio/
why would anyone want their pictures to be all different aspects and heights. Some basic design principles as defaults would make divi much better. As it is. All its default options seem to be bad design choices. then to fix them you need to learn how to code. Something as simple as make all pictures in a row the same size. Requires 2 hours of youtube and web searching and still no solution. sigh
Have you checked the other tutorial linked in tutorial? Might solve your problem.
Why don't you copy-paste your css codes above :) This is like torture. And I don't think sb else would steal them to created another hit divi blog aspect ratio video.
That would be horrible formatting. In fact, UA-cam does not even allow carrot braces, so I couldn't. It certainly has nothing to do with anybody stealing it, the code is public on my blog.
@@PeeAyeCreative Thanks for deleting the Whaaat part :) I didn't know UA-cam limitations, my ignorance. I urged you to do so because such codes helped me enormously when inserting a customized upload plugin code, etc. Thanks for your efforts.
You're welcome!
Unfortunately, it does not work for me. I have this problem with the blog module showing different thumbnail sizes in category pages. Still struggling to find an answer.
By default they show consistent sizes, so if they are not for you then there is some problem with Divi and you should contact Elegant Themes support.