Jump to content

add an image into a simple list description

Recommended Posts

I'm actually working on a plugin for this.
You've spurred me on to complete it and publish it.

If you're interested in testing it and getting a free copy in exchange for a review and feedback, let me know.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

While waiting for the plugin, you can also try this quick approach to insert images

First, add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.list-item-content__description a:contains(".jpg")').each(function() {
  var $t = $(this);
   $(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
  $t.attr({
      src: $t.attr('href')
    })
    .removeAttr('href target');
   $(this).replaceWith(function(){
    return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
  
});
});
</script>
<style>
.list-item-content__description img {
    width: 150px;
    height: auto;
}
</style>

Next, edit each List Item >> Add Image URL

image.png.1a81a5cd84094f5a70cee813b3200494.png

Highlight image url > Click Link Icon > Paste same image url > then click Gear icon

image.png.8a862ee966eec37d0f9a1bab5a82167f.png

Enable this option > Save

image.thumb.png.ecde531b809ff3394ad1391f70be064e.png

Result. If it doesn't work, please share link to page where you use Simple List, we can check easier

image.thumb.png.bf9ffb9723252a6f50ba14039b16210b.png

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
  • 5 months later...
Posted (edited)
On 12/6/2023 at 8:59 AM, tuanphan said:

While waiting for the plugin, you can also try this quick approach to insert images

First, add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.list-item-content__description a:contains(".jpg")').each(function() {
  var $t = $(this);
   $(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
  $t.attr({
      src: $t.attr('href')
    })
    .removeAttr('href target');
   $(this).replaceWith(function(){
    return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
  
});
});
</script>
<style>
.list-item-content__description img {
    width: 150px;
    height: auto;
}
</style>

Next, edit each List Item >> Add Image URL

image.png.1a81a5cd84094f5a70cee813b3200494.png

Highlight image url > Click Link Icon > Paste same image url > then click Gear icon

image.png.8a862ee966eec37d0f9a1bab5a82167f.png

Enable this option > Save

image.thumb.png.ecde531b809ff3394ad1391f70be064e.png

Result. If it doesn't work, please share link to page where you use Simple List, we can check easier

image.thumb.png.bf9ffb9723252a6f50ba14039b16210b.png

Thanks @tuanphan! Is there a way to do this by uploading a local file on the actual website assets? 

Edited by sheena.levi
additional questions
Link to comment

Thanks @tuanphan! Is there a way to do this by uploading a local file on the actual website assets? 

And any way to style multiple photos? Like put them next to each other (instead of vertical) and click on them to view them bigger? Thank you!

Link to comment
On 5/28/2024 at 9:44 PM, sheena.levi said:

Thanks @tuanphan! Is there a way to do this by uploading a local file on the actual website assets? 

Strange. I remember I answered yesterday..

You can create a test page > Add Gallery Section > Upload image there > Save > Right click on image > Copy Image Address URL

On 5/31/2024 at 2:31 AM, sheena.levi said:

Thanks @tuanphan! Is there a way to do this by uploading a local file on the actual website assets? 

And any way to style multiple photos? Like put them next to each other (instead of vertical) and click on them to view them bigger? Thank you!

You can share link to page where you use List, I can check code easier.

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
  • 4 weeks later...
On 6/27/2024 at 5:43 PM, Mikala said:

Hi there

Is there an option to put an icon above the title of a simple list?

Would like to heave icons here (see screenshot)

image.png

When you edit List Section, it has an option Image, you can enable it then add your icon.

image.png.c6bc9d2e61407c2efd91bd05133f6b50.png

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
  • 2 weeks later...
On 6/29/2024 at 10:07 AM, tuanphan said:

When you edit List Section, it has an option Image, you can enable it then add your icon.

image.png.c6bc9d2e61407c2efd91bd05133f6b50.png

Thank you! How can I make it very small? More like an icon than an image? Now it looks like that:image.thumb.png.cb9ee1759d76cde4ad8255a75d780f41.png

Link to comment
On 7/8/2024 at 5:21 PM, Mikala said:

Thank you! How can I make it very small? More like an icon than an image? Now it looks like that:image.thumb.png.cb9ee1759d76cde4ad8255a75d780f41.png

You can use this code to Custom CSS box

.list-item-media {
    max-width: 100px;
    margin: 0 auto !important;
}

 

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.