blog teaser resizes and so is not square and uniform

DanielNolan · May 2020

hello

If you take a look at www.refillnation.org you will see I have a news teaser with my blog posts showing. I need to make the 3 blog post images stay the same size no matter what featured image is used within the actual post, how do I do this? Looking at my page now the cat image makes that blog square much shorter than it was previously and much smaller than the others. I need the height to remain.

Pablo · May 2020

Hello,

You have to set the size of featured image size and forge regenerate them.

To change the size of the images used in portfolio/blog, please navigate
to theme options>blog,portfolio&shop>featured image.

Notice!
Remember to use thumbnail regeneration after you make your changes. Otherwise, the images will not change their size.

thanks

DanielNolan · May 2020

Hello, thank you so much for getting back to me. What would you suggest are the best settings for me to use?

Pablo · May 2020

It's hard to say - it depends of the website.

Surely, you should not set really big size - because it will make your website load slower.

Thanks

DanielNolan · May 2020

ok, can you tell me the ideal image size that I can resize featured images to, so they do not make the blog teaser distort? what image size did you use in the demo pages etc? I just want to stop the blog teaser from resizing.

Pablo · May 2020

The most popular size is 960x720, but it depends on your images which are uploaded on your website.

Because, if some of your images will not cross that value (will be smaller than declared size), then while regenerating them, they will stay as they are (they will not change to these dimensions)

They have to be equal or bigger than declared size.

Thanks

DanielNolan · May 2020

p

DanielNolan · May 2020

I apologise if I am being really stupid here. But just to clarify I have put a red box around the issue I am having.

https://imgur.com/a/uY9sYrb

Where the red box is with the text 'this part here' I need the bottom of the large box to be in line with the bottom of the smaller box. I need them to be a fixed size so no matter what featured image my post has I want all the boxes in the blog teaser to be in line with each other. Is this clear?

How do I have all of the boxes STAY in line. sorry to be a pain

:-* :-*

Pablo · May 2020

You will be not able to insert box below that image, it's a whole item "Blog Teaser"

https://themes.muffingroup.com/be/theme/shortcodes/loops/#blog-teaser

To achieve that, you would have to edit the theme files and customize that item or create another one where you will insert that html structure below that image.

Or do you want just make it look like to be like on that page? (https://themes.muffingroup.com/be/theme/shortcodes/loops/#blog-teaser)

Thanks

DanielNolan · May 2020

No I do not want to insert a box below it.... I want the bottom line of the current box to be level with the bottom line of the smaller box at all times. Please look at this new picture. I am trying to keep this very simple.

https://imgur.com/a/O2OvjX4

Pablo · May 2020

Are all of your images size bigger (or equal) to the declared size in theme options>blog,portfolio&shop>featured image ?

Did you use the forge regeneration plugin?

Thanks

DanielNolan · June 2020

Yes they are and yes i did

Pablo · June 2020

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

Pablo · June 2020

Well, the problem was more simple than I through.

You have to select other image, which is more tall than wide, then it will look properly

Thanks

DanielNolan · June 2020

Thanks so much Pablo, you fixed the issue I was having which is awesome. However, I just made the page full width using css and now I have the issue again! haha! why is this!

Pablo · June 2020

I commented out that CSS code and it works.

You shouldn't do that kind of codes because fitting these images is managed by the JS script too, and it get lost while changing grid with with css code.

You can use the "Full Width" option for section with that item, but we suggest not to do it, because you will have to upload really huge image and it would be problematic too.

This item was made for limited grid purpose

Thanks

DanielNolan · June 2020

Hello, I definitely want it to be full width. I do not mind having very large images. Where is the full width option?

DanielNolan · June 2020

hello Pablo? I really need to know how to achieve this

Pablo · June 2020

It's in the section settings, on the bottom of them:

https://prnt.sc/t6vx27

But surely, it will not be the same height as like right now.

As I said earlier: This item was made for limited grid purposes.

thanks

DanielNolan · June 2020

what do you mean by limited grid purposes? I will try to make this work if I can

Bryan · June 2020

I have no clue either. When you enabled full width did you achieve what you wanted?

thanks

DanielNolan · June 2020

Hi Bryan, No I didn't The grid images now look great when in a page layout with sidebars, but when I go full screen, (which was always the intention), the squares are again not aligned the way they should be.

On a side note is there any way I can message you directly, or message somebody in charge? Just because I have had a lot of issues with customer service and one person in particular who has pretty much rendered the 6 months support I should have got pointless.

Pablo · June 2020

By limited grid purpose - I mean by disabling the "Full Width" option for section with that element.

This item apply the height and width of the elements when the page is loaded and the problem start to appear on bigger screens, because images won't end in the same location.

You would have to apply a really big image instead, but then the problem will appear on the smaller desktop screen.

Please, do not use this item with the section's full-width option.

When you disable that functionality, blog teaser item will fit in the grid you set in the Theme Options > Global > General

https://prnt.sc/t8bj43

thanks

blog teaser resizes and so is not square and uniform

Comments