I have made an code which is used to receive image from database and it's working perfectly. But now as user click's on the image it should be opened on a new page,and i have tried few thing but it's not working...
the below code id used to display the image
$query=mysqli_query($conn,"select * from images") or die("unable to
connect");
$i=1;
while($row=mysqli_fetch_array($query,MYSQLI_BOTH))
{
//echo '<img id="my" height="150" width="320" src="data:image;base64,'.$row['image'].' "> ';
echo '
<tr>
<t>'.#$row["id"].'</td>
<a target="_blank" href="09.jpg">
<img height="150" width="150" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>
<td>x</td>
</td>
';
$i++;
}
?>
Now here i want is when user click's on the image , a new page will show an enlarged image...
Don’t save image in database, save it as file in server then save the file name into database
You must be save image as two sizes, small and normal, the smal for display in table, when the user click on image, go to normal image
You can save one name in database, example (img1.jpg)
And in images directory save (sm-img1.jpg) and (img1.jpg)
The code
<a href="url/mydirectory/$row['image']" target="_blank">
<img width="150" height="150" src="url/mydirectory/sm-$row['image']" />
</a>
Or
<img width="150" height="150" src="url/mydirectory/sm-$row['image']" onclick="window.open('url/mydirectory/$row['image']', '_blank');" />
Related
My end goal is to create a gallery of Images that when clicked link to an external website. This needs to be done through Advanced Custom Fields, so I made a repeater that has the image and link in the same row:
link1 | cover_image1
link2 | cover_image2
Right now I'm inserting this code into a text editor inside my webpage. I also imported some short-code from here, that allows me to use %ROW% as an iterator.
"attachments" is the parent repeater and "link" and "cover_image" are the children.
[acf_repeater field="attachments"]
external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image']
<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>
[/acf_repeater]
The webpage renders this:
Where the broken image contains this code:
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214">
I think [acf field ='attachments_%ROW%_cover_image'] in <img> isn't resolving all the way to the url, as external url = and image url = both render the correct urls.
Wordpress also converts my code to this after saving, so its probably a syntax error?
[acf_repeater field="attachments"]
external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]
<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>
[/acf_repeater]
I'm not sure how to properly convert [acf field ='attachments_%ROW%_cover_image'] to a url in the <img> and I could use some help on the proper syntax. Thank you so much for you help!
html for the attribute per Arian:
<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa"
data-node="5d4926759d7aa">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Agenda: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&resize=640:*</p>
<p>Video Links: </p>
<p>Thumbnails: </p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" ]=""><br>
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" ]=""><br>
<img src="[acf" field="attachments_1_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" ]=""><br>
<img src="[acf" field="attachments_2_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
</div>
</div>
Not a wordpress guy, but seems like wordpress prevents expanding/executing shortcodes with parameters within html attributes, maybe this could work as workaround if you can put php code there:
<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>
<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>
Actually i found comment on this:
It appears it's using the same quotes for the HTML attribute and the shortcode's attributes that create problems.
at here
so this may work too:
<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>
or without shortcode quotes:
<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>
last option i can think of is creating parameter-less shortcodes like this:
function acflink_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');
function acfimage_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');
then using in editor like:
<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>
I am creating a webpage that has a photo gallery, which is a lightbox, that uses a lot of images - around 80-150 per page. The number of the images changes week by week, and I would like to have the website automatically populate the image gallery from the images in a subfolder, whilst including the code attached to the image to make it display correctly.
For example, this is what each images code will look like. And please note that i'll need the image located twice on each line.
<a data-fancybox="gallery" href="images/001.jpg"><img alt="" class="lazy" data-src="images/001.jpg" /></a>
I am attempting to use the below script, but it doesn't appear to be working.
<?php
$dirname = "../images/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
echo '<a data-fancybox="gallery" href="'.$image.'"><img alt=""
class="lazy" data-src="'.$image.'" /></a>';
}
?>
In this case for each line I have included the .$image. in two locations, inbetween the echo's but it doesn't seem to be working.
If you have any advice for me it will be greatly appreciated.
Your <img /> tag doesn't have the path set in the src attribute which is needed to render the image by the browser. It only has data-src attribute filled.
Should be:
<?php
$dirname = "../images/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
echo '<a data-fancybox="gallery" href="'.$image.'"><img alt=""
class="lazy" src="'.$image.'" data-src="' . $image . '" /></a>';
}
?>
$images['result'][0]['image_path'] - here I have path of image. It is in public folder.
<img width="150" height="150" alt="150x150" src="<?php BASEPATH."../public/" echo $images['result'][0]['image_path'];?>" />
Can anyone help me to display this image?
Try This,
<img width="150" height="150" alt="150x150" src="<?php echo base_url('your/Folder/Structure/').$images['result'][0]['image_path'];?>" />
First concate your file name with path which causing the issue.
base_url() will also help you to fetch/show your image
The following php script is used to load an image from the database! when the image is clicked an enlarged image appears but when i give height and width it remains the same large size! I want to reduce the size of the clicked image to
height=100 and width=100 Though i gave them it did not work
echo'<div class="ienlarger"><a href=../ordering/'.( $row['Image1'] ).' height=100 width=100><img src="../ordering/' .$row['Image1']. '" alt="thumb" class="resize_thumb" /><span>
<img src="../ordering/' .$row['Image1']. '" alt="large" height=500 width=500 /><br />
Copy-1</span></a></div>';
How can achieve this?
The reason why the clicked image isn't 100x100 is because there is no width or height attributes in the a tag. If you think about it, since a tag or anchors can link to all types of documents, including non-image files and non-html files (i.e. it could link to a file download). And in the case of a download, it wouldn't make sense to have a width attribute.
I would suggest if you really want this functionality, you could either create an image 500x500 resolution and create a similar one with a 100x100 resolution....
Or if you can't afford that space, you could create a javascript that does that. For example (not sure if it works):
<div class="ienlarger"><img src="../ordering/<?php echo $row['Image1'] ?>" alt="thumb" class="resize_thumb" />
<span>
<img id="sizable" src="../ordering/<?php echo $row['Image1'] ?>" alt="large" height=500 width=500 /><br />
Copy-1
</span>
<script>
document.getElementById("sizeable").onclick = function(evt)
{
evt.target.width = 100;
evt.target.height = 100;
};
</script>
</div>
As you can see, there is no image. What's wrong with this?
$displayProdCat .= '<div class="product">
<img src="Customer/images/product'.$ItemNo.'.jpg" width="170" height="150" />
<h3>'.$ItemName.'</h3>
<p class="product_price">Php '.$Price.'</p>
Add to Cart</div>';
Probably a wrong image url is specified. Look at the source.