[giees]

Czy istnieje szansa na podział pola odpowiedzialnego za upload zdjęć na dwie kolumny? W sytuacji gdy klient musi wrzucić kilkanaście zdjęć, to strona będzie się niepotrzebnie wydłużać.

[west]

Musisz przerobić tpl produktu czyli product.tpl - najlepiej ująć to w ostylowanie Bootstrap czyli np:

Kod: [Zaznacz]

class="col-xs-12 col-sm-4"

[giees]

Już mam:

Kod: [Zaznacz]

class="customizableProductsFile col-xs-12 col-sm-6 col-md-6"tylko, że nie o to chodzi.

Potrzebuję jakiegoś ograniczenia ilości wierszy, bo nawet gdy przerobię sobie ten element strony na 3,4 czy 5 kolumn, to i tak lista gdzie można wgrać pliki będzie w jednej kolumnie. Czyli np. przy 3 plikach do załadowania wszystko wyświetla się w jednej kolumnie, ale już dołożenie 4 pola wyświetla się w drugiej kolumnie - obok.

[west]

Widocznie źle zmodyfikowałeś szablon. Zobacz czy kontener ponad nie jest ograniczony do np. połowy strony

[giees]

To cały fragment dot. dostosowywania produktu:

Kod: [Zaznacz]

<!--Customization -->
<section class="page-product-box">
<h3 class="page-product-heading"><strong>{l s='Product'}</strong> {l s='customization'}</h3>
<!-- Customizable products -->
<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
<p class="infoCustomizable">
{l s='After saving your customized product, remember to add it to your cart.'}
{if $product->uploadable_files}
<br />
{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
</p>
<div class="row">
{if $product->uploadable_files|intval}
<div class="customizableProductsFile col-xs-12{if $product->text_fields|intval} col-sm-6 col-md-6{/if}">
<h5 class="product-heading-h5">{l s='Pictures'}</h5>
<ul id="uploadable_files" class="clearfix">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 0}
<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if isset($pictures.$key)}
<div class="customizationUploadBrowse">
<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
</a>
</div>
{/if}
<div class="customizationUploadBrowse form-group">
<label class="customizationUploadBrowseDescription">
{if !empty($field.name)}
{$field.name}
{else}
{l s='Please select an image file from your computer'}
{/if}
{if $field.required}<sup>*</sup>{/if}
</label>
<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
</div>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
{if $product->text_fields|intval}
<div class="customizableProductsText col-xs-12{if $product->uploadable_files|intval} col-sm-6 col-md-6{/if}">
<h5 class="product-heading-h5">{l s='Text'}</h5>
<ul id="text_fields">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
<li class="customizationUploadLine{if $field.required} required{/if}">
<label for ="textField{$customizationField}">
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if !empty($field.name)}
{$field.name}
{/if}
{if $field.required}<sup>*</sup>{/if}
</label>
<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
{if isset($textFields.$key)}
{$textFields.$key|stripslashes}
{/if}
{/strip}</textarea>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
</div>
<div class="submit">
<p class="pull-left clear required"><sup>*</sup> {l s='required fields'}</p>
<p id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<button class="button btn btn-default button button-small" name="saveCustomization">
<span>{l s='Save'}</span>
</button>
<span id="ajax-loader" class="unvisible">
<img src="{$img_ps_dir}loader.gif" alt="loader" />
</span>
</p>
</form>
</section>
<!--end Customization -->

[west]

jak możemy Ci pomóc Przecież to prosta modyfikacja

[giees]

Dla kogos, kto przepisal caly kod presty 15 razy moze i prosta. :-)

Czy chodzi o dodanie {assign var='nbItemsPerLine' value=2}?

[design4VIP]

najwazniejsze masz w 'col-xs-12'

operujac stalymi kolumn mozesz uzyskac zamierzony efekt. jak dobrze pamietam kiedyc w FAQ umieszczalem tutorial dla bootstrampa

[giees]

Przejrzałem tutorial dla bootstrampa, ale jestem za głupi, bo nie znalazłem tam rozwiązania. Bardzo fajnie opisane ustawianie podziału na ilość kolumn i ich szerokość, ale nie widzę nic o ograniczaniu długości (ew. ograniczaniu ilości wierszy).

[design4VIP]

Ale jezeli twoje col...12 podzielisz na dwie col...6 to jusz masz dwa wiersze

[giees]

Nie rozumiemy się. :-) To nie ilość kolumn jest problemem, tylko ilość wierszy. Gdyby klient miał do załadowania 50 zdjęć, to strona ciągnęła by się w dół w nieskończoność i żaden podział na col-6, col-4, czy col-3 tu nic nie zmieni. Zrzut ekranu powinien rozjaśnić sytuację :-)

[design4VIP]

ale przy tej metodzie, ktora stosujesz dajac mozliwosc wgrania zdjec to ty okreslasz a nie klient ile ma tych pozycji byc. wiec w czym problem przeliczyc ilosc kolumn == ilosc wierszy i zastosowac bootstrampa?

innym torem, jak chcesz sie bawic w ilosc wierszy to ja bedac programista bym sie zastanawial jak to ugrysc zeby bylo zgodne z responsive.... mozesz zastosowac np. polecenia for, if + foreach z @count... ale tych 'if'-ow bedzie nizliczenie wiele, zeby kazde takie ograniczenie @count-era zwracalo odpowiednie 'col=....' w odpowiednich rozdzielczosciach... poprzednie rozwiazanie jest laickie, ale nie wymaga wiekszej wiedzy w programowaniu. a mysle, ze jakbys by programista to ugryzl bys to juz dawno druga metoda

[endriu107]

W css zobacz column-count.