Change image size

[ogamespec]

Please add change image size, as in TFS:

 

[PhrozenByte]

Using element-specific styling rules (like width and height of a image) is considered rather bad practice, because viewing your website with a 4K desktop screen or your smartphone makes a huge difference. You should use CSS classes instead. With CSS classes you can define how a element (a image in this case) behaves in relation to its parent element, like consuming 100% (default), 75% or 50% of the available space, e.g.

img { width: 100%; }
img.small { width: 75%; }
img.xsmall { width: 50%; }

You can then use those CSS classes in Markdown using e.g.

![api.png](.attachments/api-6c96846f-6a2f-4ad3-9a5e-5d96071cfbbb.png) {.small}

Apart from this recommendation: Pico uses Parsedown as Markdown parser, so to put a long story short: Regarding Markdown, Pico does, what Parsedown does. Due to very limited time, we don't plan to create our own Markdown parser.

Anyway, customization is one of Pico's main advantages. You can use Pico's onParsedownRegistered event to hook into Parsedown's processing. See Parsedown's wiki for more info about how to create a Parsedown extension and how to add your own syntax rules to Parsedown.

[ogamespec]

Nice answer.

Can you duplicate it in picocms.org to future users?

[PhrozenByte]

Good idea, we've incorporated this in https://github.com/picocms/picocms.github.io/commit/42a7207162d65fa1be3d998d9de292aee12195af :+1:

[ogamespec]

You can close this issue.

Thanks!