Printable View
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
I have no idea why the graphic is in there. Sorry
..
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. :)
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.
Quote:
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
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.
And the reason for wanting to do this, surely it's just going to leave a large empty space on your page?Quote:
The reason I want to use the code for the accordion widget I found is I can close it all the way
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;
Attached example (preview in Xara Designer)Code:<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>
Created in Web Designer 9 Premium.
I like clean and with this method you can have some additional images/text that can be covered up when the accordion is open.Quote:
And the reason for wanting to do this, surely it's just going to leave a large empty space on your page?
Thanks for the help I will give this a try.
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
As I read it, I think the OP is describing and quoting from the support help of the third party widget as linked in post#5 rather than any Xara help text?
Correct - my bad..Quote:
Originally Posted by GerryI
The quoted text came from the Xara help file.
diana
Oh well, you've totally confused me then.. I thought you were trying to understand the code you got from the third party widget you linked to and the one I spent time figuring out for you?
Never mind, I learned something new even if I wasted your time, sorry about that :D
Good luck.
I don't think you did anything wrong, I think you've given him helpful advice. The extract of the WD help file he quoted isn't as clear as it could be. It implies that you have set the first page of your website to be called mysite.htm instead of the default index.htm which I believe is what has caused the OPs misunderstanding and problems...
Gerry
My bad. :OQuote:
It implies that you have set the first page of your website to be called mysite.htm instead of the default index.htm which I believe is what has caused the OPs misunderstanding and problems...
I am a her but that's ok;)
Sledger,
the advice was incredibly helpful, even though I still can't get an image to work. A couple of things that don't seem right....
I have a folder on my desktop called Website. In that folder I have 3 folders
1. index_htm files
2. webtest_htm_files
3. webtest_web_files.
the two htm folders contain the same images and Xara has renamed my images and given them all numbers.
This website is not published and I don't want it to be until I am done so I am not sure how the tip of Ctl. Shift Alt will work.
Given the setup of the files (see above) I used this bit of code and still no image.
<img src="index_htm_files/205.png">
Sorry this is so confusing I am new to web design, I don't know a whole lot and I am almost ready to give up on my idea.
UDATE!!! Yea it worked. Thanks so much everyone for the help! I did not know the Ctrl ...Alt A had to be when the placeholder object was selected. I was just playing around and it happened!=D>
Hi Sledger, tried your example and it works but something seems to be broken, you can't close your accordion as per the OP's original requirements.
I'd choose to use an external file and refer to them via an images folder:
Just goes to show Xara has always more than one way to skin a cat ;)Quote:
<img style="margin: 6px; float: left;" alt="pic1" src="images/1.jpg" height="99" width="141" />
I don't believe the OP wanted the whole thing to close and disappear. I believe she mean't 'collapse' (each section) - which it does nicely.
Yes, I should have mentioned that you need to select an object first to use the 'Attach File' feature.Quote:
Originally Posted by LIU
I agree Steve, but I find your web file doesn't collapse, it's always open. Am I missing something?Quote:
I don't believe the OP wanted the whole thing to close and disappear. I believe she mean't 'collapse' (each section) - which it does nicely.
I agree Steve but she did want it to collapse just to the menu (not disappear) which your's doesn't.Quote:
I don't believe the OP wanted the whole thing to close and disappear. I believe she mean't 'collapse' (each section) - which it does nicely.
Yes, one panel is always open. This is how the original also works, options to collapse all are amongst the other Examples on the original site as linked on post#5. Different HTML and .js are generated for each option. I just chose the default functionality which leaves one panel open.
I was concentrating on helping the OP add images.. If you want to have a shot a fulfilling all that I have apparently missed feel free :)
From post #1Quote:
The reason I want to use the code for the accordion widget I found is I can close it all the way
Sorry Egg. As I said. I was concentrating on adding the images to the script. I wasn't concerned about closing all panels.
The other options can easily be figured out by choosing the right Example at the source site.
Yes it does close all the way and I used the code Sledger put in the post word for word. After you open the browser you just click the open tab and it closes quite nicely. So no it was not a wast of time and thanks again!!Quote:
Sorry Egg. As I said. I was concentrating on adding the images to the script. I wasn't concerned about closing all panels.
The other options can easily be figured out by choosing the right Example at the source site.
:D Thanks. Happy to help....
Don't know what I've done to piss you off Steve (Replying to your edited thread) but that was never my intention. Here's a link to a working example that folds as per OP requirements.
Can anyone tell me where the other htm _files came from?Quote:
A couple of things that don't seem right....
I have a folder on my desktop called Website. In that folder I have 3 folders
1. index_htm files
2. webtest_htm_files
3. webtest_web_files.
the two htm folders contain the same images and Xara has renamed my images and given them all numbers.
This website is not published and I don't want it to be until I am done so I am not sure how the tip of Ctl. Shift Alt will work.
Given the setup of the files (see above) I used this bit of code and still no image.
Yes I meant collapse not close, sorry for the confusion.
It sounds like you've published your web file under two different names, index.htm & webtest.htm.
Delete these three files from the Desktop folder (BUT NOT THE WEB FILE) and then export the website again. What have you got?
I have not published the website yet. Also xara renamed my files with numbers?Quote:
Originally Posted by Egg Bramhill