2.0 - multiple product images lined in one row

When you upload more than 6 product images and select the product through the customer interface the images lined to one row and overlaps the product description.
It looks ugly and can't be fixed by CSS since each image sits in a <td> of a <tr> element.

Yes I would like to know how to fix that myself...I use 2.20

Views\Catalog\_ProductDetailsPictures.cshtml

edit that file, you should be able to put them into a DIV or UL tag to suit your needs. See below...

@if (Model.PictureModels.Count > 1)
    {
        <ul class="YOURCLASS">
                @foreach (var picture in Model.PictureModels)
                {
                    <li>
                        <a href="@picture.FullSizeImageUrl" rel="lightbox-p" title="@Model.Name">
                            <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                        </a>
                    </li>
                }
        </ul>
    }

How does the bug fixing process usually work for people?
If I fix the bug locally, it'll be overwritten with the following release if it's not checked in and the fix is not accepted yet, right?
What if I have bunch of changes in different places?
How do you guys handle it?

just copy the files over into a theme... make your changes there. worst case scenario is that you may have to tweak them a little if an upgrade breaks them.

Change the code to the following, this will make rows of 4 pictures each.

@model Nop.Web.Models.Catalog.ProductModel
@{
    Html.AddScriptParts(@Url.Content("~/Scripts/slimbox2.js"));
    
}
<div class="picture">
    @if (Model.DefaultPictureZoomEnabled)
    {
        <a href="@Model.DefaultPictureModel.FullSizeImageUrl" rel="lightbox-pd" title="@Model.Name">
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" style="border-width: 0px;" />
        </a>
    }
    else
    {
        <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" style="border-width: 0px;" />
    }

@{ var x = 1; }
@if (Model.PictureModels.Count > 1)
    {
  <table style="margin-top: 10px;">

              @foreach (var picture in Model.PictureModels)
              {
        
    if ((x==1) || (x==5))
     {
      <text><tr></text>
     }
    if (x==5)
     {
      x=1;
     }
    
    
        <td align="left">
                        <a href="@picture.FullSizeImageUrl" rel="lightbox-p" title="@Model.Name">
                            <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                        </a>
                    </td>
    x=x+1;
    }

        </table>
    }
</div>