I have a number of jpg files within the images folder of my custom themes that are linked to a template. I can't see what is wrong but the images are appearing broken. I can only imagine I have the file path wrong:
<img src="images/leads.jpg" width="176" height="58" alt="leads" />
Similarly, I am trying to link images dynamically to the custom fields set on the relevant WP back-end page and nothing is appearing. I am using the following code in the template:
<img src='<?php echo get_post_meta($post->ID, 'sales', true); ?>' />
I have tried to link this to to the page "images/sales.jpg" in the custom field.
Many thanks in advance.
You must get the template_url first.
<img src="<?php echo get_bloginfo('template_url').get_post_meta($post->ID, 'sales', true); ?>/images/lead.jpg" width="176" height="58" alt="leads" />
In your theme, all the paths must be refereed as absolute paths. Try:
<img src='<?php echo get_stylesheet_directory_uri() . get_post_meta($post->ID, 'sales', true); ?>' />
How about this?
<img src='<?php echo get_stylesheet_directory_uri() '.images/.' . get_post_meta($post->ID, 'sales', true); ?>' />
Related
//index.html.php
<?php foreach ($view['assetic']->image(
array('#AppBundle/Resources/public/images/test.png')
) as $url): ?>
<div id="title">
<h1><a href="/home/#"><img alt="logo" src="<?php
echo $view->escape($url); ?>"> </a>
</h1>
</div>
<?php endforeach ?>
Above is my code in template after adding, I executed assetic:dump and it generated a images in web/images/ , still am not able to see images on my page. It is throwing 404 error for images.
Kindly let me know what going wrong here.
Note: Tried specifying image path in asset.yml and also LiipImagineBundle, nothing helped.
Assetics and assets are different.
do an bin/console assets:dump to put the resources of your bundle in the web directory then use your images like
<img src="<?php echo $view['assets']->getUrl('images/logo.png') ?>" />
I need your help to do this with my Magento website.
In my header.phtml file I have this code that shows logo.
<img src='<?php echo $this->getLogoSrc(); ?>' alt='<?php echo $this->getLogoAlt(); ?>' />
This logo it's ok for all pages of the website, but I need to have another one logo (different colors) for the homepage.
Homepage body has this specific class "cms-home" that maybe we can use to detect the page.
This is the url of the image I want to show: http://www.mydomain.it/skin/frontend/neighborhood/child/images/gm-home.png
Many thanks
In the header you can use getIsHomePage in a PHP if else statement to determine if the current page is the homepage or not:
<?php if ($this->getIsHomePage()):?>
<img src='<?php echo $this->getLogoSrc(); ?>' alt='<?php echo $this->getLogoAlt(); ?>' />
<?php else:?>
<img src='<?php echo $this->getLogoSrc(); ?>' alt='<?php echo $this->getLogoAlt(); ?>' />
<?php endif; ?>
Just amend the src in the first to link to your alternative logo.
This worked for me!
<?php
if(
Mage::getSingleton('cms/page')->getIdentifier() == 'home' &&
Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms'
) : ?>
<img src='http://www.mydomain.it/skin/frontend/neighborhood/child/images/gm-home.png' alt='<?php echo $this->getLogoAlt(); ?>' />
<?php else:?>
<img src='<?php echo $this->getLogoSrc(); ?>' alt='<?php echo $this->getLogoAlt(); ?>' />
<?php endif; ?>
I am trying to show image thumbnail of products in order view page.
For this I am using this line
<img src="<?php echo Mage::helper('catalog/image')
->init($_item,'small_image')
->resize(50); ?>" width="50" height="50" alt="" />
in this file
template/sales/order/items/renderer/default.phtml
what I get is the blank image of magento, this one -->
On firebug I get the image url as below
src="http://my_Website.com/media/catalog/product/cache/1/small_image/50x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
this is where that blank image is coming from.
Can anyone explain what's happening here and what's the possible solution.
Thank You very much in advance.
Try the codes given below:
First load the product
$_product = Mage::getModel('catalog/product')->load($_item->getProductId());
Then show the thumbnail where you want using the code given below
<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(75, 75); ?>" alt="<?php echo $this->htmlEscape($_item->getName()); ?>" border="0" width="75" />
This code is working fine try :
if($_item->getProductType() == 'configurable') {
$_product = $_item->getProduct();
}else{
$_product = Mage::getModel('catalog/product')->load($_item->getId());
}
?>
<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="" />
Make sure you have checked the appropriate radio button on the products media tab. There are three columns (Base Image, Small Image, Thumbnail) that need to be set to use that image as a thumbnail.
I want to call the image that loads into the larger view area of the magento product page.
In the product view page, I have more view images when clicked, it shows the image in the larger view, not in default pop up window. I want to call the full size image of whatever the image is loaded in the larger view area. Can someone tell me how do I do it?
I did some search and found
echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(163, 100);
But this gets only the image which was there by default. I want to be able to call any image that comes in the larger view area.
try this code
$this->helper('catalog/image')->init($_product, 'image')
this will get you the image on product view page.
ok I think this might save ur trouble. ITs Damn easy
Lets say ur main image area is <img id="main-image" src="main-image.jpg" />
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a class="grouped_elements" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(260,null) ?>"
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="group1">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(70,null) ?>"
width="70" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</li>
<script type="text/javascript">
//<![CDATA[
jQuery("a.grouped_elements").click(function(){
$('#main-image').attr('src', this.attr('href'));
});
//]]>
</script>
Hope this should help ...
I think u must check the file
app\design\frontend\base\default\template\catalog\product\view
& its declared as in the
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
this file gives u the Main Image & also the Gallery Images. of course u'll get only enabled images.
so What I understand from the subsequent comments. u need these images in a fancybox. there has to be a slideshow thing previou next etc. right??
ok Here it is what u can do. Create a new file under
app\design\frontend\base\default\template\catalog\product\view\fancy.media.phtml
(or u can use ur theme folder instead of base/default)
in ur catalog.xml add this block under
<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/>
<block type="catalog/product_view_media" name="fancy.media" template="catalog/product/view/fancy.media.phtml"/>
now in media.phtml u'll get all the images & there URLs. code the fancybox & pass the image url to it. &
& yeah don't forget to call this block in ur product page i.e.
app\design\frontend\base\default\template\catalog\product\view.phtml
by echo $this->getChilHtml('fancy.media')
I hope this must solve problem
UPDATE:
try this in fancy.media.phtml:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a class="grouped_elements" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(260,null) ?>"
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="group1">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(70,null) ?>"
width="70" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</li>
<?php endforeach; ?>
<script type="text/javascript">
//<![CDATA[
$("a.grouped_elements").fancybox();
//]]>
</script>
Please refer to the Docs of fancybox, fancybox how to
I think ur requirement is if somebody clicks on the More-views on product page it must get open in fancybox. Right?? so u can place this code in media.phtml also. no need to create a new file & no need to edit the catalog.xml.
If u make this working then feel free to accept my answer.
I got the desired result by adding a button on media.phtml
<a class="fullscreen" href="#image" onclick="document.getElementById('image').style.width='100%'; return false; " > <img src="<?php echo $this->getSkinUrl('images/zoom_full.jpg') ?>" alt="<?php echo $this->__('Full Screen') ?>" title="<?php echo $this->__('Full Screen') ?>" /></a>
<script type="text/javascript"> j(document).ready(function() {
j(".fullscreen").fancybox({ 'transitionIn': 'fade', 'transitionOut':
'none', 'overlayColor': '#fff', 'overlayOpacity':1,
'hideOnOverlayClick':false }); </script>
I am uploading 2 images for each product. Only 2 no more, no less.
1st image is product base image and will be displayed on product details page.
I am using following line to display this image:
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(180, 300).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
I am able to display the above image correctly.
Second image will be displayed in a pop up when a particular link is clicked. I do not want to display a gallery. Just want to display each image separately.
I think I found a way to retrieve array of images uploaded:
$productData = $_product->getData();
$secondImage = $productData['media_gallery']['images'][1];
Now, I am not sure how to display this image. I mean how to use helper, like I used for first image to make is display second image.
I've option to hardcode the complete path of image and use:
$secondImage['file'];
to display the image etc, but, I want to know if there is way, I can do it magento way ?
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php endforeach; ?>
Code lifted from:
http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/catalog/adding_lightbox_to_magento_v2
Note exactly the answer but obviously you can remove the foreach and simply supply the array's index if you know your only going to have one file.