add image code please!

Highlighted
New Member
14 0 0
can someone please provide the code to add an image to a standard text page!!!! Please and thank you!!! newbie canadian store operator! :)
0 Likes
Highlighted
Excursionist
99 0 4

Disclaimer. I am a noobie too. This is what I have done. Someone else may come in and tell you another way. If so, perhaps we both will learn.
This is how you are supposed to do it. However, it does not seem to work from within a page or a blog entry.


<img src="{{ 'myimage.gif' | asset_url }}" style="height: YYpx; width: XXpx" title="My image" />

So, what you have to do is substitute the real address for the part:


{{ 'myimage.gif' | asset_url }}

To do that you need the address of your own store.

First, click on an image in your website and call up its properties – on a mac you option click to bring up the contextual menu and select properties. Another way is to open the image in a new tab or new window. Another way, in Firefox, is to choose the menu “Tools” and select “Page info” and examine the links.

What you are looking for is a string:
/files/shops/xxxx/nnnn/assets/myimage.gif
this is the address of your shop in shopify

For instance, the picture in the header on my site is:
http://www.barbsart.ca/files/shops/0000/9166/assets/barbs-logo4.gif

Now that you have your address you can insert the following code:


<img src="/files/shops/xxxx/nnnn/assets/myimage.gif">

Now if you want to specify the image size and border then you can:

<img src="/files/shops/xxxx/nnnn/assets/myimage.gif" width="400" height="454" border="0">

Finally, you may want to add a caption, title and alt tag:
<img src="/files/shops/xxxx/nnnn/assets/myimage.gif" width="400" height="454" border="0" title="Here is my image" alt="Here is my image"><br>
<em>Here is a caption for my image.</em>

To see what this would look like, you can see the story that I took these dimensions from:
Barb’s Painting Helps Raise Funds for Peace

Good luck, eh!

Leo in Victoria www.barbsart.ca--Beautiful art for a wonderful planet
2 Likes
Highlighted
New Member
14 0 0

It Worked!!!!! Thank you so much! Beautiful web site btw!

0 Likes
Highlighted
New Member
19 0 0

Here’s a lengthier reference to Textile formatting that works in Blogs, Pages, and Product Descriptions: http://hobix.com/textile/

If you want to stick to Textile formatting (instead of HTML) you can do something like this:


!http://www.barbsart.ca/files/shops/0000/9166/assets/barbs-logo4.gif(Here is my image)!

which will show up like this:
Here is my image

Unfortunately I don’t think there is a way to specify the image’s dimensions using this method.

0 Likes
Highlighted
New Member
31 0 0

Unfortunately I don’t think there is a way to specify the image’s dimensions using this method.

The official demo version of Textile at http://www.textism.com/tools/textile/index.php seems to insert the image width and height automatically. However, the Shopify Textile implementation doesn’t behave the same way. I wonder if the demo is using a modified version of the code??

Meanwhile, the development version of Textile at http://textile.thresholdstate.com/ supports the use of {style} so you could theoretically do something like this:

!{width:50px;height:50px}/image.gif!

although it’s not very neat and probably not as well-supported as the standard width and height attributes.

0 Likes
Highlighted
Shopify Partner
253 0 1

You are encouraged not to use width/height attributes in XHTML. They aren’t needed unless you want to resize the image, which you should do in the image itself and not the markup.

Cliff Spence
0 Likes
Highlighted
New Member
11 0 0

What if you want to center the immage???

http://www.golfcarttiresnmore.com
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 146

If you want to center an image it should be done through the css file. Viewable and editable through the theme editor. It will be listed in the uploaded assets and called screen.css or stylesheet.css. It sounds like you may need to hit the library and do a bit of reading before you get started and it will save you a ton of headaches. Also online this one should get you some basic background to get you going. CSS Cheat Sheet

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
New Member
11 0 0

Thank u, but I dont think I’m gonna be able to do this. I just want a store, I didnt know I was going to have to learn code…

http://www.golfcarttiresnmore.com
0 Likes
Highlighted
New Member
1 0 0

hi, 

I tried doing this but I have no clue where the code goes. I have put it into the layout for password.liquid I want to add an image on the password page. 

but its either at the very bottom or very top of the page how do I insert it into the middle ? there is a line of text just saying {{content_for_layout}} where is this referring to ? I feel like I need to put it into that area but I can't find it. 

thank you 

0 Likes