Abalone ID - bootstrap cards

[mspector13]

Hey @bbest,

I've been playing around with bootstrap cards; css is beyond clunky, but I think I've made some progress.

Rather than create an "Abalone ID Key", we can instead use Oriana Poindexter's already-made ID cards! Oriana is a collaborator on this project, and should be in the process of making ID cards for all seven species (currently she has made cards for white and black abalone).

To try and utilize her cards, I've been working in ab_cards.Rmd to mess with layout etc. Here's what I've got so far:

Right now there's still a lot of functionality to build in and play with, but I think I'm up against a wall at this point. For example, it would be great to be able to access each card as a pop-up modal, yet I can't seem to figure out how to make that happen.

Let me know what you think!

[bbest]

There's going to be up to 7 cards, 1 per species.

Want:

• [x] 1. smaller, simpler card image
• [x] 2. titles as text (vs image)
• [ ] 3. Source as a small font link (not a button) at bottom of all cards
• [x] 4. Buttons to view or download
• [ ] 5. click to full res image as modal, like most imagery galleries
• [x] 6. download full page as a printable PDF

References:

• 11 Bootstrap Galleries

[bbest]

Hey @mspector13,

I learned a lot about using Bootstrap Cards recently with Sanctsound. Check out this bs4 branch:

• index.Rmd Include HTML without having to do the dedent nonsense so rmarkdown::render() doesn't interpret as a verbatim code:

  htmltools::includeHTML("_cards.html")

• _cards.html Heres's a simpler form without some of the extra custom classes I made for SanctSound:

  <div class="card-columns">
  
  <div class="card card-img-wrap">
  <a href="./id-cards/white-abalone.pdf" class="stretched-link">
    <img src  ="./images/ab-card_white.png" class="card-img">
  </a>
  <div class="card-img-overlay d-flex">
    <h4 class="card-title align-self-center mx-auto">
      White Abalone
    </h4>
  </div>
  </div>
  ...
  </div>

  Notes:

  • Class stretched-link spans the clickability of the link to the whole card.

[mspector13]

Right on, thanks @bbest! I checked 4 out of 6 boxes above after shamelessly adapting this boostrapious gallery example. HTML isn't so scary after all! check out ab_id_cards.Rmd and/or the newly revamped ID card section.

I also really like how you sourced _cards.html in index.Rmd, it really makes HTML easier to work with, so I did the same (_abcards.html)

However, there's one.... very bizarre issue that I can't wrap my head around. The buttons under each card open the corresponding PDF in a new tab. However, go ahead and click on the green abalone image on the top of the card... and then click on literally any of the others (aside from black abalone). You'll see what I mean. Any ideas?

[mspector13]

Actually @bbest I'm really unsatisfied with how the "download" button looks. They scale with the window's width... but strangly:

A more narrow view:

I think this is partly how the cards are called ("column") and auto-scaling in the HTML. What do you think?

[bbest]

Looking good @mspector13!

Here's how this is working (with canonical links to capture snapshot now vs changes later):

• source Rmd with shared navigation: ab_id_cards.Rmd
  • includes html with bootstrap cards: _abcards.html
• renders to: ab_id_cards.html
  • found online at findinghal.org/ab_id_cards.html

Here are a few opinionated suggestions (feel free to disregard):

• [x] drop all prefixes with ab* since the site is already clearly about abalone. I personally like one word files:
  • [x] ab_id_cards.Rmd|html -> cards.Rmd|html
  • [x] _abcards.html -> _cards.html
  • [x] abmap.Rmd|html -> map.Rmd|html
• [ ] change to a true Bootstrap button and keep the helpful background color denoting which species, vs what now looks more like a toggle Bootstrap Toggle (scroll down to Custom Style):

[mspector13]

Right on, thanks Ben! I changed the file names to exclude "ab", "ID" etc, hopefully the repo looks cleaner.

I also futzed around the html to deal with card-image sizing issues, and I think it looks a lot cleaner. Unfortunately the HTML is a little sloppier; I changed each card's dimensions instead of wrapping it all in a card-deck container due to resizing issues.

Stylistically I prefer this "hybrid" button design as opposed to standard Bootstrap buttons, but I'm open to suggestions.

However, there's still really funky error going on with the card images.

To recap: nothing happens if you click on the black abalone image (nothing should happen). But, if you click on the green abalone image (for example) the black abalone ID card opens! And iteratively down the line (clicking on red opens pink, clicking on white opens red). I have no idea what's going on here... the HTML is all in _cards.html. Any ideas??

[bbest]

<a> funk

Looks like that behavior was an artifact of improperly closing the <a> tag:

funky:

<a href = "./images/ID_cards/ID Guide_Black_05172021.pdf" target="_blank" </a>

correct:

<a href = "./images/ID_cards/ID Guide_Black_05172021.pdf" target="_blank"></a>

class="stretched-link"

You can force the link to span the card with class="stretched-link":

<a href = "./images/ID_cards/ID Guide_Black_05172021.pdf" target="_blank" class="stretched-link"></a>

pmap each card

Since each card has a similar form, I took the liberty of making a new _card.html template per card that can then get substituted with values using knitr::knit_expand(). Then we can setup a csv to have all our unique values and feed it into a function with purrr::pmap(). Finally the html gets escaped with htmltools::HTML().

https://github.com/ecoquants/findinghal/blob/e800d90f14dee7cf088c35db135d8927c231d5f8/cards.Rmd#L26-L33

I'll leave it to you to fill out the rest of cards.csv:

Note that you can now match the btn_bkgrnd_color exactly with the pdf's ;)

[mspector13]

Aaaaa sneaky sneaky! Thanks for finding this so quickly, and for updating the HTML to call cards.csv

I've updated the spreadsheet and pushed the changes. Everything looks good on my end!

I'm having a hard time follow all of the HTML in _card.html but I'm sure i'll be able to figure it out.