core.front.core.lightboxedImages and tapatalk

[BomAle]

Hello, a client contact me for a simple fix for tapatalk uploads/attachments

I have fixed with following code, but why not add proxy images into lightbox images group?

<script type="text/javascript">
;( function($, _, undefined){
	"use strict";
	ips.controller.mixin('tapatalkAttach', 'core.front.core.lightboxedImages', true, function () {
		this._initializeImages = function () {
			var self = this;
			var images = this.scope.find('img');

			if( !images.length ){
				return;
			}
			
			this.scope.imagesLoaded( function (imagesLoaded) {
				if( !imagesLoaded.images.length ){
					return;
				}

				_.each( imagesLoaded.images, function (image, i) {
					var image = image.img;

					if( !_.isUndefined( $( image ).attr('data-emoticon') ) || $( image ).hasClass('ipsEmoji') || image.width >= image.naturalWidth && 
						( !$( image ).hasClass('ipsImage_thumbnailed') && !$(image).is('img[data-imageproxy-source*="//uploads.tapatalk"]') )
					) {
						return;
					}

					image = $( image );
					image.addClass('ipsImage_thumbnailed');

					// If the image is already inside an a, then just add the lightbox params; otherwise, wrap in new <a>
					if( image.closest('a').length && image.closest('a').hasClass('ipsAttachLink') && image.closest('a').hasClass('ipsAttachLink_image') ){
						if ( [ 'gif', 'jpeg', 'jpe', 'jpg', 'png' ].indexOf( image.closest('a').attr('href').substr( image.closest('a').attr('href').lastIndexOf('.') + 1 ).toLowerCase() ) != -1 ) { // Only if the link is to an image
							image.closest('a')
								.attr( 'data-fullURL',image.closest('a').attr('src') )
								.attr( 'data-ipsLightbox', '' )
								.attr( 'data-ipsLightbox-group', self._random );
						}
					} else {
						if( !image.closest('a').length ){
							image.wrap( $( "<a href='" + image.attr('src') + "' title='" + ips.getString('enlargeImage') + "' data-ipsLightbox data-ipsLightbox-group='" + self._random + "'></a>" ) );
						} else if ($(image).is('img[data-imageproxy-source*="//uploads.tapatalk"]')) {
							/* whatch into _linkRemoteImages dev/js/front/controllers/core/ips.core.app.js */
							image.closest('a')
								.attr( 'data-ipsLightbox', '' )
								.attr( 'data-ipsLightbox-group', self._random );
						}
					}
				});
			});
		}
	});
}(jQuery, _));
</script>

 

[Stuart Silvester]

Image proxy images are thumbnailed and linked to the original image which may (probably) not be Https. If we lightboxed these it wouldn't work site to loading non-https content on a https page. It was a consideration when making these changes on 4.3.

[BomAle]

You can serve full image as proxied image and not original, avoiding mixed content and permise enlarge it if attachment_image_size have a small value.

EDIT: currently into applications/core/interface/imageproxy/imageproxy.php resizeToMax cut with attachment_image_size and not with attachment_resample_size?

[Stuart Silvester]

1 hour ago, BomAle said:

You can serve full image as proxied image and not original, avoiding mixed content and permise enlarge it if attachment_image_size have a small value.

EDIT: currently into applications/core/interface/imageproxy/imageproxy.php resizeToMax cut with attachment_image_size and not with attachment_resample_size?

We don't store the full size image, we changed in 4.3 to store a thumbnail and link to the original image, mainly to reduce disk space usage and bandwidth usage. The current functionality is intended at this time, attachments do work in a different way because we store all sizes of the image

[BomAle]

I have edited applications/tapatalk/interface/helper.php replace

$text = preg_replace_callback('/<img.*?>/si',function($match){
	$theImg = TT_GetHtmlEntity($match[0], 'img');
	$src =  $theImg->getAttribute('src');

into

$text = preg_replace_callback('/<img.*?>/si',function($match) use ($attachmentBaseUrl){
	$theImg = TT_GetHtmlEntity($match[0], 'img');
	$src =  $theImg->getAttribute('data-imageproxy-source') ?: $theImg->getAttribute('src');
	if( \mb_stripos( $src, $attachmentBaseUrl ) !== FALSE AND $theImg->getAttribute('data-fileid' ) )
	{
		$src = TT_fixBaseUrl(\IPS\Settings::i()->base_url . "applications/core/interface/file/attachment.php?id={$theImg->getAttribute('data-fileid')}");
	}

Hope it help others one