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>';
}
?>
Related
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 have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.
I have two include files:
1.draw_images.php
<?
function practice_area_img($img_path)
{
$items = "";
$files = glob($img_path . "/*.*");
for ($i=1; $i<count($files); $i++)
{
$num = $files[$i];
$items .= <<<HTML
<div class="item">
<img src="$num" class="img-responsive" alt="">
</div>
HTML;
}
return $items;
}
?>
The above code snippet goes through a folder and draws all the images therein into stylized div tags.
Please note here that I get the div blog-slider drawn, but the images fail. The image path is of this kind:
/opt/lampp/htdocs/my_project/images/my_pic.jpg
2.definitions.php
<?php
$rev_args['images_path'] = dirname(__FILE__) . '/images';
?>
I call them as follows:
<?php
include(dirname(__FILE__) . '/definitions.php');
include(dirname(__FILE__) . '/draw_images.php');
<div id="blog-slider" class="owl-carousel owl-theme">
<?= practice_area_img($rev_args['images_path']); ?>
</div>
How can I go about getting the image drawn?
UPDATE
Please nothe that <?= $num; ?> prints a something like /opt/lampp/htdocs/my_project/images/my_pic.jpg
so:
<img src="$num" class="img-responsive" alt="">
is actually :
<img src="/opt/lampp/htdocs/my_project/images/my_pic.jpg" class="img-responsive" alt="">
behind the scenes.
Without seeing the source of the generated html, the only thing I can see, is that the image paths are probably wrong.
You display the image using:
<img src="$num" class="img-responsive" alt="">
However, you look in the images/ directory of the script path to get them, so instead of just echoing the filenames, you should probably use something like:
<img src="images/$num" class="img-responsive" alt="">
Edit: Based on your comment, you would need something like:
$num = basename($files[$i]);
...
<img src="images/$num" class="img-responsive" alt="">
It is a absolute path problem in your img tag
<?
function practice_area_img($img_path)
{
$items = "";
$files = glob($img_path . "/*.*");
for ($i=1; $i<count($files); $i++)
{
$num = $files[$i];
// remove absolute path
$relPath = str_replace(dirname(__FILE__)."/", "", $num);
$items .= <<<HTML
<div class="item">
<img src="$relPath" class="img-responsive" alt="">
</div>
HTML;
}
return $items;
}
?>
This will produce:
<img src="images/my_pic.jpg" class="img-responsive" alt="">
which it will search the image under your server you can put in front of it
http(s)://localhost (servername) if you want to.
I have retrieved images from a folder and using fancybox plugin displayed all the images as picassa view.. only problem is how to bring all the retrieved images into one album. All the images are come one by one, because in while loop. I want all the images into a album. that is, if i have 4 images means, make all 4 into 'profilepic' album, here is my code..
PHP
//get all image files with a .jpg extension.
$images = glob($directory . "*.jpg");
//print each file name
foreach($images as $image)
{
echo $image;
?>
<a class="fancybox" rel="group" href="<?php echo $image; ?>"><img src="<?php echo $image; ?>" alt="" />
<?php
//echo "<a class='fancybox' rel='group' href='$image'><img src='$image' alt='' /></a>";
}
?>
SCRIPT
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
On a custom made product view page i'm working off from there is the base image (the large one) and a list of thumbnails which are other images associated with the product in the media gallery (they are just normal images and not the defined thumbnail), what i've been tasked to to is get it so that when you click on a thumbnail it'll change the base image above
i've got that working however i have a problem, when i change the image the image it changes to is very pixelated one, the base image is 737x578 originally so i understand that if the image is smaller it'll be stretched, however the images the thumbnails came from are roughly the same size as the original base image, it's just that they have been re-sized to be 48x48
looking at information in "view image info" in Firefox shows that the image's src is coming from the magento cache (media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/) and not from the original file i have in the media folder
the base image is being created like this
<a class="product-image image-zoom" id="main-image" title="<?php echo $this->htmlEscape($_product->getImageLabel()); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(737, 578).'" width="737" height="578" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
while the thumbnails are being generated like this
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
and this is the javascript i'm using to switch the images
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("src"));
});
});
what change would i need to make to my javascript in order to replace the base image with the original images used by the thumbnails, obviously just changing the src attribute in the tag isn't enough
When you click the thumbnail image, your jQuery is setting the src of the main image to the thumbnail image src (which is 48x48). A click on the thumbnail should set the main image to the large size of the thumbnail image.
So you need a way to reference the large image src from within the thumbnail image element. You can create an attribute called something like data-main-image-src inside the thumbnail image element so that you can reference that later in jQuery:
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(737, 578)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
Then you would modify your jQuery like this so that you change the main image src to be the larger image:
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("data-main-image-src"));
});
});
Manishie's answer almost worked for me, I guess with version 1.9 of Magento things might be a little different. I've updated the PHP as follows:
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
The main change is in how I've called data-main-image-src For some reason Manishie's version was calling in the src of the current main img for every thumb. Instead I've used the same method he used to call in the thumbs but called the large image instead:
data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>"
The jQuery was fine I just had to update the classes being targeted:
$j(".product-image-thumbs li img").click(function(){
$j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});