add an image into a simple list description

hey im looking to add an image into the description section of a simple list! any help would be fantastic thank you 

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.

4 hours ago, KwameAndCo said:

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.

I would be delighted to help you in the launch of your plugin, sounds fantastic. It's such a needed thing!!! Thank you very much @KwameAndCo

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

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

Enable this option > Save

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

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

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

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

Enable this option > Save

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

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

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!

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.

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)

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)

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

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.

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

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:

You can use this code to Custom CSS box

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

On 12/6/2023 at 1:59 PM, 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

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

Enable this option > Save

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

This worked like a charm. Thank you so much.