Jump to content
samplephp

PHP integration image library

Recommended Posts

How to implement the library

I don't know how to implement  orientation of the image when the image is submitted

I want to automatically change the orientation of the image.

here's the links I tried:

here's my code
 

<?php

	include("../incs/config.php");

	$result = mysqli_query($link, "SELECT * FROM press ORDER BY press_date DESC");
	$result2 = mysqli_query($link, "SELECT * FROM event ORDER BY event_date DESC");
	$result3 = mysqli_query($link, "SELECT * FROM galleries ORDER BY gallery_id DESC");

	if (!isset($_COOKIE['user'])) {
		die("Identifiant invalide");
	}

?>
<!DOCTYPE html><html>
<head><meta charset='UTF-8'>
<meta name="robots" content="noindex">
</head>
<html>
<head>	
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/jquery-ui.css">
	<link href="../stylesheets/style.css" rel="stylesheet">
	<link href="stylesheets/style.css" rel="stylesheet">
	<script src="../js/jquery-migrate.min.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script src="../js/jquery.ui.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/tinymce/js/tinymce/tinymce.min.js"></script>
</head>
<body>
<!-- header -->
<header>
    <!-- nav -->
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.php"><img src="../images/logo.png" alt="Louise Groux"></a>
            </div><!-- / navbar-header -->
            <div>
				<ul class="nav nav-pills navbar-nav" style="font-weight:bold; padding-left:25px;">
					<li class="active"><a href="#presse-2" data-toggle="pill"><i class="fa fa-home"></i> Presse&nbsp;&nbsp;</a></li>
					<li><a href="#evenements-2" data-toggle="pill"><i class="fa fa-comments"></i> Événements&nbsp;&nbsp;</a></li>
					<li><a href="#galerie-2" data-toggle="pill"><i class="fa fa-cloud"></i> Galerie</a></li>
				</ul>
            </div><!--/ nav-collapse -->
        </div><!-- / container -->
    </nav>
    <!-- / nav -->
   </header>
<!-- / header -->
<!--<div class="container-fluid">
	<div class="row">
		<a class="navbar-brand" href="../index.php"><img src="../images/logo.png" alt="logo" width="50" height="50"></a>
	</div>
