In my MySQL database, the image links are saved in the format like http://www.old.com/image1.jpg. But I had to change the domains of the images and the new links appear like images.new.com/image1.jpg. I have been changing the images links with jQuery with the following function:
$(document).ready(function() {
$('img').each(function() {
var src = $(this).attr('src');;
$(this).attr('src', src.replace('www.old', 'images.new'));
});
});
But I am wondering is there any way to change part of the URL strings with PHP. I am getting the image URLs with the following PHP function.
<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC");
$images = $imageQuery->fetch_all(MYSQLI_ASSOC);
$images = array_chunk($images, 2);
?>
<div class="row">
<div class="col-4" id="box1">
<?php foreach (array_column($images, 0) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
<div class="col-4" id="box2">
<?php foreach (array_column($images, 1) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
</div>
With PHP how can I echo the new links for the images directly here in the img src? <img class="img-fluid" src="<?= $image['imageURL']; \\modified link here ?>">
PHP has it's own method for replacing strings, str_replace. The equivalent to your jQuery in PHP is:
str_replace('www.old', 'images.new', $image['imageURL'])
A better idea would be to update the values in your database.
An even better idea would be to not store the duplicate root URLs anywhere, and stitch them together in the application if you need absolute URLs, for some reason.
You could alternatively convert the text in the sql select statement:
SELECT REPLACE(imageURL, 'www.old', 'images.new') AS imageURL FROM ...
By using AS imageURL none of the rest of the code would need to change.
I have the following code
<figure>
<?php if ($data[$i]->thumbnail) { ?>
<img src="<?php echo $img ?>" width="465" height="300" alt="news-report-juli19" title="" />
<?php } ?>
</figure>
I want to display images from mysql database dynamically,
the image_field_name=thumbnail.
I have 10 records in db and all have different images.
You should have to given the image path as well when you want to display.
<?php if ($data[$i]->thumbnail) { ?>
<img src="<?php echo base_url('path_of_img/$img'); ?>" width="465" height="300" alt="news-report-juli19" title="" />
<?php } ?>
If you use the Codeigniter framework, please try this.
In controller
$data['images'] = $this->model->get_images();
$this->load->view('view_name', $data);
In model you should make get_images() method that get image urls.
In view
<?php
foreach ($images as $value) {
echo '<img src="'.$value['thumbnail'].'" width="465"
height="300" alt="news-report-juli19" title="" />';
}
?>
Good luck.
use query variale with db colmn where images are present
use this in source img src
echo $query_variable['db_coln_name']
I want to create Gallery using Photoswipe plugin but I want to show thumbs and images automatically form folder.
Photoswipe requires the size of the image, so I want the script to take the size of each image.
Pictures in folder are numbered from 0-14 and it showing images but I don't know how to take size of each image from gallery/ and put it to: data-size="'.$imageSize.'":
<?php
$dir="gallery/";
$thumbsDir="gallery/thumbs/";
for($i=0; $i<=14; $i++)
{
echo
'<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="'.$dir.$i.'.jpg" itemprop="contentUrl" data-size="'.$imageSize.'" data-index="'.$i.'">
<img src="'.$thumbsDir.$i.'.jpg" width="412px" itemprop="thumbnail" class="img-responsive img-thumbnail">
</a>
</figure>';
}
?>
This should look like this: data-size="1920x1080".
You want to make use of getimagesize(), for example.
<?php
$dir="gallery/";
$thumbsDir="gallery/thumbs/";
for($i=0; $i<=14; $i++)
{
if (!file_exists($dir.$i.'.jpg')) continue;
list($width, $height, $type, $attr) = getimagesize($dir.$i.'.jpg');
echo
'<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="'.$dir.$i.'.jpg" itemprop="contentUrl" data-size="'.$width.'x'.$height.'" data-index="'.$i.'">
<img src="'.$thumbsDir.$i.'.jpg" width="412px" itemprop="thumbnail" class="img-responsive img-thumbnail">
</a>
</figure>';
}
?>
I wrote a code which is retrive image paths and display on the website in bootstrap grid style.But it does not showing the image. Code is working fine, Please help me. here is my code
<div class="row">
<?while ($row = mysql_fetch_assoc($query)) {?>
<div class = "col-md-3">
<?php echo $row['keywords'];?>
<?php $imagePath = $row['video_url'];?>
<?php echo $imagePath;?>
<div id="video_thumbnail">
<a href="#" class="thumbnail">
<?php echo '<img src="' . $imagePath . '">'; ?>
<img src="<?php echo file_dir . '/' . $imagePath; ?>" height="100" width="100"/>
</a>
</div>
</div>
<?php } ?>
</div>
unless file_dir is a constant using DEFINE, I suspect it's because you didn't put a $ in front of it $file_dir
You are also displaying two files. One with the file path and one without.
Chances are, the mysql query is returning a path which is not linked ....
ie <image src="myImage.jpg" /> is not the same as <image src="images/myImage.jpg" />
As #pmahomme said, right click the element and check the pat and if need be add the additional requirements
I'm working on a project in which I want to display randomly any given number of results suppose, I have six <html> tags of image and I only want to display three randomly so that every time we refresh the page it show randomly any three image out of any six
I'm using html code for an example
<html>
<body>
<div class=1>
<a href="http://example1.com">
<div>
<img src="image1.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example2.com">
<div>
<img src="image2.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example3.com">
<div>
<img src="image3.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example4.com">
<div>
<img src="image4.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example5.com">
<div>
<img src="image5.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example6.com">
<div>
<img src="image6.jpg">
</div>
</a>
</div>
</body>
</html>
Out of this Six Images I only want to show any three Images Each time through php. Is it possible and how can I do that?
Hope you may find any better solution.
Also i want to display Other tags like link inthe image and some more tags so that i can display images in a better way through css so I think it can be done by switch statement more easily
Let's say you have a array with all the images. From that list, we randomly get the keys for 3 of the images. We then through a loop echo out the img tag:
<html>
<body>
<?php
$images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg',
'image6.jpg'
];
// Selects 3 random array values and returns the key for each value
$randomkeys = array_rand($images, 3);
// Here we loop through the given index keys from the $images array.
// For each key we will then get the value from $images with the index $key
foreach ($randomkeys as $key) {
// I end with PHP_EOL (End of line) so the source code will look a bit prettier.
echo "<div class=\"image\"><img src=\"{$images[$key]}\"></div>".PHP_EOL;
}
?>
</body>
</html>
If something was unclear, let me know
Edit 1: Added more tags
It's not hard to add more tags to the output. If you know how to echo string and variables you should be able to easy add more tags or change them the way you want.
As you can see in the update I have added the class image to the , and made the link to the same path as the image so when you click it it will just open the image in the same window.
<?php
$images=array('image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg');
shuffle($images);
for($i=0;$i<=2;$i++){
echo '<img src="'.$images[$i].'" />';
}
?>
Just expanded Morten's code:
<html>
<body>
<?php
$images = array(
array('img' => 'image1.jpg', 'url' => 'http://example1.com', 'div' => 'class="d1"'),
array('img' => 'image2.jpg', 'url' => 'http://example2.com', 'div' => 'class="d2"'),
array('img' => 'image3.jpg', 'url' => 'http://example3.com', 'div' => 'class="d3"'),
array('img' => 'image4.jpg', 'url' => 'http://example4.com', 'div' => 'class="d4"'),
array('img' => 'image5.jpg', 'url' => 'http://example5.com', 'div' => 'class="d5"'),
array('img' => 'image6.jpg', 'url' => 'http://example6.com', 'div' => 'class="d6"')
);
// Selects 3 random array values and returns the key for each value
$randomkeys = array_rand($images, 3);
// Here we loop through the given index keys from the $images array.
// For each key we will then get the value from $images with the index $key
foreach ($randomkeys as $key) {
// I end with PHP_EOL (End of line) so the source code will look a bit prettier.
echo '<div class="1">' . PHP_EOL . '' . PHP_EOL . '<div ' . $images[$key]['div'] . '>' . PHP_EOL . '<img src="' . $images[$key]['img'] . '">' . PHP_EOL . '</div>' . PHP_EOL . '</div>' . PHP_EOL;
}
?>
</body>
</html>
Result:
https://3v4l.org/OAc6l
Like #AbraCadaver said.
<?php
// vim: set ts=4 sw=4 et:
$myImages = array_map(function($i) { return "/foo$i.jpg"; }, range(1, 6));
foreach (array_map('htmlspecialchars', array_map(function ($i) { global $myImages; return $myImages[$i]; }, array_rand($myImages, 3))) as $image)
echo "<img src=\"$image\"/>\n";
You can keep your src paths in an array. Then you can use array_rand() function to get random array index.
For example:
<?php
$allImages = ["images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg"];
//this will return random keys of $allImages array
$randomKeys = array_rand($allImages, 3);
foreach($randomKeys as $key){ ?>
<div><img src="<?php echo $allImages[$key] ?> " ></div>
<?php
}
?>
This is how you can do this using php
In this case, you mean if the page is already prepared ( may be the page is external webpage, or another page which is being already designed) i would use Simple Html Dom. Download and include the folder to the project.
example.html
<html>
<style>
img{
width:100px;
height:100px;
}
</style>
<body>
<div class=1>
<a href="http://example1.com">
<div>
<img src="image (1).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example2.com">
<div>
<img src="image (2).jpg" >
</div>
</a></div> <div class=1>
<a href="http://example3.com">
<div>
<img src="image (3).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example4.com">
<div>
<img src="image (4).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example5.com">
<div>
<img src="image (5).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example6.com">
<div>
<img src="image (6).jpg" >
</div>
</a></div>
</body>
</html>
myphp.php
/**echo '<style>
img{
width:100px;
height:100px;
}
</style>';**/
//using Simple HTML DOM. This file is in Simple Html Dom folder downloaded
include('simple_html_dom.php');
// get DOM from URL or file
$html = file_get_html('example.html');// you can write your external website file here www.external.com/index.html
// find all link
foreach($html->find('a') as $e)
//echo $e->href . '<br>';
$image_with_link['link'][]=$e->href;
// find all image
foreach($html->find('img') as $e)
//echo $e->src . '<br>';
$image_with_link['image'][]=$e->src;
//for debugging
//echo '<pre>';
//print_r($image_with_link);
//echo '</pre>';
//loop number of times, here i want to display three images
for($i=0;$i<3;$i++){
//get random key from array
$rand=array_rand($image_with_link['image'],1);
//print 3 images with its links
echo '<a href="'.$image_with_link['link'][$i].'" />';
echo '<img src="'.$image_with_link['image'][$i].'" />';
}
Treat the code as one big string. Remove <HTML>, </HTML>, <BODY>, and </BODY> from that string. You can add them back whenever you want. Next, explode the string around "<DIV ". For the array that is created, add "<DIV " to the start of each element. You now have an array containing each div section which has each image and link you want. You can then pick ones at random from that array and insert as needed:
// remove HTML and BODY tags
$remove1 = str_replace("<HTML>", "", $original);
$remove2 = str_replace("<BODY>", "", $remove1);
$remove3 = str_replace("</HTML>", "", $remove2);
$cleaned = str_replace("</BODY>", "", $remove3);
// explode remaining code around "<DIV " so we have each division for each image
$codeArray = explode("<DIV ", $cleaned);
// with our code sectioned in an array, add "<DIV " back to the start
// of each element in the array
for ($x = 0; $x < count($codeArray); $x++){
$codeArray[$x] =. "<DIV ";
}
// the $codeArray now has $x elements of the sections that contain the
// links and images you want.
// You can now randomly grab the div's that you want, by
// Shuffling that array, pick the first X images you want, and then
// echo back out the code you want.
shuffle($codeArray);
echo "<HTML>";
echo "<BODY>";
for ($x = 0; $x < $whateverNumberOfImagesYouWant; $x++){
echo $codeArray[$x];
}
echo "</BODY>";
echo "</HTML>";