-
Posts
-
Hi Support,
I’ve found this description: https://kriesi.at/support/topic/remove-alt-text-on-image-hover-not-the-inside-the-code/
I tried the code suggested at the bottom by Vinay:
/*—————————————-
// Remove Image Title on hover
//————————————–*/function removeImageTitleOnHover(){
?>
<script>
jQuery(document).ready(function() {
var imgTitle;
jQuery(“img”).hover(function(){
imgTitle = jQuery(this).attr(“title”);
jQuery(this).removeAttr(“title”);
}, function(){
jQuery(this).attr(“title”, imgTitle);
});
});
</script>
<?php
}
add_action(‘wp_footer’, ‘removeImageTitleOnHover’);It removed the alt text from single images and even from normal galleries, but not from masonry.
See my page here: https://www.chironkft.net/konyhastudioknak/
The upper 2 images are a masonry, the 2 below are standard gallery. And the alt text is still showing up there.
Is it possible to remove them SEO friendly?Thanks
András
Hey mihand78,
Please try this function, it will remove the title on page load. Try adding this code to the end of your functions.php file in Appearance > Editor:function remove_masonry_image_title(){ ?> <script> (function($){ $(window).load(function(){ $('a.av-masonry-entry').removeAttr('title'); $('a.av-masonry-entry .av-masonry-image-container').removeAttr('title'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'remove_masonry_image_title');After applying the code, Please clear your browser cache and check.
Best regards,
MikeDear Mike,
yes that’s removing the title.
The solution I sent (suggested by Vinay) is said to be SEO friendly by not removing the code.
Is your solution also SEO friendly?BR
András
Hi,
Good point, on hover would be better, please try this code instead:function removemasonryImageTitleOnHover(){ ?> <script> jQuery(document).ready(function() { var imgTitle; jQuery("a.av-masonry-entry").hover(function(){ imgTitle = jQuery(this).attr("title"); jQuery(this).removeAttr("title"); }, function(){ jQuery(this).attr("title", imgTitle); }); jQuery("a.av-masonry-entry .av-masonry-image-container").hover(function(){ imgTitle = jQuery(this).attr("title"); jQuery(this).removeAttr("title"); }, function(){ jQuery(this).attr("title", imgTitle); }); }); </script> <?php } add_action('wp_footer', 'removemasonryImageTitleOnHover');Best regards,
MikeHi,
Glad Mike could help! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)Best regards,
YigitHi,
To apply this script to certain elements with a custom class, just add the custom class to the beginning of the sectors typically followed by a space. For example if your custom class is “test” then the code would look like this:function removemasonryImageTitleOnHover(){ ?> <script> jQuery(document).ready(function() { var imgTitle; jQuery(".test a.av-masonry-entry").hover(function(){ imgTitle = jQuery(this).attr("title"); jQuery(this).removeAttr("title"); }, function(){ jQuery(this).attr("title", imgTitle); }); jQuery(".test a.av-masonry-entry .av-masonry-image-container").hover(function(){ imgTitle = jQuery(this).attr("title"); jQuery(this).removeAttr("title"); }, function(){ jQuery(this).attr("title", imgTitle); }); }); </script> <?php } add_action('wp_footer', 'removemasonryImageTitleOnHover');Please try this, if it doesn’t work for you then please post a link to the page so we can check the sectors and ensure the correct placement in the code above.
Best regards,
Mikehola, no sabia donde iniciar mi duda.
Tengo un problema con una grilla de membresía y que esta configurada para dispositivos móviles, en el escritorio o la tablet funciona sin problemas, aparece el titulo de la entrada cuando pasas el raton por encima o tocas con el dedo en la tablet pero en el movil el titulo aparece siempre encima de la imagen y por otro lado estaría bien poder modificar el tamaño de los títulos dependiendo el dispositivo.Podeis verlo en https://promocionesygratis.es , entrando desde el movil lo veréis con el problema y desde otros dispositivos es como se debería de ver
Gracias de antemano y Saludos
Hi, I didn’t know where to start my doubt.
I have a problem with a membership grid (masonry) and that is configured for mobile devices, on the desktop or tablet it works without problems, the title of the entry appears when you pass the mouse over or touch with your finger on the tablet but on the mobile the title always appears above the image and on the other hand it would be nice to be able to modify the size of the titles depending on the device.You can see it in https://promocionesygratis.es, entering from the mobile you will see it with the problem and from other devices it is as it should be seen
Thanks in advance and greetings
Hi,
The masonry grid shows the titles on mobile because mobile devices do not have a hover event as desktop does.
To have the titles larger on mobile Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { #top.home #team #av-masonry-1 h3.av-masonry-entry-title { font-size: 2em !important; } #top.home #team #av-masonry-1 .av-masonry-date.updated { font-size: 1.5em !important; } }After applying the css, Please clear your browser cache and check.
Best regards,
MikeHola Mike , muchas gracias por tu respuesta.
El tamaño del titulo lo había modificado en masonry_entries a 0.8em para que se mostrara en su totalidad dentro de la imagen en dispositivos móviles en grilla 3row. Siguiendo tu consejo lo he vuelto a poner a 1.5em por defecto y he agregado tu código a css adicional para una mejor manipulación.Respecto al efecto de que el titulo aparece siempre en dispositivos móviles por que no tiene un evento de desplazamiento, como puedo corregir esto para que se vea igual en móviles, tablets o escritorio?
Con el plugin The Post Grid Pro lo muestra igual en todos los dispositivos, pero no me gusta duplicar funciones cuando ya la dispone por defecto el tema y agregar mas carga a la web.
Perdona mi ignorancia y gracias de antemano
SaludosHi Mike, thank you very much for your response.
The title size had been modified in masonry_entries to 0.8em so that it would be displayed in its entirety within the image on mobile devices in 3row grid. Following your advice I have put it back to 1.5em by default and I have added your code to additional css for better manipulation.Regarding the effect that the title always appears on mobile devices because it does not have a scrolling event, how can I correct this so that it looks the same on mobile, tablets or desktop?
With the plugin The Post Grid Pro shows it the same on all devices, but I do not like to duplicate functions when it already has the theme by default and add more load to the web.
Forgive my ignorance and thanks in advance
regardsHi,
Sorry, I don’t understand what your reference to “The Post Grid Pro” plugin is.Best regards,
MikeEn masonry con 3 columnas el titulo aparece siempre en dispositivos móviles por que para movil no tiene un evento de desplazamiento como me comenta usted anteriormente.
Puedo corregir esto para que se vea igual en móviles, tablets o escritorio?In masonry with 3 columns the title always appears on mobile devices because for mobile it does not have a scrolling event as you told me before.
Can I correct this so it looks the same on mobile phones, tablets or desktops?
- You must be logged in to reply to this topic.