Blocs 5.0.2 Released

Hi @norm

No problem, I will send this over shortly. But if you try adding an image to feature column (no padding) - full widith, no gutter - you will see it no longer goes to full 50% of the screen, it makes the image small - well on mine it don’t work!

I will fire this over now in Blocs 4 (I will do a new one to show)

@Norm - just sent you this on a DM, thank you.

Interesting @AdieJAM

I couldn’t replicate your issue

1 Like

Very strange !!! Mine don’t do that! Just sent you the file that I did for Norm and a pic of what I am getting which is as below:

Blocs-2

@Norm Adrians issue is caused by the image size attributes you have added. If the image was scaling up before, it’s not now, remove the size attributes and it displays as it should. I think in my test prior, my image was a lot larger than Adrian is using here, so it wasn’t evident.

@AdieJAM Probably use a larger image if you are going full screen width like that.

1 Like

I have always done the images on this at 2000 x 1500 and done several sites like this.

@Norm is there a simple way to have this work like it used to?

Could this be whats been throwing @WeatherguyNH with his images too?

When setting image dimension attributes for both width & height, from memory I recall you also need max-width:100% + height: auto to maintain the image apect ratio.

1 Like

Yeah I usually do that in the class manager. Or will set the width to 100% and max-width to the max I want for the other way around.

Should add in this case, it’s setting the min-width to 100%. The attributes are smaller than the container.

2 Likes

Thanks @PeteSharp & @webdeersign

That has solved the problem!.

In Blocs 4 this would automatically do this, but now guessing its a Manual thing in Blocs 5. As long as I know, this is cool.

@Norm : For general users and myself, I would like it if this could get back to how it was in Blocs 4, as the Bloc in the menu now requires a class to make it work.

Thanks all…i’m back on track!

Norm just recently added size attributes to images for improved Lighthouse ranking. So it wasn’t automatic, it just didn’t have the attributes before :wink:

2 Likes

Yes, but Lighthouse PageSpeed will now flag your images unless you define the width and height of each image, but then unless you add max-width:100% + height: auto, your images can distort. The solution is to add both.

Browsers perform better when the dimensions of every image is defined, otherwise browsers have to download each image before figuring out how to build the page layout.

This is a great new auto feature and a genuine contribution to Blocs5 building faster and better web sites.

2 Likes

Google now puts a cross against sites that don’t apply image width and height attributes in the HTML, hence the recent change. I am planning on refining this some more in the next beta, but it’s unlikely it’ll go backwards, unfortunately web tech is always moving forwards.

What I will do is put together a few knowledge base posts that should be helpful.

You can always apply your own width and height attributes for the images to prevent Blocs adding them using the custom data attribute features.

2 Likes

Hey @Norm - thanks for coming back to me.

As long as I know - this this is fine, a simple class like the others have posted before has solved this.

Just something I have done over 50+ times to now change - puzzled me !

Thank you.

1 Like

Yeah I was only recently made aware of this requirement from Google.

2 Likes

I’ve just added that class to the library manager and noticed new classes are no longer being added in alphabetical order.

Screenshot 2022-12-13 at 11.33.36

Curiously as I opened Blocs it told me there was an update for 5.0.3, which I installed, however Blocs still says 5.0.2 in the about screen.

1 Like

its build (503) version 5.0.2.

Thats fixed up and ready for 5.0.3 beta 1.

1 Like

@Norm It’s not that important, but it would be good to be able to rearrange the created swatches in the Swatch Manager later on.

It’s such a shifting goal post aye. Never ending.

1 Like

yeah this has been requested a lot, its coming next year.

2 Likes

Is this the same for Landscape and Portrait?
or do we add
Landscape Example: add max-width:100% + height: auto
Portrait Example: add max-height:100% + width: auto