Remove page jumping when images are not yet loaded fixing Xon/XenForo…

[Ralle]

I altered the way images are presented from src="" to src="an SVG with the canvas dimensions of the attachment image" which means they work with responsive "max-width: 100%" and all that. Works great for me.

Please make sure it does not break non-attachment images. It shouldn't, but I was unable to test it because I don't have all the same addons as you.

[Xon]

@Ralle thanks for this, This avoids the flaws of my previous approach too.

[Ralle]

Glad you liked it 👍

[Xon]

@Ralle this causes weird issues if users can only see attachment thumbnails instead of the full attachment.

[Ralle]

I will take a look.

[Ralle]

Okay, I made some changes. By the way. Have a look at the template 'bb_code_tag_attach':

<xen:if is="!{$validAttachment}">

	<a href="{xen:link full:attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.attachment_id}'}</a>
	
<xen:elseif is="!{$attachment.thumbnailUrl}" />

	<a href="{xen:link full:attachments, $attachment}" target="_blank">{xen:phrase view_attachment_x, 'name={$attachment.filename}'}</a>
	
<xen:elseif is="{$canView} AND {$full}" />
	
	<img src="{xen:link full:attachments, $attachment}" alt="{$attachment.filename}" class="bbCodeImage LbImage" />
		
<xen:elseif is="{$canView}" />
	
	<a href="{xen:link full:attachments, $attachment}" target="_blank" class="LbTrigger"
		data-href="{xen:link misc/lightbox}"><img
		src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"
		class="bbCodeImage LbImage" /></a>
			
<xen:else />

	<a href="{xen:link full:attachments, $attachment}" target="_blank"><img src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="bbCodeImage" /></a>
	
</xen:if>

It looks to me like even if $full is true that it may decide to display the thumbnail because of permissions. But in SV_LazyImageLoader_Helper::getLazySpinnerCss it only checks for !empty($params['full']). I think that may be a bug.

[Xon]

Yeah, that makes sense.

I've merged in the changes, would you be able to fix the getLazySpinnerCss in a new PR?