PhotoSwipe + ManualCrop + Insert

Introduction: Making PhotoSwipe jquery, Manual Crop and Insert modules working together.

Result of this: editor of node can now easily embed cropped and scaled images into text as he want. Big images can be now smaller, but clickable and viewable in PhotoSwipe without any additional actions.

1. Install and confugre above 3 modules as wrote in installation documentation;
2. Add image field (prefer to add different image field, if one exists), configure that can be used by Insert module.
3. Copy insert/templates/image-insert-image.tpl.php to your theme folder. Warning: you should copy to your content editing theme, not current, if these are different!
4. You can rename image-insert-image.tpl.php to image-insert-image--STYLENAME.tpl.php for affecting only selected scaling and cropping style.
5. Replace code of above file with next:

<a href="<?php print url(file_create_url($item['uri']), array('absolute' => TRUE)); ?>" class="photoswipe" data-size="<?php print $item['width'] . 'x' . $item['height']; ?>">
  <img src="<?php print $url ?>" <?php if ($width && $height): ?>width="<?php print $width; ?>" height="<?php print $height; ?>" <?php endif; ?>alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" />

6. Visit /admin/config/media/photoswipe and checkl "Load PhotoSwipe on all non-admin pages ".
7. If you don't want add PhotoSwipe code into each page, use and modify next code at the bottom of your theme page.tpl.php file:

  $node = menu_get_object();
  if ($node && ($node->type == 'YOURCONTENTTYPE')) {
  if (photoswipe_assets_loaded()) {
    print theme('photoswipe_container');

CKEditor and CKEditor Insert can be used with above modules for making editor life more easer.


Make inserted images as gallery viewing, not standalone PhotoSwipe.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.