Documentation for "figureCupper"

[jpiaskowski]

Hey, I'm sorry, this is a "need help" post. I have read through your code for "figureCupper" and cannot ascertain how to specify the options for figures for options other than command = "Resize". I realise the height and/or width need to be set, but how to syntactically do that is escaping me. Is there a guide somewhere for this?

[zwbetz-gh]

Hi @jpiaskowski -- have you tried this sample? https://cupper-hugo-theme.netlify.app/cupper-shortcodes/#figurecupper

[jpiaskowski]

Oh yeah, of course (and it does work). That example uses command = "Resize". In fact, all of the example here use command = "Resize". I see there are other options (e.g. "Fit"), but I cannot figure out how pass the arguments to specify the width and height.

My problem is that there appears to be a hidden maximum height to all images. So images that are square or portrait orientation end up either stretched out or reduced to a very small size. I thought if I explored other options besides "Resize", that might solve the problem (and it might be useful to know what those other options are doing).

I've tried as many options as I can think of:

![](my_image.png)  // image looks fine, fits within height restrictions //

<img src="my_image.png" style="width:100%">  // stretched out image //

{{< figureCupper img="my_image.png" 
command="Fit" 
options="height:700x;width:700x" >}}

// same results for jpegs as pngs //

I can't sort this out at all - I've tried many variations for options = without success. Any suggestions?

If it helps, this is what I am working with (still a work in progress). I am using the R package 'blogdown' to generate a Hugo website (so I can work with rmarkdown files directly) and for now, I've just been serving it locally on my machine.

It's a nice theme, thank you. You had me at "accessibility-friendly".

[zwbetz-gh]

So figureCupper is just a wrapper around Hugo's image processing. So the width and height examples in their docs should work here as well. See https://gohugo.io/content-management/image-processing/

For example, to set 600 width and 400 height, do:

{{< figureCupper
img="some_image.jpg" 
caption="Some caption." 
command="Resize" 
options="600x400" >}}

[jpiaskowski]

That works, thank you so much!