Player picture showing twice

I’m also experiencing this if someone knows how to fix this that would be amazing.

https://sghmsrfc.co.uk/player/paros-loftus/

Hello, nice double picture ??

Use the developer tool from firefox, so you see that there is a css preload class. Fast way to fix, type/insert in your main.min.css

.preload-me {
width: 0px;
height: 0px;
}

best regards,
Michael

PS. Sorry works for: https://www.futsalclubveenendaal.nl/player/francis-nijhof/

• This reply was modified 7 years, 3 months ago by michael81170.

https://sghmsrfc.co.uk/player/paros-loftus/

Hi again,

see in your css flexslider.css line 31 folowing code

.flexslider .slides img {
width: 100%;
display: block;
margin-top: 0;
height: auto;
}

take width: 100% to 0%. check other sides, if you dont need this style you can delete them.

best regards,
Michael

• This reply was modified 7 years, 3 months ago by michael81170.

Hi Michael,

Thanks for your quick response. Unfortunately I can’t seem to get it work.

Where in the main.min.css should I add this code?

.preload-me {
width: 0px;
height: 0px;
}

Regards.

amazing! Works perfectly thanks a million

Tom

Hi @teh1aeq

You should add all custom css in our plugin field for that. Otherwise you`ll lose your custom code when you update.

Add the following code in your custom css field ( Wp admin > SportsPress > Settings > General > Custom CSS ) and let us know how it works:

.single-sp_player .preload-me {
	display: none;
}

Thanks!

Hi @rochesterj,

This works, thanks! The only thing is that it removes the website header as well. Any way to avoid this?

Thanks!

• This reply was modified 7 years, 3 months ago by teh1aeq.

Hi,

have you tried:

.preload-me {
display: none;
}

instead of:
.single-sp_player .preload-me {
display: none;
}

brg, Michael

Hi @michael81170,

I have tried the .single-sp_player one. If I use the first one, it doesn’t (pre)load any images at all, at any page. If I use the .single-sp_player code it doesn’t (pre)load any images at just the player page.

Is there any way to limit this to only the player picture?

Thanks in advance.

Hi!

Please kindly disable that code so we can see how the header should be. We can target the nth image if that’s going to help you as well.

Thanks!

Hi @rochesterj,

The header should be the same as on our main page (futsalclubveenendaal.nl).

Kind regards,
Stefan

Hello,

yes ?? but we must analyze the scriptcode inside the “old side, with double picture”. Why? At your Mainpage the scriptcode has:

<!– branding and wf-td are inside a stylesheet called css “cascading style-sheet” and there are the options to design –>
<div id=”branding” class=”wf-td”>

<!– this is the link target to website –>

<!– Here is some new stylesheet preload-me and retinized (design) and pictures for the responsive design –>
<img class=”preload-me retinized” srcset=”https://www.futsalclubveenendaal.nl/wp-content/uploads/2017/05/banner_365.png 1x, https://www.futsalclubveenendaal.nl/wp-content/uploads/2017/05/banner_365.png 2x” alt=”Futsal Club Veenendaal”

<!– And here is the normal header and it’s styled with preload-me and retinized before –>
src=”https://www.futsalclubveenendaal.nl/wp-content/uploads/2017/05/banner_365.png&#8221; height=”162″ width=”365″>

So you see your banner is designed with the stylesheet “preload-me” that is one design-option there are more style-classes before. If you set this we say class

.preload-me to display:none

you never see things that are styled with that class alone. So we must inspect on the original side why:

.single-sp_player .preload-me {
display: none;
}

display no more header (banner). Normally that means your header-picture on the “old side”: https://www.futsalclubveenendaal.nl/player/francis-nijhof/

is also styled (designed) with this 2 classes:
.single-sp_player .preload-me

^^^^^^^^^^^^ it is very important that your manual added “design” code have both classes, because this is a conjunction. That means only if both classes are inside a scriptcode only than the “design-code” works.

So if your manual code is:

.single-sp_player .preload-me {
display: none;
}

please delete them, than we can inspect, why your header have the same style-code and is there a better option to disable the preload-picture without losing the headbanner, perhaps there are some other functions as:

only a example!!!!
.single-sp-player .preload-me .td .img { display: none; }

best regards,
Michael

Hi Michael,

Thanks for your clear explanation. I have removed the manual code now.

Rgds.

hi,

can you please try this:

.content .preload-me {display: none;}

if you miss some pictures at other sides, delete above and try:
.single-sp_player .content .preload-me {display: none;}

best regards,
Michael

• This reply was modified 7 years, 3 months ago by michael81170.
• This reply was modified 7 years, 3 months ago by michael81170.

Hi Michael,

This works perfectly. Thank you all for your help!

Rgds.