Problem Images Plugin

Do you mean, the image buttons with the paperclips?

Is the issue that the image initally disappears when each one is hovered before the hover-state image loads?

If so, it should be simple to solve this by pre-loading the hover-state images. This can be achieved by a few different methods. Your friend should be able to modify the plugin and as they know how the plugin is built they should be able to work out the best method to achieve the preload.

Yes that’s the problem. The image desappears. I don’t know code. Can you help me?

My friend is not making himself avaiable to resolve this, in a year or more.

There are several ways to create such a plugin, and the code is not viewable. It is not easy to suggest the best way to fix it without access to the plugin. Is The person who created the plugin not able to fix it for you?

He isn’t. I can send you the plugin and the access to my website. I already gave up on my friend. He not even answear my questions in over a here. Do you have email?

All support should take place on the forums and it is against the forum guidelines to post email addresses here so I’m afraid I have had to remove your last post.

It looks like it should be a simple fix to preload the hover images, however I have not been able to test this.

Look in the code for where the CSS to add each image is defined

eg

#i-btn-1 .st {
	background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png') center no-repeat;
}

add the hover state image as an additional background before the standard image

#i-btn-1 .st {
	background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Branco.png') center no-repeat;
	background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png') center no-repeat;
}

Do this for each image and the hover images should be preloaded to prevent the fickering.

Hello! Sorry I didn’ know about the personal info, thanks for the notice. So in my plugin I have a two instances of css in my code

FIRST ONE

add_action(‘wp_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;
}
#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;

SECOND

</style>
<?php
});
add_action(‘admin_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;
}
#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;
}

IN WHICH I SHOULD PUT THE CODE YOU GAVE ME?

AND I ADD LIKE

#i-btn-1 .st {
background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#039;) center no-repeat;
}
#i-btn-1 .st {
background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Branco.png&#039;) center no-repeat;
background: url('https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#039;) center no-repeat;
}

?

Cheers,

Irina

• This reply was modified 7 years, 2 months ago by Anonymous User 9824923.

Hello! Sorry I didn’ know about the personal info, thanks for the notice. So in my plugin I have a two instances of css in my code

FIRST ONE

add_action(‘wp_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;
}
#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;

SECOND

</style>
<?php
});
add_action(‘admin_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;
}
#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;
}

IN WHICH I SHOULD PUT THE CODE YOU GAVE ME?

AND I ADD LIKE

#i-btn-1 .st {
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#039;) center no-repeat;
}
#i-btn-1 .st {
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Branco.png&#039;) center no-repeat;
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#039;) center no-repeat;
}

?

Cheers,

Irina

• This reply was modified 7 years, 2 months ago by Anonymous User 9824923.

Hallo. Thanks for the notice, I didn’t know about that data police. So I have two instances of css in my load php:

THIS ONE

</style>
<?php
});
add_action(‘admin_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;

AND THIS ONE

add_action(‘wp_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;

IN WHICH ONE I MUST ADD THE CODE YOU GAVE ME?

IRINA

• This reply was modified 7 years, 2 months ago by Anonymous User 9824923.
• This reply was modified 7 years, 2 months ago by Anonymous User 9824923.
• This reply was modified 7 years, 2 months ago by Anonymous User 9824923.

The block containing add_action(‘admin_head’, function() will add the code to the WordPress admin (however I’m not sure why it would be needed there), and the other will add it to the front end which governs what vistors will see.

So, assuming these are the blocks which contain the rules to add each image, it will either be the second block or both that need to be changed.

So first I try to add your code to the second block add_action(‘wp_head’, function()? And if it not works I add to the first block also?

The second block containing add_action(‘wp_head’, function() should add the code to the WordPress frontend, and the other will add it to the admin, although it wouldn’t normally be needed in admin.

Assuming these are the blocks which contain the rules to add each image, the code will need to be changed in the second block (or both if the code is also required in the WordPress admin)

So I’ll add it to both blocks. I need to change in one time for all images or I can just test to one image to begin?

SO I added your code to the blocks like:

FIRST BLOCK

add_action(‘wp_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;

text-indent: -9999px;
}
#i-btn-1 .st {
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Branco.png&#8217;) center no-repeat;
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#8217;) center no-repeat;
}

#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;
}

SECOND BLOCK

</style>
<?php
});
add_action(‘admin_head’, function() {
?>
<style type=”text/css” media=”all”>
.i-btn {
display: block;
text-align: center;
padding: 1em;
}
.i-btn a {
background-size: contain!important;
border: 0!important;
padding: 0!important;
display: inline-block;
height: 170px;
width: 170px;
text-indent: -9999px;
margin: 1px 1em;
}
#i-btn-1 .st {
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Branco.png&#8217;) center no-repeat;
background: url(‘https://irinasopas.com/wp-content/plugins/irina-buttons/inc/textos/Postit-Artigos-Preto.png&#8217;) center no-repeat;
}
#i-btn-1 .st {
background: url(‘<?php echo IB_DIR; ?>inc/textos/Postit-Artigos-Preto.png’) center no-repeat;
}

BUT THE PROBLEM REMAINS, THAT’S BECAUSE I’M JUST ADDING TO ONE IMAGE?

KISSES,

IRINA

RESOLVED