Src=???? for image in placeholder html.

[LIU]

I have an accordion widget that I like but want to put a graphic in there and I still can't seem to figure out what code I need to include the image. The reason I want to use the code for the accordion widget I found is I can close it all the way, the widget included in Xara does not seem to be able to do that. Anyway can someone help? I have read through the placeholder help but can't seem to get it to work.

thanks!

Diana

[LIU]

I have no idea why the graphic is in there. Sorry

[steve.ledger]

..

[angelize]

Hi LIU

Can you post a.web or.xar file with the widget? or a link to the site where you got the widget from? There are many members here whom I'm sure would be glad to help you but you need to provide us with more information.

[LIU]

I got the code from this site
http://jqueryui.com/accordion/#collapsible

If you click on the eye you can see the code. What I want to do is replace the text with some graphics but I don't seem to be able to get the src=??? to link to a file on my computer. I read the instructions but it does not seem to work so I am sure I am doing something wrong.

This is the part that is baffling me from the help file.

Let's take a simple example to make this clearer. Suppose I want to insert a small piece of HTML code which adds an image to my website. The HTML code I add will need to reference the image file somewhere. First I copy the image file, say "myLogo.gif", into the support folder of my document. If the document is "mySite.web", the support folder will be "mySite_web_files". I know that when I export this website, I will export it to the name "mysite.htm". This means that all the generated images for my site, and a copy of "myLogo.gif" which I put in the support folder, will be exported to the folder "mysite_htm_files". Therefore I must make the HTML code I'm inserting reference the image file in that location. So I may insert:-

<img src="mysite_htm_files/myLogo.gif" />

Note that this references the image file in the exported image folder location (_htm_files), NOT directly in the support folder (_web_files), because only the exported image folder gets copied to the web server along with my web page when the site is published.

Diana

[gwpriester]

The image if you publish your website will most likely be in the index_html_files folder.

You can also place the image in your root directory (manually with Filezilla or another FTP application). And then the link would be yoursite.com/image.jpg

Otherwise it will be (assuming your folder is index_htm_files) yoursite.com/index_htm_files/image.jpg.

You will need to change the links to the appropriate site URL and image file name.

[Egg Bramhill]

The reason I want to use the code for the accordion widget I found is I can close it all the way

And the reason for wanting to do this, surely it's just going to leave a large empty space on your page?

[steve.ledger]

Use CTRL+SHIFT+ALT+A to attach your images to the xara file.
Then alter the accordion code to add the image link like this;

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
<img src=index_htm_files/image-name.jpg>
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
<img src=index_htm_files/image-name.jpg>
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
<img src=index_htm_files/image-name.jpg>
    </p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
<img src=index_htm_files/image-name.jpg>
    </p>
  </div>
</div>

Attached example (preview in Xara Designer)

Created in Web Designer 9 Premium.

[LIU]

And the reason for wanting to do this, surely it's just going to leave a large empty space on your page?

I like clean and with this method you can have some additional images/text that can be covered up when the accordion is open.

Thanks for the help I will give this a try.

[GerryI]

To clarify a couple of things:

The default name for the first page of your web site is always index.htm regardless of the name of the .web file. So, as people have pointed out, your support files should be in index_htm_files/. This will only change if you change the exported name of the first page of the site.

All of the code to handle placeholder snippets (including ones automatically generated by widgets) automatically modifies all instances of index_htm_files in the snippets to the actual name of the folder. So, you should always write your snippets using index_htm_files as you will then not have to do anything if you later change the name of the first page.

Using Ctrl-Shift-Alt-A, as described by Sledger, will result in the attached file being embedded inside the .web file rather than stored in the mysite_web_files support folder. For images, all that happens is the files are exported into the index_htm_files folder, but, for scripts (.js) and .css files, WD will also include the relevant HTML code in the head section to load the file. This means you do not need to add script tags that reference local javascript files and tags that reference local css in the head placeholder snippet. Instead, you can simply attach the file and WD will take care of it for you. This correctly shares files between different objects, so you can create two or more placeholder objects that use the same files (or multiple copies of identical placeholder objects) and the tags to include the files will only be included in the HTML page once. With the old support files method you have to handle clashes yourself, by placing shared resource tags in the page snippet section rather than in the object snippet section (or only include them in the head snippet of one of the placeholder objects). This can be quite awkward and is rather prone to breaking when editing the site so the "attach file" method is preferable.

In the placeholder code above, you should probably enclose the src= values in double quotes or the page is likely to fail validation (though it may still work, e.g.

<img src="index_htm_files/image-name.jpg">

Gerry