Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted February 14, 20195 yr How this works? Is this automatic? Or do we have to change something in image call in templates? I see you mention a setting to show a blank image in some places. Tks.
February 15, 20195 yr 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 February 15, 20195 yr by Midnight Modding
February 15, 20195 yr 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.
February 15, 20195 yr 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 February 15, 20195 yr by Midnight Modding
February 15, 20195 yr Solution 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 February 15, 20195 yr by newbie LAC
February 15, 20195 yr There is a developer changelog in the forums already, but it's possible not every specific thing has been documented. Feel free to reply to that topic if you find something missing you'd like to see covered.
March 10, 20195 yr 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>
March 10, 20195 yr 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 🙂
March 10, 20195 yr 15 minutes ago, 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. That's GREAT news, thank you!!!
March 16, 20195 yr On 3/10/2019 at 2:39 PM, Daniel F said: 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 🙂 awesome!
March 21, 20195 yr 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!
March 21, 20195 yr 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.
March 22, 20195 yr Author 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> 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> Doesn't show the image.
March 22, 20195 yr 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> 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> 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
March 22, 20195 yr Author 1 minute ago, Stuart Silvester said: In the AdminCP, you could just add data-ipsLazyLoad to your container tag That worked: Thank you. 👍
April 9, 20195 yr 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?
April 10, 20195 yr Hello, 13 hours ago, SJ77 said: image download count plugin. What the plugin? This plugin only add additional info and doesn't affect on images 13 hours ago, SJ77 said: I use your image expand . Will this work if I choose lazy load? Yes. Edited April 10, 20195 yr by newbie LAC
May 6, 20195 yr 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?
May 7, 20195 yr 20 hours ago, Daniel F said: You can use the richText template now for the ACP and Frontend 🙂 Sorry, I could not figure out how to do it yet...
May 7, 20195 yr Should be like this: <img src="{file="$record->field_103" extensions="cms_Records"}" alt="{$record->_title}: posição inicial" data-ipsLazyLoad>
July 14, 20195 yr 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?
July 14, 20195 yr 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.
July 14, 20195 yr 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>
July 22, 20195 yr 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!