</div>
-->
<div class="container content-sm">
			<!-- Tab v3 -->
			<div class="row tab-v3">
				<div class="col-sm-9">
					<div class="tab-content">
						<div class="tab-pane fade in active" id="presse-2">
							<div class="container col-md-12"">
								<h1>Presse</h1>
								<div style="text-align:center;margin:40px;">Veuillez utiliser la page pour mettre à jour, ajouter et supprimer des articles de presse. Faites glisser pour changer l'ordre et n'oubliez pas de sauvegarder une fois terminé !</div>
								
								<ul class="list-unstyled">
									<li class="panel panel-info">
										<div class="panel-heading">
											<h5></h5>
										</div>
									<div class="panel-body">
										<form action="presse/add.php" method="post" name="form1" enctype="multipart/form-data">
										<div class="form-horizontal">
											<div class="form-group">
												<label class="control-label col-sm-2" for="title">Titre:</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" name='title' id="title" >
												</div>
											</div>
										</div>
										<div class="form-horizontal">
											<div class="form-group">
												<label class="control-label col-sm-2" for="sub_title">Sous-titre:</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" name='sub_title' id="sub_title">
												</div>
											</div>
										</div>
											<div class="form-horizontal">
												<div class="form-group">
													<label class="control-label col-sm-2" for="press_date">Date (invisible, pour l'ordre de la liste):</label>
													<div class="col-sm-10">
														<input type="text" class="form-control datepicker" name='press_date' id="press_date">
													</div>
												</div>
											</div>
										<div class="form-horizontal">
											<div class="form-group">
												<label class="control-label col-sm-2" for="type">Genre:</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" name='type' id="type" >
												</div>
											</div>
										</div>
										<div class="form-horizontal">
											<div class="form-group">
												<label class="control-label col-sm-2" for="type">Lien:</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" name='link' id="link">
												</div>
											</div>
										</div>
										<div class="form-horizontal">
											<div class="form-group">
												<label class="control-label col-sm-2" for="type">Image (150px x 150px): </label>
												<div class="col-sm-10">
													<input class="input-group" type="file" name="image"/>
												</div>
											</div>
										</div>
										  <input type="submit" name="Submit" class="btn btn-louisegroux pull-right" value="Ajouter"></button>
										</form>
									</div>
									</li>
								</ul>
<?php 
	if ($result->num_rows > 0) {

								//<button class="save btn btn-louisegroux">Sauvegarder l'ordre des éléments</button>

	}
?>
							<div id="accordion-resizer" class="ui-widget-content">
								<div id="accordion">
									 <ul id="draggablePanelList" class="sortable press_sort list-unstyled">
<?php
	while ($res = mysqli_fetch_array($result)) {
		$title = $res['title'];
		$sub_title = $res['sub_title'];
		$press_date = $res['press_date'];
		$type = $res['type'];
		$news_link = $res['link'];
		$image = $res['image'];
		$id = $res['id'];

		$title = stripslashes($title);
		$sub_title = stripslashes($sub_title);


?> 		
										<li name='item' id='item-<?php echo "$id"; ?>' class="panel panel-info"">
											<div class="panel-heading">
									        	<h3 class="panel-title pull-left">
													<?php echo "$title"; ?><span>, </span><?php echo "$sub_title"; ?>
							        			</h3>
							        			<a href="presse/delete.php?id=<?php echo "$id"; ?>"; ><button class="btn btn-danger clickable pointer pull-right" data-effect="remove"><span class="glyphicon glyphicon-remove"></span></button></a>
												<div class="clearfix"></div>
											</div>
											<div class="panel-body">
												<form name="form1" action=presse/edit.php?id="<?php echo "$id"; ?>" method="post" enctype="multipart/form-data">
												  <div class="col-md-3">
												  	<div class="form-group">
<?php
	if ($image != "") {
?>
												    	<img src="../images/presse/<?php echo "$image"; ?>" class="img-responsive" style="max-height:150px; max-width:150px;">
<?php
	}
?>
												    	<div class="clearfix"></div>
												    	<input class="input-group" type="file" name="image"/>
											  		</div>
												  </div>
												  <div class="col-md-9">
													<div class="form-horizontal">
														<div class="form-group">
															<label class="control-label col-sm-2" for="title">Titre:</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" name='title' id="title" value="<?php echo "$title"; ?>">
															</div>
														</div>
													</div>
													<div class="form-horizontal">
														<div class="form-group">
															<label class="control-label col-sm-2" for="title">Sous-titre:</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" name='sub_title' id="sTitle" value="<?php echo "$sub_title"; ?>">
															</div>
														</div>
													</div>
											<div class="form-horizontal">
												<div class="form-group">
													<label class="control-label col-sm-2" for="press_date">Date (invisible, pour l'ordre de la liste):</label>
													<div class="col-sm-10">
														<input type="text" name="press_date" value="<?php echo "$press_date"; ?>">
													</div>
												</div>
											</div>
													<div class="form-horizontal">
														<div class="form-group">
															<label class="control-label col-sm-2" for="type">Genre:</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" name='type' id="type" value="<?php echo "$type"; ?>">
															</div>
														</div>
													</div>
													<div class="form-horizontal">
														<div class="form-group">
															<label class="control-label col-sm-2" for="type">Lien:</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" name='link' id="link" value="<?php echo "$news_link"; ?>">
															</div>
														</div>
													</div> 
												  </div>	
												  <input type="hidden" name="id" value="<?php echo "$id"; ?>">
												  <input type="hidden" name="old_image" value="<?php echo "$image"; ?>">
												  <button type="submit" name="update" class="btn btn-louisegroux  pull-right">Mettre à jour</button>
												</form>
											</div>
										</li>		
<?php
	}
?>
						

 

Edited by samplephp

Share this post


Link to post
Share on other sites

Side comment: the image orientation should be fixed right when it's uploaded, not when it's being displayed to the user.

Share this post


Link to post
Share on other sites

OK, let's break this down. You state you want to automatically change the orientation of an image when it is submitted.

First of all, I don't see anything in that code related to image submissions. I would expect to see data relate to $_POST/$_FILES arrays on a page that handles submissions. OK, but let's say we have that code. How are you planning to determine the correct orientation to change to automatically? Functionally, it is not 'difficult' to change the orientation of a photo in PHP, but there is no functionality in PHP to "look" at a photo and know how to correct it. What you could do is allow a user to upload a photo and then present the photo back to them so they can determine if the orientation is correct. If not, give them the ability to "fix" it. This could be as simple as providing three buttons: rotate 90, 180, 270 which would just perform that one action OR you could provide some robust javascript front-end tools to 'manipulate' the image on screen and allow them to submit those changes. That would require PHP code to actually implement all the options you allow on the front-end.

Here is the PHP manual for the image rotation function. But, as stated above, you have to give the code some way to "know" how to rotate it correctly. I'm sure there are some third party applications (for $$$) that you could implement. Or, Google may have something for free you could tie into to try and determine the correct orientation. But, none of that would be simple.

Share this post


Link to post
Share on other sites

OK, so Google does have a product that you might be able to tie into: Vision AI.

I saw in a forum post that there is an enhancement request to detect image orientation, but I don't know if it is implemented yet. It does have face recognition and I would assume that would return a rectangle. So, if there are faces in a photo, the correct orientation should have the long sides of the rectangle(s) be vertical. But, you could inadvertently turn the picture upside down. :)

In any event, trying to explain how to use such a service is beyond the scope of a forum post. Good luck.

Share this post


Link to post
Share on other sites
7 hours ago, Psycho said:

How are you planning to determine the correct orientation to change to automatically?

Apparently from the EXIF information that's embedded in the image. When you take a picture with most intelligent cameras now, they include metadata in the image about the orientation of the camera. Since the photo is always upright with respect to the camera, one can use the metadata to rotate the image so that it's upright with respect to the photographer. Unfortunately the camera (software) manufacturers didn't stop to consider that maybe the camera should automatically flip the image and then use EXIF to give the "original" orientation...

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.