Place text & images above & below product picture when "listing" product in a category

Google does not like text within a product image.  I would like to use Content Manager to show additional text above & below product image when show product list within category.  Example below has text as part of image.  I would like to break it out of image.

https://mebulbs.biz/a/cd/full-power-4  is example.  Image did not show up in first post.

I'll see and answer you after 10 minutes.

What nopcommerce version do you use?
We plan to add new feature in this plugin and we want to know about the minimum release number...

Currently on 3.7

Ok.


You should add new lines in the file WidgetZones.xml.
  <WidgetZone>productdetails_before_one_picture</WidgetZone>
  <WidgetZone>productdetails_after_one_picture</WidgetZone>

Open the file _ProductDetailsPictures.cshtml
and add the next lines:

        @Html.Widget("productdetails_before_one_picture", Model.Id)
....
        @Html.Widget("productdetails_after_one_picture", Model.Id)

Example

    <div class="picture">
        @Html.Widget("productdetails_before_one_picture", Model.Id)
        @if (Model.DefaultPictureZoomEnabled)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
            </a>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
                    {
                        type: 'image',
                        removalDelay: 300,
                        gallery: {
                            enabled: true,
                            tPrev: '@T("Media.MagnificPopup.Previous")',
                            tNext: '@T("Media.MagnificPopup.Next")',
                            tCounter: '@T("Media.MagnificPopup.Counter")'
                        },
                        tClose: '@T("Media.MagnificPopup.Close")',
                        tLoading: '@T("Media.MagnificPopup.Loading")'
                    });
                });
            </script>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
        }
        @Html.Widget("productdetails_after_one_picture", Model.Id)
    </div>

Use CSS for styling.