Jump to content

Lazy load in 3rd-party resources

Adriano Faria

By Adriano Faria
in Developer Connection

 Share
Go to solution Solved by newbie LAC,

Recommended Posts

Midnight Modding Mentor

Midnight Modding

Posted
Posted (edited)

I can't even find anything documenting any changes third party devs can or must make for 4.4. If it's in contributor forum, I don't have access. Dev docs on here has no new docs for 4.4, but there's a warning that third party apps may not be compatible with 4.4, so clearly there are some things we may need to change.

Edited by Midnight Modding
Link to comment
Share on other sites
Hegnauer.io Enthusiast

Hegnauer.io

Posted
Posted
1 hour ago, Midnight Modding said:

I can't even find anything documenting any changes third party devs can or must make for 4.4. If it's in contributor forum, I don't have access. Dev docs on here has no new docs for 4.4, but there's a warning that third party apps may not be compatible with 4.4, so clearly there are some things we may need to change.

Weird that documentation like this is lacking in an otherwise stellar product. 

Link to comment
Share on other sites
Midnight Modding Mentor

Midnight Modding

Posted
Posted (edited)
11 minutes ago, micasasucasa said:

Weird that documentation like this is lacking in an otherwise stellar product. 

someone just told me that IPS had said there will be some once it is stable. I don't guess I'm necessarily in a hurry, since I've so far only updated private ones and those clients won't use 4.4 soon, most likely. Still, I feel better when I know I have something ready. 🙂 

I don't think 4.3 affected me any, so I'm hoping 4.4 changes won't affect me much.

Edited by Midnight Modding
Link to comment
Share on other sites
  • Solution
newbie LAC Veteran

newbie LAC

Posted
  • Solution
Posted (edited)

You should to use additional attributes

img[data-src]

[data-background-src]

iframe[data-embed-src]

video[data-video-embed]

+ controllers which support lazy load or attribute data-ipsLazyLoad

 

Examples 

<div data-controller='core.front.core.lightboxedImages'>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

  

<div data-ipsLazyLoad>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

 

Edited by newbie LAC
Link to comment
Share on other sites
  • 4 weeks later...
LaCollision Proficient

LaCollision

Posted
Posted

If you develop an app / plugin, and that you want to display a WYSIWYG editor, you must add the controller: 

data-controller='core.front.core.lightboxedImages'

… to the div that includes your WYSIWYG editor content.

For instance: 

<div class="ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages">
  {$object->content|raw}
</div>

 

Link to comment
Share on other sites
Daniel F Grand Master

Daniel F

Posted
Posted
39 minutes ago, LaCollision said:

If you develop an app / plugin, and that you want to display a WYSIWYG editor, you must add the controller: 


data-controller='core.front.core.lightboxedImages'

… to the div that includes your WYSIWYG editor content.

For instance: 


<div class="ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages">
  {$object->content|raw}
</div>

 

We've improved this for a future release 🙂

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this. 

{template="richText" group="global" app="core" location="global" params="the content which includes the media "}

 Template parameters: 

$value, $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()

 

and the template will include all the necessary code. This is also going to make it future proof, so if anything else changes, we'll only need to adjust this template 🙂

Link to comment
Share on other sites
LaCollision Proficient

LaCollision

Posted
Posted
On 3/10/2019 at 6:39 PM, Daniel F said:

We've improved this for a future release 🙂

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this. 


{template="richText" group="global" app="core" location="global" params="the content which includes the media "}

 Template parameters: 


$value, $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()

 

and the template will include all the necessary code. This is also going to make it future proof, so if anything else changes, we'll only need to adjust this template 🙂

 

Hi @Daniel F,

I can see the richText template in 4.4.2, that's great, thank you!

Just a suggestion:

For SEO purposes, the rich text could be embed in a h1, or h2, or hx tag…

So that would be great for the richText template to have an additional 'tag' parameter: 

<ips:template parameters="$value, $tag = 'div', $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()" />
{{$controllers = array_merge( array('core.front.core.lightboxedImages'), $extraControllers );}}
<{$tag} class='ipsType_richText {expression="implode(' ', $extraClasses)"}' data-controller='{expression="implode(',', $controllers)"}' {{foreach $extraAttributes as $attribute}} {$attribute|raw}{{endforeach}}>
	{$value|raw}
</{$tag}>

 

Thanks!

Link to comment
Share on other sites
bfarber Grand Master

bfarber

Posted
Posted
5 hours ago, LaCollision said:

 

Hi @Daniel F,

I can see the richText template in 4.4.2, that's great, thank you!

Just a suggestion:

For SEO purposes, the rich text could be embed in a h1, or h2, or hx tag…

So that would be great for the richText template to have an additional 'tag' parameter: 


