_field_image.blade.php 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. {{--
  2. Partial: поле типа image — загрузка/замена изображения
  3. Переменные из родителя: $field, $prefix, $values, $imageUrl
  4. --}}
  5. @php
  6. $curVal = $values[$field['name']] ?? '';
  7. $curUrl = $imageUrl($curVal);
  8. $hasImg = $curVal !== '';
  9. $sizeHint = isset($field['width'], $field['height'])
  10. ? $field['width'] . '×' . $field['height'] . ' px, cover-кроп'
  11. : (isset($field['width']) ? 'макс. ' . $field['width'] . 'px по ширине' : 'макс. 1200px по ширине');
  12. @endphp
  13. <div class="form-group">
  14. <label>{{ $field['label'] }}</label>
  15. {{-- Скрытое поле: путь текущего файла (передаётся если нового файла нет) --}}
  16. <input type="hidden"
  17. name="{{ $prefix }}[{{ $field['name'] }}]"
  18. value="{{ $curVal }}"
  19. class="js-img-current">
  20. {{-- Превью текущего изображения --}}
  21. @if($hasImg)
  22. <div class="mb-2 js-img-preview-current">
  23. <img src="{{ $curUrl }}"
  24. class="img-thumbnail d-block"
  25. style="max-height:140px;max-width:220px;object-fit:cover">
  26. <small class="text-muted">{{ basename($curVal) }}</small>
  27. </div>
  28. @endif
  29. {{-- Кнопка выбора файла --}}
  30. <div class="custom-file">
  31. <input type="file"
  32. name="uploads[{{ $field['name'] }}]"
  33. class="custom-file-input js-img-upload"
  34. accept="image/*"
  35. id="upload-flat-{{ $field['name'] }}">
  36. <label class="custom-file-label" for="upload-flat-{{ $field['name'] }}">
  37. {{ $hasImg ? 'Заменить изображение' : 'Выбрать изображение' }}
  38. </label>
  39. </div>
  40. {{-- Превью нового файла --}}
  41. <div class="js-img-preview-new mt-2" style="display:none">
  42. <img src="" class="img-thumbnail d-block" style="max-height:140px;max-width:220px;object-fit:cover">
  43. <small class="js-img-new-name text-muted"></small>
  44. </div>
  45. <small class="text-muted d-block mt-1">
  46. <i class="fas fa-crop-alt fa-xs"></i> {{ $sizeHint }}, WebP
  47. </small>
  48. </div>