CODEWITHSUNDEEP
phpcssimageechoedit
Sisa
Sisa

Reputation: 43

how do I resize or edit an echo image in php?

I'm quite a beginner in php.

This is my first individual project, just for practice. It's supposed to be a very simple eshop.

I wanted to make a catalogue of few products, so I created arrays with some values. I wanted to add a picture to each of the products and this worked perfectly, as long as I used the html emojis.

But I wanted to have real pictures there. Somehow I figured out the way BUT I have my CSS in a separate file and the style edit applies on the html emojis but doesn't apply at all on the jpg pics.

Could someone please help me solve this issue? I would like to style the images still in the CSS file. I'm using the php code below

My Code

.catalog-item {
width: 200px;
height: 300px;
background: rgb(65, 177, 214);
margin: 5px;
font-size: 15px;
font-family: Arial;
box-sizing: border-box;
text-align: center;

}

body {
display: flex;
}

.catalog-img {
display: block;
width: 200px;
height: 150px;
font-size: 100px;
font-family: Arial;
box-sizing: border-box;

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>


<?php

$TV = ["id" => "1", "name" => "TV", "img" => "<img src='img/TV.jpg'>", "price" => "1000 USD"];
$Computer = ["id" => "1", "name" => "Computer", "img" => "<img src='img/computer.jpg'>", "price" => "2000 USD"];
$Laptop = ["id" => "1", "name" => "Laptop", "img" => "<img src='img/laptop.jpg'>", "price" => "750 USD"];
$Camera = ["id" => "1", "name" => "Camera", "img" => "&#128247", "price" => "500 USD"];
$Phone = ["id" => "1", "name" => "Phone", "img" => "&#128241", "price" => "400 USD"];
$Smartwatch = ["id" => "1", "name" => "Smartwatch", "img" => "&#8986", "price" => "300 USD"];

  

$catalog = array ($TV, $Computer, $Laptop, $Camera, $Phone, $Smartwatch);
foreach ($catalog as $item){
    echo 
    "<div class='catalog-item'>
        <div class='catalog-img'>
        ".$item ["img"]."
        </div>
        <div>
        ".$item ["name"]."
        </div>
        <div>
        ".$item ["price"]."
        </div>
        <div>
        Buy
        </div>
    </div>";
    
    // print_r($item);
    // echo "<br>";
}
?>

Upvotes: 2

Views: 106

Answers (1)

Jeremiah S.
Jeremiah S.

Reputation: 421

my answer is mostly about fixing your code

now just create a class called product-image and you can apply your css to that. .product-image img {// your values here}

    $tv = ['id' => 1, 'name' => 'TV', 'image' => 'tv.jpg', 'price'=> 1000]; 
    $computer = ['id' => 2, 'name' => 'Computer', 'image' => 'computer.jpg', 'price'=> 2000];

    $catalog = [$tv, $computer];

    $data = '';
    foreach($catalog as $item)
    {
        $data .= '<div class="catalog-item">';
        $data .= '<img class="product-image" src="/img/' . $item['image'] . '" alt="' . $item['name'] . '">';
        $data .= '<div class="product-name">' . $item['name'] . '</div>';
        $data .= '<div class="product-price">' . $item['price'] . '</div>';
        $data .= '<button class="add-to-cart" data-id="' . $item['id'] . '">Buy</button>';
        $data .= '</div>';
    }

    echo $data;

Upvotes: 1

Related Questions