search

konstantinmuenster / gatsby-theme-portfolio-minimal

A Gatsby Theme to create modern one-page portfolios with a clean yet expressive design.
MIT License
161 stars 90 forks source link

In ProjectsSection, how do I add images without them being downscaled in resolution? #41

Closed JaanLavaerts closed 1 year ago

JaanLavaerts commented 1 year ago

When I add a image to the src in projects.json, it displays a very small .webp version of my full HD png image. Only the preexisting images get displayed right.

konstantinmuenster commented 1 year ago

Hey @JaanLavaerts!

Images get indeed downscaled to improve the performance. But usually you should not see a big difference.

Could you share a screenshot (or repository link) of the problem?

JaanLavaerts commented 1 year ago

@konstantinmuenster thanks for your answer! I honestly just want to display the image alot bigger and if possible without the background and border/shadow so its more readable. This is how it looks: image

This is the original image: https://user-images.githubusercontent.com/71444090/239243060-81638da9-c99d-43a8-aa58-5e05919ce452.png

konstantinmuenster commented 1 year ago

Sorry for my late reply @JaanLavaerts! You could try overwriting/shadowing the CSS file that is responsible for styling the project item. You find it here: https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/blob/main/gatsby-theme-portfolio-minimal/src/components/Project/style.module.css

There is a guide from Gatsby that explains how shadowing works: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/

Otherwise, you could try tweaking the image so it better fits the frame/container. Since it is hard to find a solution for all possible images, I don't think I will adjust the actual image implementation.