search

RobertsLab / resources

https://robertslab.github.io/resources/
19 stars 11 forks source link

Can't get photos to render in Quarto from URL #1744

Closed ChrisMantegna closed 11 months ago

ChrisMantegna commented 11 months ago

Hey Y'all!

Caught myself trying to be fancy and got got. How do you get an image to render from a URL that is not in your repo? I have progress bars that show on the 'visual' tab in R with the 'source' code showing proper formatting, but I render the page and it's broken links. See screen grab for visual explanation. image

Code is here: https://github.com/ChrisMantegna/cmlabsite/blob/0d076b747ea8f19707d69b57908aa6fc9bc694fd/notebook/2023novembergoals.qmd#L16

sr320 commented 11 months ago

In short those are not URLs to raw images, but rather part of a python package api to call... Obviously they render in Rstudio...

I have no easy fix. If you had image files of each you could host and link to

ChrisMantegna commented 11 months ago

Well crap. Seems like I'll have an image stash of a bunch of random progress bars... Thanks!

sr320 commented 11 months ago

Alternative ...

Add something like this to yaml

---
title: "Progress Bars"
format: html
html_dependencies:
  - name: "bootstrap"
    version: "4.3.1"
    src: "https://stackpath.bootstrapcdn.com"
    stylesheet: "bootstrap.min.css"
    script: "bootstrap.min.js"
---

and this text

## Project 1 (10% done)
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>

## Project 2 (30% done)
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>

will render like https://d.pr/i/UY2vLn

ChrisMantegna commented 11 months ago

Ok. So add the html dependencies menu choices and the text below (modified to match my items)? That will be cool.

sr320 commented 11 months ago

specifically change

---
title: "November 2023 Goals"
author: "Chris Mantegna"
date: "2023-11-01"
categories: ["monthly goals", "daily entries"]
format:
  html:
    toc: true
---

to

---
title: "November 2023 Goals"
author: "Chris Mantegna"
date: "2023-11-01"
categories: ["monthly goals", "daily entries"]
format:
  html:
    toc: true
html_dependencies:
  - name: "bootstrap"
    version: "4.3.1"
    src: "https://stackpath.bootstrapcdn.com"
    stylesheet: "bootstrap.min.css"
    script: "bootstrap.min.js"
---

and line 16 from

- Get through eDNA bioinformatics pipeline from CALeDNA trip ![10](https://progress-bar.dev/10/)

to 

- Get through eDNA bioinformatics pipeline from CALeDNA trip <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
ChrisMantegna commented 11 months ago

thank you! was about to make a mess of that... will report back.

ChrisMantegna commented 11 months ago

So fancy! Thank you :) image