Простой способ добавить стиль изображения в блог Ghost

Есть некоторые проблемы с попыткой стилизовать изображения в блогах Ghost. Их реализация Markdown действительно проста. Вы можете загрузить код ![](), но затем, чтобы добавить класс или стиль, вы должны преобразовать его в HTML. Это также не лучший вариант для команд, где кто-то не очень хорошо разбирается в HTML.


image jquery css markdown ghost
person Dreyfuzz    schedule 14.06.2016    source источник
comment
Может ли это быть дубликатом Как добавить класс в изображение уценка в Ghost?   -  person klml    schedule 15.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот что я сделал:

  1. Добавьте стиль изображения в свой CSS, который вы хотите применить.

  2. Убедитесь, что в вашем блоге установлен JQuery (он больше не включен в Ghost — загрузите его и добавьте, как на шаге 2, если необходимо)

  3. Добавьте файл с именем styles.js в папку js вашей темы (в активах). Ссылка на файл темы default.hbs:

<script type="text/javascript" src="{{asset "js/styles.js"}}"></script>

  1. Добавьте $('img[alt~="name of your class"]').addClass("name of your class"); в styles.js. Это применит выбранный вами стиль к изображению.

  2. При добавлении изображения в редакторе Markdown укажите имя класса в скобках. Вот пример всего этого, чтобы поместить изображение влево:

#styles.css

  img.left {float:left;}

#styles.js

 $('img[alt~="left"]').addClass("left");

В редакторе:

![Dog left](http://images.com/dog.jpg)

Главный недостаток этого метода заключается в том, что стиль не будет предварительно просмотрен в редакторе. Вам придется загрузить страницу, чтобы увидеть ее, но это кажется самым простым способом, который я мог придумать, чтобы добавить необязательный стиль изображения в блог Ghost.

person Dreyfuzz    schedule 14.06.2016
comment
Вам даже не нужен обходной путь с jQuery. Вы можете напрямую получить доступ к атрибуту alt с помощью css ('img[alt~=left] {float: left}') - person klml; 15.06.2016