Results 1 to 9 of 9

Thread: Code for image gallery - Hexagons

  1. #1
    Join Date
    Feb 2003
    Location
    Depew, NY
    Posts
    12,629

    Code for image gallery - Hexagons

    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.

    Code:
     -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/0...ing-crazy.html
    Solfe

  2. #2
    Join Date
    Apr 2011
    Location
    Norfolk UK and some of me is in Northern France
    Posts
    9,919
    Quote Originally Posted by Solfe View Post
    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.

    Code:
     -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/0...ing-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.
    sicut vis videre esto
    When we realize that patterns don't exist in the universe, they are a template that we hold to the universe to make sense of it, it all makes a lot more sense.
    Originally Posted by Ken G

  3. #3
    Join Date
    Feb 2003
    Location
    Depew, NY
    Posts
    12,629
    Quote Originally Posted by profloater View Post
    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.
    Solfe

  4. #4
    Join Date
    Apr 2011
    Location
    Norfolk UK and some of me is in Northern France
    Posts
    9,919
    Quote Originally Posted by Solfe View Post
    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.
    sicut vis videre esto
    When we realize that patterns don't exist in the universe, they are a template that we hold to the universe to make sense of it, it all makes a lot more sense.
    Originally Posted by Ken G

  5. #5
    Join Date
    Feb 2003
    Location
    Depew, NY
    Posts
    12,629
    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.

    Click image for larger version. 

Name:	hex%u00252Bgrid.png 
Views:	35 
Size:	206.8 KB 
ID:	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

  6. #6
    Join Date
    Feb 2003
    Location
    Depew, NY
    Posts
    12,629
    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.
    Solfe

  7. #7
    Join Date
    Apr 2011
    Location
    Norfolk UK and some of me is in Northern France
    Posts
    9,919
    Quote Originally Posted by Solfe View Post
    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!
    sicut vis videre esto
    When we realize that patterns don't exist in the universe, they are a template that we hold to the universe to make sense of it, it all makes a lot more sense.
    Originally Posted by Ken G

  8. #8
    Join Date
    Apr 2011
    Location
    Norfolk UK and some of me is in Northern France
    Posts
    9,919
    Quote Originally Posted by Solfe View Post
    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.
    sicut vis videre esto
    When we realize that patterns don't exist in the universe, they are a template that we hold to the universe to make sense of it, it all makes a lot more sense.
    Originally Posted by Ken G

  9. #9
    Join Date
    Feb 2003
    Location
    Depew, NY
    Posts
    12,629
    Quote Originally Posted by profloater View Post
    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?
    Solfe

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •