Conversation
supportHi, I was updated to v2.9 and it changes the layout of my site. Instead of having a (small) image in the same line as the link, I now have an image with the link in the following line. Is that change intended? Can I restore v2.8’s behavior? Thanks a lot 🙂 This topic was modified 1 year, 3 months ago by bersbers .
Investigating this more deeply, I find the following difference (line breaks mine): v2.8: <li ...> <a class="vslm-link-image" href="https://example.com" title="My Title" target="_blank"><img src="https://example.com/my-image.png" alt="My Title"></a> <a class="vslm-link-name" href="https://example.com" title="My Title" target="_blank">My Title</a> <div class="vslm-link-description"></div> </li> v2.9: <li ...> <div class="vslm-link-image"> <a href="https://example.com" title="My Title" target="_blank"><img src="https://example.com/my-image.png" alt="My Title"></a> </div> <div class="vslm-link-name"> <a href="https://example.com" title="My Title" target="_blank">My Title</a> </div> </li> And that seems to really impact the spacing of links. Is that change here to stay? If so, is there a workaround for the previous behavior?
Changing the <div>s into <span>s fixed at least most of the problem. Similarly, adding “display: inline” seems to improve things.
Hi, I have wrapped all elements in <div> tags, so code structure is more clean this way. It was never intended to display the link image and the link itself on the same line. But with custom CSS this should be possible, instead of changing the plugin itself. If you want I can look into this further, and give you a CSS fix? Guido
Hi again, You can use this CSS to display the link image and link name on the same line. Please change the variables to your needs. /* Li with image */ #vslm li.vslm-li-image {margin-bottom:10px;} /* Li with image clearfix */ #vslm li.vslm-li-image::after {content:""; clear:both; display:table;} /* Link image */ #vslm li.vslm-li-image .vslm-link-image {float:left; margin-right:10px;} #vslm li.vslm-li-image .vslm-link-image img {width:40px; height:40px; padding:0;} /* Link name */ #vslm li.vslm-li-image .vslm-link-name {position:relative; top:5px;}
Thanks! You are perfectly right, images and names were not meant to be displayed in the same line by default – I had made them so by custom CSS myself. And I was able to fix that, too. For the record, this is close to what I am using now: #vslm div.vslm-link-image, div.vslm-link-image img, div.vslm-link-name { display: inline; } And then based on the size of images (pretty small, more like icons), I make some more minor adaptations and thats works well for me.
Investigating this more deeply, I find the following difference (line breaks mine): v2.8: <li ...> <a class="vslm-link-image" href="https://example.com" title="My Title" target="_blank"><img src="https://example.com/my-image.png" alt="My Title"></a> <a class="vslm-link-name" href="https://example.com" title="My Title" target="_blank">My Title</a> <div class="vslm-link-description"></div> </li> v2.9: <li ...> <div class="vslm-link-image"> <a href="https://example.com" title="My Title" target="_blank"><img src="https://example.com/my-image.png" alt="My Title"></a> </div> <div class="vslm-link-name"> <a href="https://example.com" title="My Title" target="_blank">My Title</a> </div> </li> And that seems to really impact the spacing of links. Is that change here to stay? If so, is there a workaround for the previous behavior?
Changing the <div>s into <span>s fixed at least most of the problem. Similarly, adding “display: inline” seems to improve things.
Hi, I have wrapped all elements in <div> tags, so code structure is more clean this way. It was never intended to display the link image and the link itself on the same line. But with custom CSS this should be possible, instead of changing the plugin itself. If you want I can look into this further, and give you a CSS fix? Guido
Hi again, You can use this CSS to display the link image and link name on the same line. Please change the variables to your needs. /* Li with image */ #vslm li.vslm-li-image {margin-bottom:10px;} /* Li with image clearfix */ #vslm li.vslm-li-image::after {content:""; clear:both; display:table;} /* Link image */ #vslm li.vslm-li-image .vslm-link-image {float:left; margin-right:10px;} #vslm li.vslm-li-image .vslm-link-image img {width:40px; height:40px; padding:0;} /* Link name */ #vslm li.vslm-li-image .vslm-link-name {position:relative; top:5px;}
Thanks! You are perfectly right, images and names were not meant to be displayed in the same line by default – I had made them so by custom CSS myself. And I was able to fix that, too. For the record, this is close to what I am using now: #vslm div.vslm-link-image, div.vslm-link-image img, div.vslm-link-name { display: inline; } And then based on the size of images (pretty small, more like icons), I make some more minor adaptations and thats works well for me.