Blocs for Mac V5.2.1 Beta Build 3

Blocs Beta
18

I’ve taken a look at your project (thanks for sending that). Rather than send a direct message response, I thought I’d post here incase it helps others who may run into the same issue.

The issue is caused by the image size tag automated feature in Blocs, which you can disable, but is recommended for better Google page speed scores.

Basically the image has a max width of 265 which is applied by the automation feature I mention above. When you go to a lower breakpoint the layout reflows, giving the image more space, however the image will not fill the bigger space as it’s width tag is 265.

There is a scale option (in the image settings in the sidebar inspector) that can be enabled to address this type of layout issue.

CleanShot 2024-01-23 at 13.53.05@2x
CleanShot 2024-01-23 at 13.53.05@2x706×394 70.1 KB

Selecting the proportionally scale up and down option will allow the image to scale up and down based on available space, rather than only down from 265.

19

The image is 600px wide. Why would it have a maximum width of 265px? There should be more than enough to fill the card at any breakpoint.

20

I hear you. I only pointed this out for anyone that found themselves in this situation, but I agree this shouldn’t be so. Perhaps @Norm will correct this on the next build.

21

I have this improved ready for tomorrows beta.

22

The image file may be 600px wide, but the html image element has a width attribute of 265, which is generated by Blocs to help your page speed score.

23

In this case that evidently isn’t working properly then if it restricts the image from filling the card width and mirror what we see in Blocs.

24

These additional html tags are generated after you export and don’t effect in app design or preview mode, but they can be turned off or you can use the scaling option I mentioned.

Note, the reason you don’t see them in preview mode is because scanning all image tags in a site and applying the width and height tags slows down preview speeds.

It’s also worth noting that you can add your own width and height tag attributes using the custom attribute. The size fields in the inspector when an image is selected apply width and height dimension as css, so they can be edited per breakpoint.

25

If I look in Blocs at SM it is applying dimensions of 535x305 and then 279x159 at XS. Could Blocs not use those figures on export? At the moment it is using 265 at every breakpoint.

Alternatively could media queries between 768px - 0px help. Something along these lines:

html:

<div class="image-container">
    <img src="img/car-mot.jpg" class="img-fluid mx-auto d-block" alt="placeholder image" width="600" height="342">
</div>

CSS:

/* Container to maintain aspect ratio */
.image-container {
    position: relative;
    width: 100%;
    padding-top: 57%; /* Example for an aspect ratio of 16:9 (9 / 16 = 0.5625 or 56.25%) */
}

.img-fluid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .img-fluid {
        /* Additional mobile specific styles if needed */
    }
}

Maybe something like this in the CSS:

.card img.img-fluid {
    width: 100% !important;
    height: auto !important;
}
26

A different point but I am frequently seeing blank previews with this build, but going back to edit and then preview fixes it.

Screenshot 2024-01-23 at 17.29.00
Screenshot 2024-01-23 at 17.29.004064×3070 209 KB

27

Just turn on the image feature that I mentioned a few times now. It basically enables what you need using css on a per image basis.

28

Yeah I also got this with your project never seen it before so I’ll take a look at that.

29

I get that periodically. Going back to the canvas and then preview again resolves it.

I just put it down to some unfinished business happening in Blocs :joy:. It seems to happen more in larger projects.

30

Using a CMS? Usually happens with .php pages?

31

That project has no CMS. It’s also happening in another project with Volt, so I think this is down to Blocs.

32

I could be wrong, but is it not down to the php server not starting? – See thread here: Volt CMS preview in Blocs - #18 by Brocky120

1 Like
33

I think Norm is best placed to examine this since it is also happening with projects that have no CMS. It seems to have kicked off with this beta though as far as I can tell.

1 Like
34

Yeah could be php server.

35

I’ve got this fixed up and ready for tomorrow’s beta.

1 Like
36

This is fixed up in beta build 4.

1 Like