Comments (5)
Hi!
how are you asking hugo to generate this? there’s a few ways to render an svg… theres a lot of nuance, as most of the tooling around images, especially in hugo have an expectation of a raster image… and don’t play well with vectors… so there’s some nuance and odd contortions one has to do at times to get things to play nice together
if you can share the source you’re working with we might be able to offer some suggestions as to a solution that’ll work
from congo.
Here is code responsible for this
congo/layouts/partials/picture.html
Lines 14 to 24 in 50b77b2
options are:
change regexp to only work if there are no units or units are explicitly pixelsimplement units conversion, but I thinkcm
depends on the density of pixels on device and there is no universal way to do this "on the server"
UPD solution is to capture width and height together with units and output them in html as is.
from congo.
UPD solution is to capture width and height together with units and output them in html as is.
@stereobooster - I don't think it's as simple as that as the img
tag only accepts dimensions in pixels. Updating the capture group to pick up the units still doesn't get the browser to display it at the correct size.
Using the reference image provided above and this modification:
{{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*[a-zA-Z]*)["']` $svgContent 1) }}
{{ $width = index . 1 }}
{{ end }}
{{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*[a-zA-Z]*)["']` $svgContent 1) }}
{{ $height = index . 1 }}
{{ end }}
Gives the following output:
<img src="test.svg" width="3.07cm" height="3.07cm" class="mx-auto my-0 rounded-md" alt="Test" ...>
But the actual image is still displayed as if it was 3.07px x 3.07px.
from congo.
@jpanther Indeed. I didn't realized that HTML width is not the same as CSS width.
Hm... Maybe we can use CSS (style="{width:3.07cm, height:3.07cm}"
)? Maybe aspect-ratio
Other options:
- do unit conversion (as proposed above)
- only support cases when there are no units or units are
px
. If there are unsupported units do not output width and height in HTML (so browser would detect width and height the old way)height=["']([.0-9]*)(px)?["']
from congo.
Related Issues (20)
- Encased links will be rendered with a blank character as prefix HOT 2
- article.sharingLinks needs to replace "twitter" with "X-twitter"
- Extra space after [ when using links HOT 2
- Author image does not render in profile homepage or author footer info HOT 5
- Congo theme error function "hasSuffix" not defined HOT 6
- Copy from code block appends a newline for every line HOT 3
- HTML Table not filling width at `md` size viewport and above
- Featured images overlapping with page title when article metadata hidden HOT 8
- Inconsistent picture rendering HOT 1
- Error calling first: can't iterate over maps.Params HOT 3
- The thumbnail images, or cover images are not showing HOT 2
- enableImageWebp breaks animated GIF files HOT 3
- Add Threads support
- Next article pagination link animation is inverted
- Non-existent two-part path results with 404 page which doesn't load css and js files HOT 2
- Emoji are rendered inside Markdown code blocks HOT 2
- Unexpected blank line when using multiple lines in an alert box HOT 1
- [docs] Link to configuration files triggers Google Unsafe warning
- Images aren't showing when used in the non-default language HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from congo.