Immagini ridimensionate non visualizzate correttamente
Salve,
Ho un problema nel visualizzare correttamente delle immagini ridimensionate e caricate in una pagina web:
Stavo lavorando sul codice originale di un template free per adattarlo alle mie esigenze e rendere il sito dinamico.
Questo il codice della pagina index.html che ho modificato:
Codice HTML:
<!DOCTYPE html>
....
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/default.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Header -->
<header id="header">
<div class="intro">
<div class="container">
<div class="row">
<div class="intro-text">
<h1>Magnum</h1>
<hr>
<p>Graphic Design • Illustration • Photography</p>
<a href="#about" class="btn btn-default btn-lg page-scroll">Learn More</a> </div>
</div>
</div>
</div>
</header>
<!-- Navigation -->
<div id="nav">
<nav class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden"> <a href="#page-top"></a> </li>
<li> <a class="page-scroll" href="#about">About</a> </li>
<li> <a class="page-scroll" href="#portfolio">Portfolio</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</div>
</nav>
</div>
<!-- About Section -->
<div id="about">
<div class="container">
<div class="section-title text-center center">
<h2>About Me</h2>
<hr>
</div>
<div class="row">
<div class="col-md-12 text-center"><img src="img/about.jpg" class="img-responsive"></div>
<div class="col-md-8 col-md-offset-2">
<div class="about-text">
<p>....</p>
<a href="#portfolio" class="btn btn-default btn-lg page-scroll">My Portfolio</a> </div>
</div>
</div>
</div>
</div>
<!-- Portfolio Section -->
<div id="portfolio">
<div class="container">
<div class="section-title text-center center">
<h2>Portfolio</h2>
<hr>
</div>
<div class="categories">
<ul class="cat">
<li>
<ol class="type">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".graphic">Graphic Design</a></li>
<li><a href="#" data-filter=".illustration">Illustration</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
</ol>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3 illustration">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/02-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Title</h4>
</div>
<img src="img/portfolio/02-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 graphic">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/03-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Title</h4>
</div>
<img src="img/portfolio/03-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 graphic">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/04-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Title</h4>
</div>
<img src="img/portfolio/04-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div id="contact" class="text-center">
<div class="container">
<div class="section-title center">
<h2>Get In Touch</h2>
<hr>
</div>
<div class="col-md-8 col-md-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Name" required="required">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" id="email" class="form-control" placeholder="Email" required="required">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="form-group">
<textarea name="message" id="message" class="form-control" rows="4" placeholder="Message" required></textarea>
<p class="help-block text-danger"></p>
</div>
<div id="success"></div>
<button type="submit" class="btn btn-default btn-lg">Send Message</button>
</form>
</div>
</div>
</div>
<div id="footer">
<div class="container text-center">
<div class="fnav">
<p>Copyright © Magnum. Designed by <a href="http://www.templatewire.com" rel="nofollow">TemplateWire</a></p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/nivo-lightbox.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Sotto il codice php che ho aggiunto alla pagina index.php
Codice:
....
<!-- portfolionew-->
<?php
include 'config.php';
$sql = "SELECT nome, descrizione, galleria, imagelarge, imagesmall, data FROM images ORDER BY data DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
// Format the date to DD/MM/YYYY
$formattedDate = DateTime::createFromFormat('Y-m-d H:i:s', $row['data'])->format('d/m/Y');
echo '<div class="col-sm-6 col-md-3 col-lg-3 ' . htmlspecialchars($row['galleria']) . '">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/' . htmlspecialchars($row['imagelarge']) . '" title="' . htmlspecialchars($row['nome']) . ' - ' . htmlspecialchars($row['descrizione']) . ' - ' . htmlspecialchars($formattedDate) . '" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>' . htmlspecialchars($row['nome']) . '</h4>
</div>
<img src="img/portfolio/' . htmlspecialchars($row['imagesmall']) . '" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>';
}
} else {
echo '<p class="text-center">Nessuna immagine trovata.</p>';
}
$conn->close();
?>
</div>
</div>
</div>
</div>
.....
Il problema è che le immagini non vengono visualizzate come nel template originale, si vedono più grandi anche se le dimensioni sono identiche, ma dovrebbero essere più piccole.
Probabilmente il codice php "ostacola" i tag css in qualche modo, ma visto che non metto mano a codice per siti web da una vita
e lo faccio solo per hobby, non riesco ad individuare la causa del problema.
Il template free orginale:
https://themewagon.github.io/magnum/
Potete aiutarmi ad individuare il problma per piacere?
