No option for setting the height of images about react-fb-image-grid

[ManalLiaquat]

@ManalLiaquat We can't provide the height explicitly because we want the picture's height to be same as width to show them equal in height and width. This issue has been resolved in the version 0.1.3, Checkout this PR #6.
Closing this issue. Feel free to reopen if you still find the issue in 0.1.3

@kashifsulaiman I am still having trouble in UI, using latest version=0.1.3. Here is the screenshot

and using like this: <FacebookImage images={post.images} countFrom={5} width={35} fromRight={100} /> using width={35} because it is not get set with the card at width={100}. I think it is due to that you are using position: absolute in the CSS file.

[kashifsulaiman]

@ManalLiaquat
Yes this is because of position absolute because we don't want our images to be dependent on parent's height.
For your issue, Wrap the FbImageLibrary component with a div, provide it the same height as the same you provided width to the component. e.g.

        <div style={{height: '50vw'}}>
          <FbImageLibrary images={images} width={50}/>
        </div>

        <div style={{height: '80vw'}}>
          <FbImageLibrary images={images} width={80}/>
        </div>

[ManalLiaquat]

I uses this technique also, but did'nt work 🤔

@ManalLiaquat
Yes this is because of position absolute because we don't want our images to be dependent on parent's height.
For your issue, Wrap the FbImageLibrary component with a div, provide it the same height as the same you provided width to the component. e.g.

        <div style={{height: '50vw'}}>
          <FbImageLibrary images={images} width={50}/>
        </div>

        <div style={{height: '80vw'}}>
          <FbImageLibrary images={images} width={80}/>
        </div>

@kashifsulaiman I use this technique but didn't work for both devices (PC and mobile).

CODE:
<div style={{ height: "34vw" }}><FacebookImage images={post.images} width={34} align="left" /></div>

PC Screenshot:

Mobile Screenshot:

Now the mobile view is getting unpleasant. 🙄

[kashifsulaiman]

Yes this is because 'vw' is 'view-width'. You've set '34vw' for the web, not for mobile. So for mobile, put another value. You've to make the conditional expression.
Like wise, detect if mobile then '100vw' else '34vw'.

[kashifsulaiman]

@ManalLiaquat Fixed these bugs in v0.1.4
PR: #8

[kashifsulaiman]

@ManalLiaquat Thanks for reporting, will fix it soon!

[kashifsulaiman]

@ManalLiaquat We can't provide the height explicitly because we want the picture's height to be same as width to show them equal in height and width. This issue has been resolved in the version 0.1.3, Checkout this PR #6.
Closing this issue. Feel free to reopen if you still find the issue in 0.1.3

[ManalLiaquat]

Yes this is because 'vw' is 'view-width'. You've set '37vw' for the web, not for mobile. So for mobile, put another value. You've to make the conditional expression.
Like wise, detect if mobile then '100vw' else '37vw'.

I am also thinking about this conditional expression but I did'nt do that because this Library is using react_bootstrap so it should be responsive. 😉🤗

[kashifsulaiman]

@ManalLiaquat which library are you using for these cards? Let me know so I could test on these!

[ManalLiaquat]

@ManalLiaquat which library are you using for these cards? Let me know so I could test on these!

Material-UI

[ManalLiaquat]

@ManalLiaquat Fixed these bugs in v0.1.4
PR: #8

Thank you to fix this issue, this library is working now correctly on both; mobile and desktop devices.