Здравствуйте.

На сайте есть статьи. В статьях есть картинки. Картинки кликабельные — при нажатии увеличиваются во всплывашке.

С первого взгляда все просто — я оборачиваю тег img в тег a, в теге a указываю href- полную картинку. И вешаю, например, lightcase на тег a при загрузке страницы.

Но как мне сделать возможность нужным образом обрезать картинку? Чтобы вставить в текст статьи именно обрезанный фрагмент.
Картинки разные.
Допустим, есть картинка 100x200. А вставить нужно 100x120.
А есть другая — 200x200. А вставить нужно 100x100.
И у каждой должна быть видна нужная часть — у какой-то надо обрезать низ, у какой-то верх, у какой-то и низ, и верх (нужная часть в середине, например).

Можно заставлять контент менеджера сохранять оригинальную картинку, вырезать превью в фотошопе, заливать превью на сайт. И вставлять в статью получившуюся превьюшку, при щелчке по которой будет открываться оригинальная картинка.
Но это очень муторно.

Хочется вариант попроще. Что-то типа загрузки фотки в vk. Там можно выбрать превью (какая часть будет видна при оставлении комментария / в личных сообщениях и т.д.

Обрезать картинку я могу с помощью phpthumbof. А вот как сделать возможность выбирать, что именно обрезать / оставить? Нужен плагин на JS, такие есть в TinyMCE или MODx?