You see images in the list of a form

Question

You see images in the list of a form

Navigation

#1 by (0 votes)

1

As I show in the image of an example that I saw, I want to show an attached image when using a drop-down.

This is my table:

Schema::create('fotos', function (Blueprint $table){
        $table->increments('id');
        $table->string('foto');
        $table->string('nombre');
        $table->date('fecha');
        $table->timestamps();
    });

Being "photo" the variable that stores the route of the photo, which will be in public / download, so I have in Foto.php this function:

public function ruta(){
    return "bajada/".$this->foto;
}

And this is my form:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Publicar una noticia</div>

                <div class="card-body">
                    <form method="POST" action="subir_foto" enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="user_id" value="{{ auth()->user()->id }}"/>

                        <div class="form-group row">
                            <label for="foto_id" class="col-md-4 col-form-label text-md-right">Foto de Archivo</label>

                            <div class="col-md-6">
                                <select id="foto_id" class="form-control{{ $errors->has('foto_id') ? ' is-invalid' : '' }}" name="foto_id">

                                    @foreach($fotos as $fot)
                                        <option value="{{$fot->id}}" {{(old('foto_id') == $fot->id) ? 'selected' : ''}}>{{$fot->nombre}}</option>
                                    @endforeach
                                </select>

                                @if ($errors->has('foto_id'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('foto_id') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="titulo" class="col-md-4 col-form-label text-md-right">Título</label>

                            <div class="col-md-6">
                                <input id="titulo" type="text" class="form-control{{ $errors->has('titulo') ? ' is-invalid' : '' }}" name="titulo" value="{{ old('titulo') }}" required autofocus>

                                @if ($errors->has('titulo'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('titulo') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="texto" class="col-md-4 col-form-label text-md-right">Cuerpo de la noticia</label>

                            <div class="col-md-6">
                                <input id="texto" type="text" class="form-control{{ $errors->has('texto') ? ' is-invalid' : '' }}" name="texto" value="{{ old('texto') }}" required autofocus>

                                @if ($errors->has('texto'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('texto') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Subir Foto
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

laravel-5

asked by Miguel Alparez 05.10.2018 в 10:48

source

1 answer

Error calling a stored procedure (MariaDB) with parameter in Laravel 5.6 Help with putting together a query in Oracle?

score 0 · Answer 1

This does not solve everything, but I've already found how to make the photos look.

To start, the new form for the images:

<label for="foto_id" class="col-md-4 col-form-label text-md-right">Foto de Archivo</label>

<div class="select-sim" id="select-color">
    <div class="options">
        @foreach($fotos as $fot)
            <div class="option">
              <input type="radio" name="foto_id" value="{{$fot->id}}" id="foto_id" checked />
              <label for="color-">
                <img src="{{$fot->ruta()}}" style="width: 20px; height: 20px;" alt="" /> {{$fot->nombre}}
              </label>
            </div>
        @endforeach
    </div>
</div>

On the other hand, I have this code in .css format:

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}

And this is the result:

The problem is that this is just a casing and I can not switch between the available photos. How do I fix it? Also, it looks very small, you have to expand the size.