I have a series of images displayed on a page. They are being called from a mysql database. This part works fine. I then implemented a hover image with description using the following code:
...echo "<td>";?> <img src="<?php echo $row['image']; ?>" rel="imgtip[0]" height="100" width="125" title="<?php echo $row['title_tag']; ?>" /><?php echo "</td>";...
The rel="imgtip[0]" is the part that calls the hover image and description. This will only call the first image identified as '0'. I want it to change to rel="imgtip[1]", rel="imtip[2]" etc. so each hover image will relate to the one being called from the database.
I added a new field to the mysql database and added each rel as a new record. I then changed the php code to call the rel attribute from the database as follows:
...echo "<td>";?> <img src="<?php echo $row['image']; ?>" height="100" width="125" title="<?php echo $row['title_tag']; ?>" rel="<?php echo $row['img_tip'] ?>" /><?php echo "</td>";...
This time when I viewed the page no hover image appeared. Is there some way to call the rel attribute from the database so it will display the required hover images?
From your comment, it looks like the MySQL field img_tip contains the definition for rel= already. If that's the case, update your code as follows:
<img src="<?php echo $row['image']; ?>" height="100" width="125" title="<?php echo $row['title_tag']; ?>" <?php echo $row['img_tip'] ?> />
Related
I got a problem, I tried several times but I couldn't find a solution for this.
As you know, we can change product image size in System / Setting / Image, but it won't set to the size of product page. let me show you what I mean, Please check this image:
The exact size of Product Image Thumb Size is 770 x 228
So, even if we will set the same size in System/Setting/Image , it won't be fit perfectly and then we will face problem in responsive / mobile view...
Here is also mobile view:
so how can I set image size to be fit in width and height, maybe with css or java script ?
Here is the code for this specific section
<li><a class="France" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
in the root of:
catalog/view/theme/default/template/product/product.tpl
I really appreciate for any information and share your knowledge about it.
Thanks and cheers
Here, missing thumbnail css class according to OpenCart html css structure. So, You need to add thumbnail css class in <a> tag. Try following code & then check it.
<li><a class="France thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
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"));
});
Aim: to realize the product image auto change on mouseover action in the category grid view in Magento.
I'll apologize first that I am no coder, so please bear with me for my silly questions.
I figured the following code with realize the image change function:
<img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" />
However, I will need to determine whether there is a second image for the product first, then if there is, I will need to call out the URL of the second image for the function to work.
I guess it requires a piece of php code to do that.
I'd appreciate the help from anyone with the question.
Best Regards
Liang
PS: Here's a bit more info about the page.
Variables:
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
This is the bit of code which calls out the main/first image.
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 255); ?>" width="170" height="255" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
For Magento
To get OnMouseOver to change the image and show the default thumbnail in the product grid or list views, add the following code to the list.phtml file of your theme:
onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"
onmouseout="this.src='<?phpecho $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"
The new code will be:
<a href="<?php echo $_product->getProductUrl() ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"
class="product-image">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>"
width="135" height="135"
alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"
onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"
onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135,135) ?>';"/>
</a>
This can get the second image,but can't resize it.
<?php $_productImage = Mage::getModel('catalog/product')->load($_product->getId());foreach ($_productImage->getMediaGalleryImages() as $image) { $_productGallery = $image->getUrl();break;};echo $_productGallery; ?>
Good luck!
I have a Wordpress managed web site at http://www.urbanvision.org.uk/ I have built it and everything works like I want it to and I'm happy with the outcome as it is my first fully built Wordpress web site.
I've become stuck on a request I had at the start of the week.
We have a Properties for Sale page (http://www.urbanvision.org.uk/services/property-services/properties-for-sale/) the items on this page link to PDF downloads of plans and property details. However we now have a number of properties that need to be added that link not the PDF but to an external link.
The problem I have is the page template relies on custom fields managed by the plugin Advanced Custom Fields, the field to upload the PDF is a file upload field which will take a PDF but not an URL to another page or site.
I have tried to switch the custom field to an URL rather than an upload screen but not keen on this for 2 reasons, 1) i'd have go back through the other properties and copy the url into the changed field and 2) it becomes a little more difficult for colleagues to update.
I have also tried introducing a separate a field and working out which custom field should be pulled in:
If PDF file exists in property_details pull in the URL to PDF.
If URL exists in property_details_url pull in URL entered.
There are two parts of each post that need to link to further details (PDF or external URL). They are the thumbnail image and the view details link.
The code I had before (just linking to the PDF):
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=13');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<br />> > View Details</p><br />
The Code I have changed it to (still can't get it to work):
<?php $featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=12');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<?php if(get_field('property_details_url')){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
I also had a look at pulling directly from the MySQL database that Wordpress is using but really struggled to get the page to display without error.
As always, any help would be greatly appreciated.
your on the right track, but what to do is assign your customfield to a variable.
ie:
<?php
$prop_det_url = get_field('property_details_url');
if($prop_det_url!=''){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
hopefully the check should fine that the property_details_url has somthing other than nothing, it will show the link, if not it will show the other piece of code?
Marty
I have a PHP echo function inside of a HTML link, but it isn't working. I want to have an image location, defined in img src, be in part of the clickable link of the image. The page will have multiple images doing the same thing, so I am trying to use PHP to automate this.
<a href="http://statuspics.likeoverload.com/<?php echo $image; ?>">
<img src="<?php $image=troll/GrannyTroll.jpg?>" width="100" height="94" />
</a>
Turn
<?php $image=troll/GrannyTroll.jpg?>
into
<?php echo "troll/GrannyTroll.jpg"; ?>
?
Or provide more details on what you are trying to achieve.
Also, you might consider urlencode-ing some of those URL parameters.
Edit:
So you might try setting the variable beforehand:
<?php $image = "troll/GrannyTroll.jpg"; ?>
<img src="<?php echo $picture; ?>" width="100" height="94" />
So now i understand what you are trying to do.
One error is that you didn't enclose $image=troll/GrannyTroll.jpg with quotes like this:
$image = 'troll/GrannyTroll.jpg';
The second error is that you do it in the wrong order, you have to define $image first, before you use it.
That's what I believe you want to do:
<?php
$image = "troll/GrannyTroll.jpg";
?>
<img src="<?php echo $image; ?>" width="100" height="94"/>