Jump to content

Plugin to add images to text block?

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I've been trying to replicate what you can see in the attached screenshot, with the icons inline with the text. Placing an image block by the text doesn't work, as they go out of alignment when the browser window is re-sized. I found some CSS for the job here https://insidethesquare.co/squarespace-tutorials/image-in-text but have had issues with the icon being cut off / not appearing / being too close to the text. I'd be quite happy to pay for a plugin for a no fuss solution - can anyone recommend one? I've been in touch with the designer who created the linked website with the example I'm trying to emulate, and she says she did it in Elementor. 

I'd also be up for any other solutions anyone might have! I see this done so often there must be ways and means....

Many thanks,

Khechog

Screenshot 2023-12-04 at 10.31.45.png

Link to comment
  • Replies 7
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

My ideal is

First, you add a Text Block > Enter Image url (here I used some random images on Pixabay)

image.thumb.png.90cdb62c4e6e7f447892425ff304559e.png

and make sure enter same image url in url box

image.thumb.png.dbfe5ac4a48168cbb976c9295856b849.png

then use some code to turn image url to image, like this

image.thumb.png.96a59affe5c26bf50a9f857b5097c601.png

see a demo: https://tuanphan3.squarespace.com/icon-next-by-text?noredirect

pass: abc

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

here is the code, you need to add it to Page Header Code Injection (DO NOT add to Custom CSS). Replace Text block id div#block....with your text block id. Use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#block-yui_3_17_2_1_1701688774020_10266 a').each(function() {
  var $t = $(this);
  $(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
  $t.attr({
      src: $t.attr('href')
    })
    .removeAttr('href');
   $(this).replaceWith(function(){
    return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
  
});
 
});
</script>
<style>
div#block-yui_3_17_2_1_1701688774020_10266 img {
    width: 40px;
    margin-right: 10px;
}
  @media screen and (min-width:768px) {
  div#block-yui_3_17_2_1_1701688774020_10266 p {
    display: flex;
    align-items: center;
}
  }
</style>

image.thumb.png.2b6deae30e2c3bbb007e77ac24784dd2.png

Edited by tuanphan
fix an issue

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
21 minutes ago, Khechog said:

Hi Tuan, I hope you're well. Maybe I'm doing something wrong, but the URL continues to show after everything's been added:

https://www.meditateinthewestmidlands.co.uk/classes-2024

Screenshot 2023-12-04 at 12.43.55.png

Updated above code. You can check again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.