My hometown beach photo gallery website

Hi fellow coders, I went to my hometown for a holiday, and I decided to make website about using css grid.
Please help me improve and rate my site. I really appreciate it.
live version: Tofo Beach - Inhambane - Mozambique
code version: GitHub - fretagi/projects-inhambaneBeachs

1 Like

Nice job, and great pictures! Your code is clear and well-organized. I also liked how the site adapts to multiple screen sizes.

As a fun challenge, you might update the grid to include “featured” pictures. By that I mean choosing a few pictures that you want to showcase and have them take up multiple rows and columns in the grid. That would add visual interest to the site by making some pictures larger than others.

2 Likes

Wow I really wish I could visit these beautiful beaches!

1 Like

Thanks a lot for your input, that´s my next challenge… I will do that, as well using thumbnails, to make the page less “heavier”…

very beautifull indeed, you can always come…

Hi
I think you need some kind of Javascript to allow the webpage to pop up the pictures when someone click on it

<button onmouseover"returnImage ()">Image
Not sure this will work
If anyone has any idea’s please correct me

I will be starting the JavaScript module soon…

I was under impression that I can use a thumbnail feature…

I am not quite sure how to implement this:

<a target="_blank" href="big_image.jpg">
  <img src="small_image.jpg">
</a>

there should be something with mouseover

Nice pics! If you go to Chrome Dev Tools - Lighthouse and generate a report it will show the performance of the site. The main performance thing is that images are large in size (mostly over 1 MB ) but only display as small thumb-nails so this slows the loading of the page. You could consider fixing this by having two versions of each image - one small thumbnail and one larger that you display on thumbnail-click.

In order to do the link to larger img I think you should be able to replace you current img-tags with the img-tag wrapped in an anchor-tag (linking to the large image) code that you are asking how to implement. But there are many different ways of achieving this (many using JS and often some JS-library).

1 Like

I will be working on this, thank you for the advise. :thinking:

I have just managed to improve performance using the following code:

<div class="gallery">
            <a target="_blank" href="images/AIOD2212.JPG">
            <img src="images/AIOD2212.JPG" alt="tofo beach" style="width:300px"></a>
        </div>

and my css:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 0.5rem;
  grid-auto-flow: dense;
  padding: 0.7rem;
}

.container,
.gallery,
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

But the gap between the images are huge, and I am struggling to reduce it…

I am not that great on CSS but try to change the anchor tag display property to inline-block so you can control size on it more than inline which I think is default for anchor tag. Then you can control it with width/height properties as needed.