My First Project
Published in

My First Project

Gallery with inner galleries.

In previous story I created App, index and explained why I used my Router component instead of React Router. Building of Header was simple importing bootstrap properties like: container, row, col, navbar with toggle and installing React Icons(for Facebook and Instagram icons). It was functional component with one job - to take the user to chosen component. From .js side it was pretty self explanatory, but from .css side I put some more work in @media queries to make title as big as it could be in each screen width, and position it equal the rest of the navigation links( or nav menu after break down). On the end just some color on links when the user hovers on it.

So with Header done, I’ve moved to Gallery and here I stumble upon, one of my first problems. How to import all folders with photos, and pass them further? In Gallery itself I just imported one photo from each folder to set as link to this folder, but this approach won’t work in InnerGallery because folders have 30+ photos. After some digging on the Internet, Stackoverflow came to my rescue. Using Webpack with this function

function importAll(r) {let pic = [];r.keys().map((item) => {return (pic[item.replace("./", "")] = r(item));});return pic;}

and

const picturesJess = importAll(require.context("../assets/piotr jessica", false, /\.(jpg|JPG)$/));

I could assign each folder to one variable, but I only needed path of each photo, to acquire it, I used this function

function picSrc(p) {let pics = [];Object.entries(p).forEach(([key, value]) => pics.push(value.default));return pics;}

The only thing left was to assign those variables to state and pass it as props to InnerGallery component. I did it in App.js.

Here was my second problem, to create completely reusable component with all photos showed in rows and with option to zoom clicked image.

That is the component I’m most proud of. I could call it with two props, variable containing path of photos and simple string with names of couple. As you can see with use of useState hook, and map array helper I render all photos. Thanks to bootstrap Modal and Carousel, I’ve build window showing clicked pic with option to show next or previous.

Those components gave me easy way to create as many different inner galleries as I want, just create variable, pass it in props with names and write path to show this component. But that is only one side, about CSS side of InnerGallery.js I’m going to write in next story, because I still have an unsolved problem there.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store