Figure size behavior change in 1.5? Missing img-fluid class.

[astrowonk]

Discussed in #10245

This really seems like a bug/issue than a discussion, since any 1.5 rendered image you can see the missing img-float class. I think the question I have is: should images (the img tag) in Quarto created by cell blocks have the img-fluid bootstrap class or not? They did in 1.4, they don't in 1.5.x.

I think something might be inserting height into the img tag that wasn't present in 1.4, and the lua code that adds the responsiveness doesn't work if height is set.

^{Originally posted by astrowonk July 8, 2024}

Description

According to the Quarto documentation:

By default figures are displayed using their actual size (subject to the width constraints imposed by the page they are rendered within). You can change the display size by adding the width and height attributes to the figure.

And in Quarto 1.4 when I use Safari to inspect a figure created by python code, I see two classes on the img : class="img-fluid figure-img" where the img-fluid bootstrap class imposes this style of:

max-width: 100%;
height: auto;

This seems consistent with the documentation.

In Quarto 1.5, the same document when rendered the img tag created does not have theimg-fluid class, and large images appear larger than the page with horizontal scroll bars. I can restore the behavior I want by setting my own css to be:

.figure-img {
    margin-bottom: .5rem;
    line-height: 1;
    max-width: 100%;
    height: auto;
}

but I'm not sure that behavior change in 1.5 was intended?

[mcanouil]

Thanks for the report.

We kindly ask for your cooperation in our issue resolution process. Please allow us the opportunity to review your initial report before opening additional discussions or issues. Often, the matter may involve complex factors that require comprehensive analysis.
Initiating multiple threads can inadvertently expand the workload and complicate the investigation. We greatly value your contributions and would appreciate it if you could continue the conversation within your original thread in the future. This will enable us to conduct a thorough investigation and determine the appropriate next steps.
Thank you for your understanding and support.

In addition, this report does not follow the template and does not contain sufficient information.

[astrowonk]

Thanks for the report.

We kindly ask for your cooperation in our issue resolution process. Please allow us the opportunity to review your initial report before opening additional discussions or issues. Often, the matter may involve complex factors that require comprehensive analysis. Initiating multiple threads can inadvertently expand the workload and complicate the investigation. We greatly value your contributions and would appreciate it if you could continue the conversation within your original thread in the future. This will enable us to conduct a thorough investigation and determine the appropriate next steps. Thank you for your understanding and support.

In addition, this report does not follow the template and does not contain sufficient information.

I used the 'make an issue from this discussion' link, which does not show any template.

This is very reproducible. Inspect any quarto 1.5 generated qmd file with a python generated image in a cell. The cell images are missing the img-fluid class, probably because height is set instead. My question is, is this intentional or not? Almost any quarto document can be used to reproduce it with quarto 1.5.x.

---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document.

```{python}
import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

plt.figure(figsize=(16, 8))
plt.plot(x, y)
plt.show()
```

[mcanouil]

I used the 'make an issue from this discussion' link, which does not show any template.

I know but you did not put back the example and did not let us the time to take a look.

My question is, is this intentional or not? Almost any quarto document can be used to reproduce it with quarto 1.5.x.

We received your query within the discussion you first opened. It was unnecessary to raise a separate issue to inquire about the same matter roughly 24 hours after initiating the discussion.
Kindly be mindful of our time.

[astrowonk]

We received your query within the discussion you first opened. It was unnecessary to raise a separate issue to inquire about the same matter roughly 24 hours after initiating the discussion. Kindly be mindful of our time.

Discussions Q&A felt more for "How do I do this?" This felt more like a bug/issue, not a discussion, especially once I found the lua code for the responsive function that skips if height is set, which I linked above.

If there was a "move" button, I would have used that instead. I'm happy to close the discussion if helpful.

[cscheid]

They did in 1.4, they don't in 1.5.x.

I'm sorry, I can't reproduce the claim.

$ quarto --version
1.4.555
$ quarto render 10259.qmd; cat 10259.html | grep 10259_files/figure-html

Executing '10259.ipynb'
  Cell 1/1: ''...Done

pandoc
  to: html
  output-file: 10259.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png

metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Reproducible Quarto Document

Output created: 10259.html

<p><img src="10259_files/figure-html/cell-2-output-1.png" width="566" height="411" class="figure-img"></p> 

[astrowonk]

They did in 1.4, they don't in 1.5.x.

I'm sorry, I can't reproduce the claim.

My apologies, @cscheid. I witnessed the behavior change (dropping the img-fluid) from 1.4 to 1.5 with plotnine plots, saw that the img-fluid tag was missing with 1.5 in matplotlib plots, and then made the (wrong) assumption that matplotlib basic plots would have img-fluid in Quarto 1.4. (They don't, as you showed.)

Here is a better reproduction, using plotnine.

---
title: Example of Img Fluid
---

### What's happening


```{python}
import pandas as pd
from plotnine import ggplot, geom_point, aes, theme

df = pd.DataFrame()

df['x'] = [1, 2, 3, 4, 5]
df['y'] = [1, 4, 9, 16, 25]

(ggplot() + geom_point(df, aes(x='x', y='y')) + theme(figure_size=(16, 8)))


```

And here is the terminal output.

(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » quarto -v                                                                                  
1.4.557
(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » quarto render test.qmd --html 

Executing 'test.ipynb'
  Cell 1/1: ''...Done

pandoc --html
  to: html
  output-file: test.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Example of Img Fluid
  
Output created: test.html

(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » cat test.html | grep img     
<p><img src="test_files/figure-html/cell-2-output-1.png" class="img-fluid figure-img"></p>

and then with Quarto 1.5, the terminal output, now the img tag has an explicit width set, which must be why the img-fluid does not get set.

(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class »                                                                                            130 ↵
(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » quarto -v                                                                                  130 ↵
1.5.54
(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » quarto render test.qmd --html

Starting python3 kernel...Done

Executing 'test.quarto_ipynb'
  Cell 1/1: ''...Done

pandoc --html
  to: html
  output-file: test.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Example of Img Fluid
  
Output created: test.html

(base) marcosh@Discovery:~/Developer/active_projects/quarto-img-class » cat test.html | grep img     
<p><img src="test_files/figure-html/cell-2-output-1.png" width="1600" height="800" class="figure-img"></p>

[cscheid]

I believe you're looking at a bugfix for #9470: #9538

[astrowonk]

I believe you're looking at a bugfix for #9470: #9538

Ah-ha! That's it. Specifically f835a76

I need to read those issues to understand what I should be doing for retina, because my approach had been to render in python at large pixel size and let img-fluid squish it back down to the width of my post (Which I think should look good at high or low DPI monitors). But, I need to read more on other ways to handle retina. (Though the 2X assumption is not quite right; for some iOS devices, it might be 3X.)

For now, I can use style.css to bring back the img-fluid class and get 100% width which is what I want to do (for now.) Closing! Thanks.