I'm trying to make all images be displayed side by side with the following code:
<div id = "all-container">
<?php
$dir = "images/";
$arr = scandir($dir);
foreach ($arr as $img) {
if ($img != '.' && $img != '..') {
echo "<div class = 'img-container'><img class = 'image' src = 'images/$img'></div>";
}
}
?>
</div>
This is class 'img-container' in CSS:
.img-container {
float: left;
display: inline-block;
}
Apparently, this seems to work when I set the image source to some random picture from the internet.
But when I use my own images, they're still displayed top to bottom.
The images I'm using are the Windows 7 Sample Pictures (1024 x 768 in size, JPG).
I tried many times, and if I just change the source of the image, it seems to work.
Is there something wrong with my code?
you should nest img tags like below:
<div class = 'img-container'>
<img class = 'image' src ='http://lorempixel.com/200/200'>
<img class = 'image' src ='http://lorempixel.com/200/200'>
</div>
But your code will create div tag with img-container class each time it repeats;
you will need to print out :
<div class = 'img-container'>
before foreach and
</div> /*end of img-container div tag*/
after it.
Related
I'm using the below code to pull through user uploads into a portfolio. It's working great however one image (out of a list of many) is showing blank - yet displays on the next page, using the same path, but within a conventional <img /> tag.
<?php
$files= glob('./uploads/users/'. $item->user_id .'/'.$item->id.'/public_large/*');
$count = 0;
$user_avatar = '/themes/users/assets/img/noartwork.jpg';
foreach ($files as $file) {
$count++;
if ($count > 0 && is_file($file)) {
$user_avatar = $file;
}
}
?>
<div class="user-img" style="background-image:url('<?php echo site_url($user_avatar); ?>');"></div>
When I inspect element on the image that's not displaying, if I change the single quotes background-image:url('<?php echo site_url($user_avatar); ?>'); to double background-image:url("<?php echo site_url($user_avatar); ?>"); it pulls through, but this is not the case if I make this change in the actual code.
Any help would be great.
Thanks
have you tried removing single quotes? like this :
background-image:url(<?php echo site_url($user_avatar); ?>);
I found the fix for this. It was to do with the users file name containing a special character that I wasn't checking for e.g. my-user's-image.jpg breaks the code as the character needs to be escaped my-user\'s-image.jpg.
I amended the foreach to run a check as below and this is now working.
foreach ($files as $file) {
$count++;
if ($count > 0 && is_file($file)) {
$user_avatar = str_replace("'", "\'", $file);
}
}
Thanks
I have this problem with a simple cms I'm working on:
I have a simple php function getting image elements from a specified directory, and printing them to the html
<?php if($row["imgs"] == TRUE){ ?>
<div class="imrow">
<?php
$dir = $row["folder"];
$img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
$tabing = 3;
$scale = sizeof($img);
for ($i = 0; $i < $tabing; $i++) {
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div><?php }//closing the first if of images ?>
(...)
<?php if($row["imgs"] == TRUE) { ?>
<div class="imrow">
<?php
for ($i = $tabing; $i < $scale; $i++) {
if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
echo '<img src="'.$img[$i].'" alt="image" />';
}
?>
</div>
<?php }//second if closing ?>
The style for images and rows:
.imrow {
display: block;
}
.imrow img {
z-index: 10;
float: left;
height: 100%;
cursor: pointer;
transition: transform .5s ease;
box-shadow: 1px 1px 12px rgb(200, 200, 200);
}
And are laid out using a simple jQuery function
$(".imrow").each(function () { // for every row
var row = $(this); //it gives it a name
var rowW = row.width(); //it seals it's width
var imgW = 0; //it sets a image width variable
var fixH = 600; //and get a fixed amount
row.children().each(function () {
$(this).css("height", fixH); //apply fixed height to element in order to get ratio
imgW += $(this).width(); //get the width of this and
$(this).css("height", "100%");
arr.push($(this).attr("src")); // restore
});
row.css("height", rowW / (imgW / fixH) - 2);
});
The problem here is the fact that some of the added Vertical images, turn out horizontal
Here's how it looks in a folder
And how it turns out in the website:
EDIT: This is a php only issue from what I see, because when I analyze the elements in chrome, the images are flipped by default inside, as you all can see here:
So my first bet goes on glob doing something wrong.
Has anyone experienced it, or knows a way to make glob get everything properly?
Bare in mind that this issue only happens to some of the images, and is not depended on the format of the displayed image.
Any help would be extremely useful
It appears the problem was metadata stored in the images that describe the correct orientation.
There is a image-orientation css property that is supposed to be used to display the image in the correct orientation, but it doesn't seem to be supported in all browsers.
The only other solution at the moment is to edit the image's metadata with a metadata editor or, as you have, to open the images in photoshop and save them.
I am using php to loop through and display all images from a directory. This works, however I want to add the image name underneath each of the images. I am struggling to get the text to center underneath it, as it seems to just place it next to it and appears to be in its own column separate to the image.
How do I go about fixing this? From research I've done the general solution seems to be placing them in a div together, I haven't done much php before but am I able to just stick the two echo statements inside of a div tag?
<div id="contentClothing">
<?php
function hoodie() {
$dir = 'images/clothing/hoodies/small/';
$files = scandir($dir);
$images = array();
foreach($files as $file) {
if(fnmatch('*.png',$file)) {
$images[] = $file;
}
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
foreach($images as $image) {
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<span>'.$image.'</span>';
}
}
?>
</div>
Here is the css
#contentClothing {
padding-bottom: 5%; /* Height of the footer element */
margin-left: 15%;
}
span {
text-align: center;
}
This is how it looks http://puu.sh/m8Zh0/6b0da6ec03.png
Instead of <span>, use <p> tag. Wrap the whole image and text inside <div> tag and apply your styles to it.
// your code
foreach($images as $image){
echo '<div style="text-align:center; float:left; clear:right;">';
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<p>'.$image.'</p>';
echo '</div>';
}
// your code
I'm using the basic way to doing the hover image as the CSS method doesn't work for me. Current I'm using the if/else statement to do so. If the contain the URL like abc.com it will hover the image.
But now I only can hover the group url but if there is sub categories in groups I won't able to hover, how can I do it all the activity inside the group, the image will hover?
How to doing if the URL contain the words or path. For example abc.com/groups/* it will hover the groups. Similar like we doing searching in MySQL the words/variable as using "%".
<?php
$request_url = apache_getenv("HTTP_HOST") . apache_getenv("REQUEST_URI");
$e = 'abc.com/dev/';
$f = 'abc.com/dev/groups/';
$g = 'abc.com/dev/user/';
?>
<div class="submenu">
<?php
if ($request_url == $e) {
echo '<div class="icon-home active"></div>';
} else {
echo '<div class = "icon-home"></div>';
}
?>
<?php
if ($request_url == $f) {
echo '<div class="icon-groups active"></div>';
} else {
echo '<div class = "icon-groups"></div>';
}
?>
</div>
I propose a javascript way to do so, with jQuery
$("a[href*='THE_URL_PATTERN_YOU_WANT_TO_MATCH']").children(".icon-home").addClass("active");
BTW, it is NOT a good idea to wrap a div into a a tag.
Ok, Hopefully this makes a little sense. I have a changing amount of images within a folder which I use php to discover. The images that are found are then passed on to my javascript as variables for location and total number of files found in the given folder.
An array consisting of the various image locations is made and then used to create the new images that are appended to a already existing div.
The question would be how can I separate the appendChild part of the function so that it could be called after the full array had been built rather than appending every iteration. The hope in doing that would be to show a loading gif while the collection was being assembled and once that was to done append the array to the document as a whole instead of as each file is loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
enter code here`<HTML>
<HEAD>
<TITLE>Use PHP in HTML files</TITLE>
<?php
$dir = "images/";
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
$filecount = count($files);
}
uasort ( $files , function ($a, $b) {
return strnatcmp($a,$b); // or other function/code
}
);
print_r($files);
?>
<script language="javascript" type="text/javascript">
function map(id){
var photos = [];
var test = <?php echo json_encode($files); ?>;
var elements = <?php echo $filecount ?>;
for (i=0;i<=elements;i++){
photos[i] = new Array("images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
}
</SCRIPT>
<style type="text/css">
.container {
position: absolute;
height: 664px;
width: 1024px;
left: 0;
top: 125px
}
#loadingBar {
position: absolute;
top: 30%;
left: 30%;
z-index: 100;
}
</style>
</HEAD>
<BODY>
<button id="lower_level" onclick="map(this)">Click This Confused Button</button>
<div id="container"></div>
</BODY>
</HTML>
Sorry for the hard to follow variable names. Feel free to chop up the code as much as you'd like. Just explain why things were changed! Also the php code is creating two elements that I don't understand "." and "..".
Elements "." and ".." means current and parent directories.
At the beginning of your function you can hide div:
document.getElementById("container").setAttribute("style","display:none");
and add yor loading gif.
After you function you hide your gif adn show div.
...
function map(id){
document.getElementById("container").setAttribute("style","display:none");
var photos = [];
var test = ;
var elements = ;
for (i=0;i<elements;i++){
if(test[i] '.' || test[i]'..')
continue;
photos[i] = new Array("../myProject/web/uploads/images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];
image = document.getElementById("container").appendChild(image);
}
alert(elements);
document.getElementById("container").setAttribute("style","display:block");
}
...