Добавление собственного стиля CSS в img

Question

В настоящее время я использую тему материала Hugo: https://github.com/digitalcraftsman/hugo-material-docs

Когда я пишу следующее содержание уценки

![practice-signup-1](/images/practice-signup-1.png)

Хьюго сгенерирует следующий HTML-код

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1"></p>

Тем не менее, я хочу добавить следующий стиль в мой тег img

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

Мне было интересно, как я могу добиться этого?

Answer 1

Вы можете создать шорткод для него.

Сделайте свой собственный шорткод в /themes/your-theme-dir/layouts/shortcodes/img.html,

<p><img src="{{ .Get 0 }}" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

а затем используйте этот короткий код в своем сообщении:

{{< img https://investing.jstock.co/images/practice-signup-1.png >}}

Другой способ, вы можете добавить стиль в CSS-файл вместо создания встроенного стиля.

Answer 2

Вы можете поместить необработанный HTML в файлы уценки. Поэтому, если у вас есть изображение, в котором вы хотите использовать особые стили, просто вставьте <img src.. код в вашем файле уценки.