Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Place a Simple <img> in a .phtml File Using the Correct Syntax, php or Straight <img> ? 
 
tomown
Jr. Member
 
Total Posts:  20
Joined:  2013-01-13
 

Hey magers,

Nice easy one for you this evening… I’ve been using a pretty slack method of adding images to my layouts by using dreamweaver and selecting the relevant path for the image. This then generates a goliath path with a bunch of slashes and dots, I mean it works, but this can’t be best practice.

I’ve sniffed around a bit, probably not enough… and come across various methods of calling an image, including calling on the media and theme folders. None of them seem to be working, the threads I’m getting the info from are old. Can someone provide me an example of how a simple img to be added to a .phtml. I mean if it was html no problem, you know where your files are in relation to the images, but as the phtml files are buried I can’t work out how the linking happens.

Probably been asked here before but can’t find a working solution! Mager n00b. Much appreciated

 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 
tomown - 02 May 2013 02:48 PM

Hey magers,

Nice easy one for you this evening… I’ve been using a pretty slack method of adding images to my layouts by using dreamweaver and selecting the relevant path for the image. This then generates a goliath path with a bunch of slashes and dots, I mean it works, but this can’t be best practice.

I’ve sniffed around a bit, probably not enough… and come across various methods of calling an image, including calling on the media and theme folders. None of them seem to be working, the threads I’m getting the info from are old. Can someone provide me an example of how a simple img to be added to a .phtml. I mean if it was html no problem, you know where your files are in relation to the images, but as the phtml files are buried I can’t work out how the linking happens.

Probably been asked here before but can’t find a working solution! Mager n00b. Much appreciated

You may have figured it out by now but here it is anyway

<img src="<?php echo $this->getSkinUrl('images/imageName.jpg');?>"/>

Here’s a helpful link also
http://www.webdosh.net/2011/04/magento-get-skin-url-get-media-url-get.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 

If you have tried that and are having problems, post a link and I’ll check it out.

 
Magento Community Magento Community
Magento Community
Magento Community
 
neopcs01
Jr. Member
 
Total Posts:  3
Joined:  2013-02-17
 

Sorry if I’m hijacking your thread, but I feel like we’re currently dealing with the same issue(s). Currently my dilema is actually resizing the width of col_right_callout.jpg when displayed on the right column, but I feel we seek the same general understanding. In an effort to help image quality, I proportionately made it’s pixel sizes bigger than what I need so I could then apply a simple width="195px" to it’s img tag. OK, I get that those tags are populated by the catalog.xml file located in /app/code/design/frontend/base/default/layout (I’m currently developing my first theme, I’m aware that’s not the best plan), but could you point me towards a guide explaining how to manipulate the XML files so I can somehow add the width in?

...unless of course you could tell me an easier way of accomplishing the same goal wink

Thanks,

Sean

 
Magento Community Magento Community
Magento Community
Magento Community
 
tomown
Jr. Member
 
Total Posts:  20
Joined:  2013-01-13
 

Hi thanks! That sorted it! Now calling <img> nice and cleanly using the above method. Thanks for the link as well should come in really useful.

@neopcs01… to add height and width you would just use the normal html img syntax alongside the url. The only difference is the img src part. Eg.

Standard call will use the actual images height and width defined by the image in your folder:

<img src="<?php echo $this->getSkinUrl('images/yourimage.jpg');?>"/>

To add height and width variables simply use:

<img src="<?php echo $this->getSkinUrl('images/yourimage.jpg');?>" alt="" height="100" width="100"/>

The xml stuff will take a while to get your head around! I’m still learning! If you just want to edit existing layout on your site then you don’t really need to edit the xml just the .phtml files, they behave exactly as html with the addition of php scripts. There’s a good intro series of lectures on magento u that’s free, a lot of information but worth watching if you truly want to understand what’s happening in magento.

Good luck!

 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 

I’m glad you got it worked out. However, just in case you didn’t know, it’s always better to just resize the image itself to the size you need rather than setting heights and widths smaller than the image. The reason is when the page loads, you are first downloading the actual size of the image, and then after the fact resizing it to be smaller. With most small sized images this isn’t a huge issue, but i’ve seen some people use GIANT photos and then resize them to be wayyy smaller so your user ends up spending all this time loading this huge picture and then it’s just displayed smaller anyway. If you can ever help it, make your photo the size you want it to display that way you are only loading what you need. It will make your website faster.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tomown
Jr. Member
 
Total Posts:  20
Joined:  2013-01-13
 

Thanks kmHelms, also @neopcs01, note if you compress the image size with html constraints that are not the native resolution/size it can display the image slightly pixelated. I do normally only work with native image size/resolution it’s just the previous poster asked so just wanted to demonstrate that it’s just like html. Good advice, thanks! smile

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top