Images - JWalshe86/nags-with-notions4 GitHub Wiki
Using Card Decks:
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Took this code from stackoverflow_answer:
<div class="container">
<div class="col-md-4 px-0">
<img src="images/food1.jpg" class="img-fluid">
</div>
</div>
img-fluid didn't work but img-responsive did. This is because I'm using bootstrap 3.4.1
looks much better
All images looking better on mobile
Code:
<div class="card-deck">
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/margherita-for-mares.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/no-animals-here-resized.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/pony_soprano.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/feeling_blue.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/horse-to-france.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="media/sauces.jpg" alt="Card image cap" class='img-responsive'>
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
</div>
Going to adapt the following video into the img cards bootstrap responsive cards
- Wrapping all content in a container div to make it responsive
- Wrap all the columns in a row
- Used imagy.app to make all images 2:3 ratio
- Had to change img class back from card-img-top to img-responsive
- Setting class="col-lg-4 col-12 col-md-6" for each card made them responsive on all screens
- Used g for gutter in row to create space between cards
<div class="row g-3">
Need to resize 3 of the images
Resized the images
3 images are blurry though
Better on mobile
Removed blurry images
Going to try insert images to MYSQL
This is the db_conn.php code:
<?php
$sname = "localhost";
$uname = "root";
$password = "Sunshine7!";
$db_name = "ol5wws00_image_db";
/* The mysqli_connect() function establishes a connection with MySQL server and returns the connection as an object.
*/
$conn = mysqli_connect($sname, $uname, $password, $db_name);
if (!$conn) {
echo "Connection failed!";
exit();
}
when use PDO or mysqli_connect?
Test for upload with upload.php works
🎉 Image uploads successfully
Created test_db
Table
🐛 Locked self out of phpmyadin: generated change password for root & couldn't recall password generated & uninstalled LAMPP
Reinstalled XAMPP
Back in:
DBs still there
🎉 Back working for CRUD
Get root permissions error
Getting this error now:
Images uploading again:
Changed root password to Sunshine7! and set password to Sunshine7! in db_conn.php
Get this error
I had the image table spelt incorrectly
🎉
Set upload.php & view.php to connection.php
Images uploading to 'uploads' folder
But not showing in views.php
When upload.php includes the db_conn db it redirects to views.php but this doesn't happen when using connection.php.
I think this part is failing
I think it fails because mysqli_query doesn't work on PDO which connection.db uses
CREATE TABLE `users` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`image` VARCHAR( 25 ) NOT NULL
)
Image uploaded successfully to uploads file
<table border="2">
<tr>
<th>ID</th>
<th>Image</th>
</tr>
<?php
include "connect.php";
$select = $con->prepare("SELECT * FROM users ");
$select->setFetchMode(PDO::FETCH_ASSOC);
$select->execute();
while($data=$select->fetch()){
?><tr>
<td><?php echo $data['id']; ?></td>
<td><img src="uploads/<?php echo $data['image']; ?>" width="100" height="100"></td>
<?php
}?>
</tr></table>
<a href="index.php">Add new image</a>
only uploading one image & select.php doesn't work
Images upload
#
Only upload with:
<?php
try{
$con = new PDO ("mysql:host=localhost;dbname=imageupload","root","");
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "connected";
}
catch(PDOException $e)
{
echo "error:".$e->getMessage();
}
?>
Both tables work in same db
🎉
This code selects only passwords with the value 'test'
<?php
require('./connection.php');
$p=crud::Selectdata();
if (isset($_GET['id'])) {
$id=$_GET['id'];
$e=crud::delete($id);
}
if (count( $p)>0) {
for ($i=0; $i < count( $p); $i++) {
echo '<tr>';
foreach ( $p[$i] as $key => $value) {
if ($value == 'test'){
echo '<td>'.$value.'</td>';
}
}
?>
may look into checking if user is logged in
🎉 Session login messaged displayed
closed sessiong using google chromes - inspect - application - cookies - https://localhost - phpSESSID - delete
<?php
session_start();
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
echo "Welcome to the member's area, " . htmlspecialchars($_SESSION['name']) . "!";
} else {
echo "Please log in first to see this page.";
}
$url = "index.php";
echo "<a href='$url'>Add new Image</a>";
?>
🎉 got upload image btn working in php code using echo to print out html
Used How to add a href link in php
$url = "https://www.google.com/";
echo "<a href='$url'>Google</a>";
This produces html output
Going to make image gallery using mysqli instead- shows had to create dynamic images with bootstrap
All CDNS appear to work in index.html
Modal presents on screen
Connected successfully
Converter function works on chrome but not microsoft internet
Gives a chrome extension invalid error
$(function() {
// Validate image in client side
$("#image_upload").change(function (e) {
let file_ext = $(this).val().split(".").pop().toLowerCase();
let allowed_ext = ["jpg", "jpeg", "png"];
let file_size = this.files[0].size;
if(allowed_ext.includes(file_ext)){
if(file_size <= 1000000){
let url = window.URL.createObjectURL(this.files[0]);
$("#preview_image").html(`<img src="${url}" class="img-fluid img-thumbnail">`);
}
}
});
});
Image preview working
Image size too big working & upload button disabled
Error message for incorrect img types working
Array data associated to image displays
🎉 Images uploading to db & uploads folder
Progress bar working
Ajax testing successfull
fetch_all_images function gathering all the images data
wrapped image output in html
All images uploading successfully
Modal presents
Image object info shows on click
Modal pops up with image on click
Change image modal presents
Ajax response for edit image data successful
Previous values on edit present
Change images array displaying - old & new img data
🎉
Image updated successfully
// Remove image ajax request
$(".remove_image").click(function (e){
e.preventDefault();
let id = $(this).attr('data-id');
let img_url = $("#set_image").attr("src");
$.ajax({
url: 'action.php',
method: 'post',
data: { id:id, img_url:img_url, remove_image:1 },
success:function(response){
image_modal.hide();
fetchAllImages();
$("#delete_image_alert").html(response);
},
});
});
// Handle remove image ajax request
if(isset($_POST['remove_image'])){
$id = $_POST['id'];
$img_url = $_POST['img_url'];
if($db->removeImage($id)){
unlink($img_url);
echo $util->showMessage('success','Image deleted successfully!');
}else{
echo $util->showMessage('danger', 'Something went wrong!');
}
}
In Database.php
// Delete image method
public function removeImage($id){
$sql = 'DELETE FROM gallery WHERE id = :id';
$stmt = $this->conn->prepare($sql);
$stmt->execute(['id' => $id]);
return true;
}
}
🎉 Image deleted successfully
🎉 Image crud functionality working on deployed cpanel site