0

hace poco realize una pregunta de como enlazar una funcion con un card de bootstrap.

Lo que hace esta actualización es mostrarme todas mis fotos de mi base de datos en un diseño que yo especifico, (que en este caso serian los card)

Aquí el codigo de la funcion:

public function viewImages()
	{
		$SQLStatement = $this->DBConexion->prepare("SELECT * FROM productosima");
		$SQLStatement->execute();

		while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))
		{
		?>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
		<div class="row mx-auto p-3">
    
	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
		<div class="card ">
			<img src="<?php print($img['imagen']); ?>"
				 class="card-img-top" alt="Card image"/>

			<div class="card-block">
				<h4 class="card-title">This is a title</h4>
				<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
				<a href="" class="btn btn-success">Button</a>
			</div>
		
		</div>
	</div>	
	
		<?php 
		}
	}

Esto se ve así: Como se ve ahora

PROBLEMAS:

Las imagenes no se ajustan. No se agrupan horizontalmente.

Vale, entonces yo tengo este codigo estandar:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


        <div class="row mx-auto p-3">
    
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="card ">
                    <img src=""
                         class="card-img-top" alt="Card image"/>
    
                    <div class="card-block">
                        <h4 class="card-title">This is a title</h4>
                        <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                            camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                        <a href="" class="btn btn-success">Button</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="card">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                         class="card-img-top" alt="Card image"/>
    
                    <div class="card-block">
                        <h4 class="card-title">This is a title</h4>
                        <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                            camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                        <a href="" class="btn btn-success">Button</a>
                    </div>
                </div> 
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                <div class="card .img-fluid">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                         class="card-img-top" alt="Card image"/>
    
                    <div class="card-block">
                        <h4 class="card-title">This is a title</h4>
                        <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                            camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                        <a href="" class="btn btn-success">Button</a>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    

Que se muestra así:

Como me gustaria que se viera

Podeis ver como se me muestra y como me gustaría que se mostrar, a ver si me podeis hechar un cable amigos programadores.

5
  • Intenta no incluir los archivos de css y de js en cada iteracion de tu ciclo while incluyelos fuera de el. y comenta como te va. Cuando me refiero a fuera del ciclo quiero referirme a que lo pongas antes de la linea while y no despues del { <? Commented el 15 jul. 2019 a las 21:36
  • Me da error, Parse error: syntax error, unexpected '<' in i
    – Jack More
    Commented el 16 jul. 2019 a las 6:11
  • Ponlo pero con un echo ' y el código html de los link y los script y después cierras el echo con '; Commented el 17 jul. 2019 a las 13:12
  • Gracias, se ve igual, siguen estando verticalmente, sabes algo para que las imagenes tengan un tamaño estandard, y si es mas grande de lo permitido que se haga mas pequeña. Gracias de antemano.
    – Jack More
    Commented el 17 jul. 2019 a las 20:25
  • EL problema es que creo que esta en una funcion, entonces lo de mostrarse horizontalmente desaparece.
    – Jack More
    Commented el 17 jul. 2019 a las 21:11

1 respuesta 1

0

Según la experiencia que yo tengo, creo que es más optimo crear un campo de texto en tu base de datos que guarde la ruta de la imagen. Supongamos que en tu base de datos tienes una tabla llamada galería, esta tiene un id, un campo nombre, un campo descripcion, y uno llamado ruta, en ese campo que se llama ruta, colocaras la ruta que llevara a la imagen que estas guardando. Un ejemplo de esto es cuando hacemos lo siguiente a la hora de registrar dicha imagen.

/*Aqui definimos los tipos de imagenes permitidos y su peso*/
$types = array("image/jpg","image/png","image/gif","image/jpeg");
$limit = 4096 * 2048;

/*Aqui validamos si el archivo que se esta cargando coincide 
con los formatos especificados en el array $types*/

if (in_array($_FILES['image']['type'], $types) and $_FILES['image']['size'] <= $limit) {

/*Con esta variable le asignamos un nombre nuevo a la imagen que se esta cargando*/

$imagename = date('dmyhis')."_".mb_strtoupper(substr(md5(sha1($_FILES['image']['name'])), 0,8))."_IMG.png";

/*Con la variable $path le asignamos la ruta de destino a la imagen*/    

$path   = "views". S ."assets". S ."uploads". S ."img". S .$imagename; 
$path_  = "views/assets/uploads/img/".$imagename; 

/*Aqui con esta función la copiamos en nuestro destino*/
copy($_FILES['image']['tmp_name'], $path);

}

NOTA: La ruta es obviando la carpeta principal. Por ejemplo: "http://localhost/tuproyecto/" luego debes tener las carpetas creadas adentro de tu directorio raiz si solo tienes una carpeta "style" y adentro tienes una que se llama "img" pues cambias la ruta a lo que se adapte a tus necesidades. Como sugerencia deberías tener una constante declarada con tu ruta base.

Luego de que hagas esto haras un INSERT en tu tabla o un UPDATE (ya veras que te conviene) donde el campo ruta va a ser igual a $path_ cabe aclarar que esa variable llamada S es una constante que debes declarar primero antes de usar todo el código que mostré primero define('S', DIRECTORY_SEPARATOR);

Luego que tengas el registro hecho, paso seguido hagas tu SELECT y pongas a funcionar tu respectivo array ya sea con while o foreach, colocaras lo siguiente

<div class="imagen" style="background:url(http://localhost/tuproyecto/<?php echo $array['ruta'] ?>);"></div>

No uses img para mostrar la imagen porque se arrastra y pueden ver la ruta y todo eso, y tengo entendido de que no quieres de que eso suceda.

Ahora ¿Qué contiene la clase imagen?

.imagen{
    height: 150px;
    width: 150px;
    background-color: #BDBDBD;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
}

Luego para que se muestren horizontalmente debes meter el while adentro del div con tiene la clase row. Lo del .htaccess ya esta aclarado en la respuesta que emití aquí

Luego nos cuentas como te va.

4
  • Vale, muchas gracias voy a dedicar el dia a hacerlo. Por la noche te cuento como me ha ido.
    – Jack More
    Commented el 21 jul. 2019 a las 8:37
  • Una pregunta, el $path = "views". S ."assets". S ."uploads". S ."img". S .$imagename; $path_ = "views/assets/uploads/img/".$imagename; Tengo que cambiar el views/assets/uploads/img por el nombre de mis carpetas no? I otra pregunta el define('S', DIRECTORY_SEPARATOR); la tengo que declarar al principio en el mismo .php del codigo mas extenso? Gracias
    – Jack More
    Commented el 22 jul. 2019 a las 12:38
  • Exactamente, cambiaras el path y colocaras la ruta de tu carpeta. La constante si sería bueno que la declares al principio.
    – dorinix
    Commented el 23 jul. 2019 a las 21:20
  • no guarda ruta ni muestra imagen.
    – Jack More
    Commented el 27 jul. 2019 a las 10:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.