PDA

View Full Version : Code for image gallery - Hexagons



Solfe
2021-May-08, 02:53 PM
I found a snippet of html code for creating thumbnail images for photos. It takes a 4 sided poligonal image and turns it into a hexagon preview.


-webkit-clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);
clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);

It seems that it takes an image 200 px by 200 px and clips off a percentage of the image to create hexes by defining the location of the vertices. It's not perfect, but I like it. Is there a definition of a hexagon or a way to calculate a hexagon in terms of the percent deviation of vertices from a rectangle or square?

I tried to post a picture here, but the board wouldn't let me. Here is an example post of the results: https://www.theseoldgames.com/2021/05/a-wing-test-two-coding-crazy.html

profloater
2021-May-08, 03:45 PM
I found a snippet of html code for creating thumbnail images for photos. It takes a 4 sided poligonal image and turns it into a hexagon preview.


-webkit-clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);
clip-path: polygon(50% 0%, 100% 27%, 100% 76%, 50% 100%, 0 76%, 0 27%);

It seems that it takes an image 200 px by 200 px and clips off a percentage of the image to create hexes by defining the location of the vertices. It's not perfect, but I like it. Is there a definition of a hexagon or a way to calculate a hexagon in terms of the percent deviation of vertices from a rectangle or square?

I tried to post a picture here, but the board wouldn't let me. Here is an example post of the results: https://www.theseoldgames.com/2021/05/a-wing-test-two-coding-crazy.html

From my limited knowledge, the path of this CSS trick is indeed vertices so if you start with a square you would expect the y axis shift to 25% as in a 1 2 root 3 triangle. So by using 27% and 76% it is not a perfect hexagon.
So , the first point in your example is half way across the target image and at the top of it. (50% 0%) and so on.
If the image starts as a rectangle, the hex will be stretched. If you know the ratio you could make the numbers come right
As in polygon 50% 0%, 86% 25%, 86% 75%, 50% 100%, 14% 75%, 14% 25%
That would clip the x axis both sides leaving the y axis full sized. You would need to know the rectangle to get the % correct.
I believe you need webkit- clip-path to make it work across browsers.
But you need an expert, I would not dare because of things like mobile phone versions.

Solfe
2021-May-09, 04:22 AM
From my limited knowledge, the path of this CSS trick is indeed vertices so if you start with a square you would expect the y axis shift to 25% as in a 1 2 root 3 triangle. So by using 27% and 76% it is not a perfect hexagon.
So , the first point in your example is half way across the target image and at the top of it. (50% 0%) and so on.
If the image starts as a rectangle, the hex will be stretched. If you know the ratio you could make the numbers come right
As in polygon 50% 0%, 86% 25%, 86% 75%, 50% 100%, 14% 75%, 14% 25%
That would clip the x axis both sides leaving the y axis full sized. You would need to know the rectangle to get the % correct.
I believe you need webkit- clip-path to make it work across browsers.
But you need an expert, I would not dare because of things like mobile phone versions.

Thanks! That worked with a bit of offset tweaking. It totally doesn't work on a mobile device.

profloater
2021-May-09, 04:46 AM
Thanks! That worked with a bit of offset tweaking. It totally doesn't work on a mobile device.

Yes it is a pain sometimes. I have three commercial websites and my son does nearly all, I got left behind. But i forget the percentage of mobile phone viewers, more than half, so many nice website designs just won’t work and then there are the hacks. Anyway, good luck with that, it is a nice effect.

Solfe
2021-May-09, 02:54 PM
I'm not sure how to make this mobile compliant. I have a couple of ideas but nothing solid. I managed to get everything down correctly for horizontally touching images but still have about a 1 px space vertically. It looks much nicer now.

26156

It turns out that when I started this, I had some .css that was placing a border around images. That's where that weird 76% and 27% came from... probably.

Solfe
2021-May-09, 02:59 PM
Only a sixth of my readers on mobile and I have a feeling that many of them are just me checking my posts to see if they look right. I'll have to figure that out, too.

profloater
2021-May-09, 03:49 PM
Only a sixth of my readers on mobile and I have a feeling that many of them are just me checking my posts to see if they look right. I'll have to figure that out, too.

I think you can make the polygon do lots of irregular polygons, like for example an arrow shape, just work out the x and y percentages for each vertex. No curves though! So triangle easy. The last vertex joins a line to the first. Neat macro!

profloater
2021-May-09, 03:53 PM
Only a sixth of my readers on mobile and I have a feeling that many of them are just me checking my posts to see if they look right. I'll have to figure that out, too.

We had to use a server with some technical staff to solve mobiles plus the anti hacking security which we pay for. With our previous, cheaper but well known server we woke up with porn all over our site. We had to start over. Of course we had our text and images but is still took time to redo on a better platform. Also some of the fancy flash stuff just slows right down for some browsers.

Solfe
2021-May-10, 04:40 AM
We had to use a server with some technical staff to solve mobiles plus the anti hacking security which we pay for. With our previous, cheaper but well known server we woke up with porn all over our site. We had to start over. Of course we had our text and images but is still took time to redo on a better platform. Also some of the fancy flash stuff just slows right down for some browsers.

Can you share the website? Or PM me with it?