display post images in carousel

[KevinTriplett]

There's enough difference between the first version and this that I created a new branch. See if this is what you were hoping for and how it can be improved.

BTW, for posts with multiple images, I tried coding the carousel to display the image clicked as the initialImage but the library apparently has a bug, or I'm not doing it right. I'll try to add this if I can figure out what I'm doing wrong.

[UPDATE: the clicked image is now the one that is initially displayed]

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 47.81%. Comparing base (6ecaf5d) to head (8fbceaa).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## dev #1623 +/- ## ========================================== + Coverage 47.73% 47.81% +0.08% ========================================== Files 569 570 +1 Lines 13448 13462 +14 Branches 3867 3870 +3 ========================================== + Hits 6419 6437 +18 + Misses 7029 7025 -4 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[KevinTriplett]

@tibetsprague okay, I figured out how to show the image clicked as the first image.

Two things:

1) I had to turn off infinite scrolling in order to pass tests bc slick slider creates clones of the slides in order to do the infinite scrolling. If this is an issue, let me know and I'll find another way to code the tests. No big deal.

2) Are you okay with the adaptive height? It means the arrows jump around vertically, which might be annoying. But w/o adaptive height, large height images will of course cause white space above and below for shorter images.

[KevinTriplett]

@tibetsprague: I've updated the carousel:

• infinite scrolling back ftw w/tests
• slightly larger arrows
• consistent arrow positions on screen

[tibetsprague]

this is so close to ready! the only issue im seeing now is that if the images are much longer than they are wide then they extend beyond the bottom of the screen. this is hard to solve. i tried adding a max-height: 75vh to the images in the carousel but then with the slider's width: 100% the images look stretched. so i tried adding width: auto !important; to the images. this works but then the images can bleed into each other so you see the edge of one while looking at the next. also with a max height but flexible width then the image can be too wide and go past the edge of the slider. This is very hard to fix. this might require using javacript to check whether the image is wider than it is tall in which case you width: 100% and height: auto (like it is now), or if the image is taller than it is wide then use height: 75vh and width: auto? or maybe we need to wrap the images in div which has a fixed width too to make sure every slide is the same width? tricky tricky.

[tibetsprague]

fixed it with the help of chat GPT! going to merge this