I am new to coding so please bear with me -
I am trying to create a dynamic gallery display, in which all the images will be taken from the database and should render in the overall layout as below.
Expected Result
I am unable to make it render in this manner instead it shows second image on repeat for 3rd image position.
Current Result
Attaching the code below which I currently have, any feedback/suggestion would be of great help to me. Thanks in advance.
Data:-
const GALLERY = [
{
qty:1, img_path:`${AMAZON_URL}/Gallery/1.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/2.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/3.jpg`,
},
{
qty:1, img_path:`${AMAZON_URL}/Gallery/4.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/5.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/6.jpg`,
},
]
{GALLERY.map((item, index) => (
<>
{item.qty === 1?
<Grid item xs="6" my="2" key={index}>
<img className="W100" src={item.img_path} />
</Grid>
:
<Grid item xs="6" my="2" key={index}>
<img className="W100" src={item.img_path} />
<img className="W100" src={item.img_path} />
</Grid>
}
</>
))}
Depending on image sizes you would have more success ditching the col and having the images modified inside the Grid with CSS. If the images are appropriately sized something like this could work.
<Grid>
{GALLERY.map((item, index) => (
<img className="W100" src={item.img_path} />
))}
</Grid>
img {
width:50%;
float:left;
}
Related
I'm using light gallery for the image viewer. The problem here is when i have multiple images all those are stacked in rows with 2 images in a row and i have 10 rows for 20 images. So i'm trying to integrate a custom carousel in the light gallery with which i'll have one row of images and a slider.
Both work individually well but couldn't integrate. Also wanted to know if the light gallery has an slider inbuilt.
//Light gallery code:
<LightGallery speed={100} download={true} plugins={[lgThumbnail]} mode="lg-fade" >
{
abc.xyz.attachments.map((item: any) => {
let fileName = item.split('/').pop();
return (
<a
data-lg-size="1400-933"
className="gallery-item"
data-src={item}
data-sub-html={"<h4>" + fileName + "</h4>"}
>
<img style={{ margin: '10px' }}
className="img-responsive"
src={item} width={240} height={160}
/>
</a>
)
})
}
</LightGallery>
//Carousel Code:
<Carousel items={abc.xyz.attachments} />
Any help?
I am confused in setting custom preview as like
image set in grid
I want to do this in react-dropzone-uploader custom preview, where I can upload multiple files.
Current scenario: my normal uploaded images
Code snippet:
const Preview = ({ meta }: IPreviewProps) => {
const { name, percent, status, previewUrl } = meta ;
return (
<Grid item xs={6}>
<div className="preview-box">
<img src={previewUrl} /> <span className="name">{name}</span> - <span className="status">{status}</span>{status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
</div>
</Grid>
)
}
<Dropzone
getUploadParams={getUploadParams}
onSubmit={handleSubmit}
PreviewComponent={Preview}
inputContent="Drop Files"
/>
I am using MUI V4
We don't have any index for images, how can I set images in grid view of 2-2 images using material UI?
You need to wrap the Grid items inside the Grid container.
Please have a look at the guide. https://mui.com/components/grid/
// Parent PreviewContainer.js
...
<Grid container spacing={2}>
{
images.map((image, i) => (
<PreviewItem key={i} meta={meta} />
))
}
</Grid>
...
// Child PreviewItem.js
...
<Grid item xs={4}>
// You can update the item size as you expect, but it seems like it should be 4 regarding the image attached
// Your preview component
</Grid>
...
I am trying to add a carousel for my products.
I have an array of url images in product.images that i want to show individually in the carousel but when i map them like this:
<AliceCarousel autoPlay autoPlayInterval="1500">
{[product.images].map((x) => (
<img src={x} alt={x} className="medium" />
))}
</AliceCarousel>
they do not show individually but all at once like so:
How would you map so as to get each url in the array individually to be shown within the carousel? Thanks
Probably OP resolved this by now, but if you have the responsive object then you can specify when to show how many elements you would like.
const responsive = {
2000: {
items: 10,
},
1200: {
items: 5,
},
800: {
items: 3,
},
0: {
items: 1,
},
};
<AliceCarousel responsive={responsive} autoPlay autoPlayInterval="1500">
{[product.images].map((x) => (
<img src={x} alt={x} className="medium" />
))}
</AliceCarousel>
In this scenario there would be 1 item from 0px width screen to 799px
Source: https://github.com/maxmarinich/react-alice-carousel
EDIT: i added the loop code.
Other variables are working fine, so the connection between Contentful and the data layer of my app is not the problem.
I can see the image asset variable including it's src in GraphiQL tool, but in my code it seems to be null. The way i understand GraphiQL, is that it queries a local data layer, so the variables are coming from Contentful just fine. This is a simplified query that i use.
This CardMedia component is in a mapping function, but the JS in that cannot be the problem because everything else works just fine, except the images.
const posts = get(this, 'props.data.allContentfulBlog.edges')
{posts.map(({ node }) => {
return (
<Grid key={node.slug}>
<Card>
<CardMedia
image={node.mainImg.responsiveResolution.src}
title={node.mainTitle}
/>
<CardContent>
<Typography variant="headline" component="div">
{node.mainTitle}
</Typography>
<Typography component="div">
<p
dangerouslySetInnerHTML={{
__html: node.mainText.childMarkdownRemark.excerpt,
}}
/>
</Typography>
</CardContent>
<CardActions>
<Button href={node.slug}>
<span>Read more</span>
</Button>
</CardActions>
</Card>
</Grid>
)
})}
From my understanding to your GQL app, this will be the key to your edges array, which I am supposing you are using it as posts.
const posts = allContentfulBlog.edges
or maybe const posts = this.props.allContentfulBlog.edges
Thus:
we will be using that to loop on our objects inside the posts array.
posts.map((post) => {
return /* Grid */
})
if you have this already, can you please provide a code snapshot to your component where you are performing this loop.
UPDATED:
looking at the results image, there seems like one of the nodes does not have a mainImg. thus, we will use a default image link in this case.
in your render() method add this:
const defaultImage =linkToYourDefaultImage;
in your loop:
{posts.map(({ node }) => {
return (
<Grid key={node.slug}>
<Card>
<CardMedia
image={node.mainImg ? node.main.responsiveResolution.src : defaultImage}
title={node.mainTitle}
/>
......the rest of your code.............
</Grid>
)
})}
changes has been made to CardMedia component, in image prop, we have examined whether the value of node.mainImg if null or not, and return the proper value such like !null ? image : defaultImage
I am using react-motion to loop through a bunch of images. I'm trying to make the background change programmatically after a certain amount of time.
The component render should be something like this. Motion and spring are from 'react-motion' package. Checkout the code for the photo demo for more details.
<Motion style={{height: spring(currHeight), width: spring(currWidth)}}>
{container =>
<div className="demo4-inner" style={container}>
{configs.map((style, i) =>
<Motion key={i} style={style}>
{style =>
<img className="demo4-photo" src={`./${i}.jpg`} style={style} />
}
</Motion>
)}
</div>
}
</Motion>