<ips:template parameters="$value, $tag = 'div', $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()" />
{{$controllers = array_merge( array('core.front.core.lightboxedImages'), $extraControllers );}}
<{$tag} class='ipsType_richText {expression="implode(' ', $extraClasses)"}' data-controller='{expression="implode(',', $controllers)"}' {{foreach $extraAttributes as $attribute}} {$attribute|raw}{{endforeach}}>
	{$value|raw}
</{$tag}>

 

Thanks!

This template is used to show posted WYSIWYG content, and is 99.9% of the time NOT a heading, so I don't see much point personally.

Link to comment
Share on other sites
Adriano Faria Grand Master

Adriano Faria

Posted
  • Author
Posted

Anyone having issue to display on ACP? It works fine on front-end but I can't seem make it work on ACP:

- Front-end: 

		<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
			<span class='ipsType_break ipsContained' style='white-space:normal;'>
				{template="richText" group="global" app="core" location="global" params="$row['note_content']"}
			</span>
		</div>

iYFNNal.png

ACP table: 

		'note_content' => function( $val, $row )
		{
			return \IPS\Theme::i()->getTemplate( 'members', 'membernotes', 'admin' )->noteContent( $val );
		},

Template noteContent: 

<ips:template parameters="$note" />
<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
	<span class='ipsType_break ipsContained' style='white-space:normal;'>
		{template="richText" group="global" app="core" location="global" params="$note"}
	</span>
</div>

NMt9ahQ.png

Doesn't show the image.

Link to comment
Share on other sites
Stuart Silvester Grand Master

Stuart Silvester

Posted
Posted
25 minutes ago, Adriano Faria said:

Anyone having issue to display on ACP? It works fine on front-end but I can't seem make it work on ACP:

- Front-end: 


		<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
			<span class='ipsType_break ipsContained' style='white-space:normal;'>
				{template="richText" group="global" app="core" location="global" params="$row['note_content']"}
			</span>
		</div>

iYFNNal.png

ACP table: 


		'note_content' => function( $val, $row )
		{
			return \IPS\Theme::i()->getTemplate( 'members', 'membernotes', 'admin' )->noteContent( $val );
		},

Template noteContent: 


<ips:template parameters="$note" />
<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
	<span class='ipsType_break ipsContained' style='white-space:normal;'>
		{template="richText" group="global" app="core" location="global" params="$note"}
	</span>
</div>

NMt9ahQ.png

Doesn't show the image.

No it's a front-end thing only, core.front.core.lightboxedImages is a front end controller only. In the AdminCP, you could just add data-ipsLazyLoad to your container tag

Link to comment
Share on other sites
  • 3 weeks later...
SJ77 Veteran

SJ77

Posted
Posted
On 2/14/2019 at 9:54 PM, newbie LAC said:

You should to use additional attributes

img[data-src]

[data-background-src]

iframe[data-embed-src]

video[data-video-embed]

+ controllers which support lazy load or attribute data-ipsLazyLoad

 

Examples 


<div data-controller='core.front.core.lightboxedImages'>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

  


<div data-ipsLazyLoad>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

 

I use your image expand and also your image download count plugin. Will this work if I choose lazy load?

Link to comment
Share on other sites
  • 4 weeks later...
sobrenome Veteran

sobrenome

Posted
Posted
On 3/22/2019 at 9:47 AM, Stuart Silvester said:

No it's a front-end thing only, core.front.core.lightboxedImages is a front end controller only. In the AdminCP, you could just add data-ipsLazyLoad to your container tag

Is this the final version? How can I add it to my custom Pages templates?

Link to comment
Share on other sites
  • 2 months later...
sobrenome Veteran

sobrenome

Posted
Posted
On 3/10/2019 at 2:39 PM, Daniel F said:

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this. 


{template="richText" group="global" app="core" location="global" params="the content which includes the media "}
		

Hello, to implement lazy loading for an image I should call the image using this template just placing in the params”” the image source, like $record_image for example?

Link to comment
Share on other sites
Daniel F Grand Master

Daniel F

Posted
Posted
32 minutes ago, sobrenome said:

Hello, to implement lazy loading for an image I should call the image using this template just placing in the params”” the image source, like $record_image for example?

No, there’s no need for the template if it’s only for an image. Please take a look at the guides for further information.

 

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
Posted

Let me see If I get it. For Pages $record_image load using the lazy load the code should be: 

<div data-ipsLazyLoad>
{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$record_image}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt='my image alt text'>
{{else}}
		<img src='{$record_image}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt='my image alt text'>
{{endif}}
</div>

 

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
Posted

Hello! I could manage it! Thanks! Wonder why profile images are not loaded by lazy loading, as long as they can be big.

I have changed the template userPhoto to add the lazy loading, but when I insert the <div data-ipsLazyLoad> wrapping the image it breaks the website design. Is it possible to add lazy loading for profile images in the next release? 

Thanks!

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...