Expand image for {attachment slug link=self}

Clicking on the image will no longer open it directly, but expand it
instead.
This commit is contained in:
Sybren A. Stüvel 2018-04-03 15:44:24 +02:00
parent 1ba1da49c3
commit 3e7722a567
3 changed files with 18 additions and 8 deletions

View File

@ -1,8 +1,6 @@
$(function() {
/* Expand images when their link points to a jpg/png/gif/webp */
var imgs = $('.expand-image-links a img')
.off('click')
.on('click', function(e){
function _expandImg(e) {
var $img = $(this);
var href = $img.parent().attr('href');
@ -14,5 +12,15 @@ $(function() {
.html(overlay_img);
e.preventDefault();
}
});
}
$.fn.expandOnClick = function() {
$(this)
.off('click')
.on('click', _expandImg);
};
/* Expand images when their link points to a jpg/png/gif/webp */
$('.expand-image-links a img').expandOnClick();
$('a.expand-image-links img').expandOnClick();
});

View File

@ -1,6 +1,6 @@
| {% if 'link' in tag_args and tag_args['link'] != 'none' %}
| {% if tag_args['link'] == 'self' %}
a(href="{{ vars['l'].link }}")
a.expand-image-links(href="{{ vars['l'].link }}")
img(src="{{ vars['l'].link }}", alt="{{ file.filename }}")
| {% else %}
a(href="{{ tag_args['link'] }}", target="_blank")

View File

@ -185,12 +185,14 @@ class AttachmentTest(AbstractPillarTest):
link = db_file['variations'][0]['link']
with self.app.test_request_context():
self_linked = f'<a class="expand-image-links" href="{link}">' \
f'<img src="{link}" alt="cute_kitten.jpg"/></a>'
self.assertEqual(
f'<a href="{link}"><img src="{link}" alt="cute_kitten.jpg"/></a>',
self_linked,
render('{attachment img link}', context=node_props).strip()
)
self.assertEqual(
f'<a href="{link}"><img src="{link}" alt="cute_kitten.jpg"/></a>',
self_linked,
render('{attachment img link=self}', context=node_props).strip()
)
self.assertEqual(