Recent Topics

bootstrap (blog) skin css class loadimg

Started by on Jan 12, 2016 – Contents updated: May 29, 2016

Jan 12, 2016 23:31    

OK this is kind of weird and a bit annoying.. when inserting an image into a post (in my case inline) there is a css class called loadimg added that puts an animated loading spinner in the background of said image. Well this is all good and fine IF its there until the actual image loads and then goes away.. problem is it doesn't go away and on transparent .png's it shows through making things look bad.

My question are; where is the code that sets this class?
Why isn't going away after the actual image loads?

Any other "fix" suggestion aside from taking it out in css style sheet (last resort)?

example page: http://www.a4at.com/blog/index.php/b/2016/01/12/pokemon-celebrates-20-years-with-ad-in-super-bowl-50
see the "pokemon go" image its the second image, and floated left.

skin is bootstrap blog

Jan 13, 2016 21:11

@ppnsteve an odd issue indeed. The loading spinner background remains attached to the image all the time, so if the image has some transparency, the spinner can be seen.

You can try this:

1) Create a file functions.js in your current skin and include this code:

$(document).ready(function(){
	$('.loadimg').each(function(){
		$(this).addClass('loadimg-loaded');
	});
});

2) Create a file custom.css and put this code in it:

img.loadimg-loaded {
  background: none;
}

3) Go to the file _skin.class.php and put this code inside the display_init() function (after the parent::display_init call):

require_js('functions.js', true);
require_css('custom.css', true);

That may do the trick.

Jan 13, 2016 23:20

well thank you.. that seems to work well..

maybe it should be added to the bootstrap skins by default.. but that's for another section I guess.

Jan 14, 2016 06:17

@ppnsteve yes, we are already thinking on proper solutions in order to include them in the standard release.

Thanks for reporting.

Regards!

May 26, 2016 18:38

Hi,

I was having the same issue with .png images and this solution worked for me in the bootstrap blog skin. However, it has a strange side-effect when applied to the bootstrap manual skin -- it doubles all of the content of every post, even if there are no images attached or included.

So if I have a post that reads:

TITLE
content

It now appears as:

TITLE
content
content

To make sure this was the problem I removed all customizations and made a custom manual skin with the functions.js and custom.css files included and loaded as specified. Switching between the stock manual skin and this custom one is enough to create this behavior in every post in the blog.

Thanks!
geo

I am running version 6.7.2 stable

May 27, 2016 05:19

@geoslack I'm almost sure that something else is wrong with your site. None of the 10 lines of code suggested above seem to be able to produce the duplicity effect you mentioned.

Can you share a link to see the issue directly at your site?

Thank you.

May 27, 2016 07:17

Yes, it does seem like those couple of lines of code would have absolutely nothing to do with the result. Below is a link to a blog that I have just barely started -- there aren't even any real posts there so I just created a test post. I believe that there are no extraneous customizations, just the stock bootstrap manual skin modified exactly as described above. I checked and double checked my typing to see that there were no wrong characters and it is all good.

Without those modifications .png images with transparency show the perpetually loading icon. With the modifications that disappears, yet the duplication happens. Very weird. As I mentioned above the modifications only have this result in the bootstrap manual skin and not in the blog skin, which works fine with the changes.

http://www.6worlds.net/index.php/sciencebook/intro-science/test

Since this is such a bare bones setup I am wondering if you could reproduce this behavior in an otherwise clean copy of a bootstrap manual?

BTW my webhost is Green Geeks, which I am new to, yet based on discussions here seems like a reliable hosting service.

Thanks for your help!

geo

May 27, 2016 14:35

Hi, here is a new clue.

If I turn on the dev menu and show containers and includes here's what I see.

Normal manual skin:

skin_include( _single.disp.php )
        skin_include( _item_block.inc.php )
          MY TITLE
               Container: Item Single
                    Widget: Item Content
                         skin_include( _item_content.inc.php )
                         MY CONTENT

Custom manual skin (with functions.js, custom.css):

skin_include( _single.disp.php )
          skin_include( _item_block.inc.php )
          MY TITLE
               skin_include( _item_content.inc.php )                    <-------- This is extra
               MY CONTENT						<---------- duplicate comes in here
               Container: Item Single
                    Widget: Item Content
                          skin_include( _item_content.inc.php )
                          MY CONTENT

I can reproduce this bug by creating a fresh new manual collection using default settings and the skin altered to require loading the .js and .css.

May 27, 2016 16:24

Doh!

I fixed the issue. It turns out that I mixed up different versions of the skin. I was using an older version of the bootstrap manual skin as the basis for the custom skin in which I included this fix. And this clashed with the upgrade. Should have downloaded the new version and customized that.

In general are skin upgrades independent of system upgrades? If not does this mean that custom skins have to be manually redone with each upgrade? Or is this case an exception to the rule?

Sorry for the confusion!

geo


Form is loading...

powered by b2evolution free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.