Forums / Developer / How to insert images using javascript

How to insert images using javascript

Author Message

Balaji Ramachandran

Thursday 10 June 2004 12:37:37 am

----------------------------------------------------------------------------------------
Re: How to insert images using javascript
First of all, please dont start a new thread to continue an existing thread. People like myself will have already set their notifications on that thread so you risk losing contact with the people from the original thread. Also, please dont quote the original thread in your new one, it doesnt read correctly. Again this is confusing.

Can you give an example of the final javascript you want to create? It isnt clear exactly what javascript statements you need? From that we can deduce how to create it within eZ.

paul

-------------------------------------------------------------------------------------
Sorry for the trouble Mr.Paul My acual coding is :

Coding:(javascript)

function fnBuildTopMenu(cIn)
{
var myImg = "/images/";
var cTemp = "";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_03.jpgWIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_04.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_05.jpg WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_06.jpg WIDTH=155 HEIGHT=107></TD>";
}

How to insert the ezPublish codings to display the images which is in design/news/images in ezPublish ,but the myImg declared is done by other party which was in javascript.
Please help me and sorry for the trouble.Thank You.

Paul Forsyth

Thursday 10 June 2004 12:57:21 am

First of all, please dont start a new thread to continue an existing thread. People like myself will have already set their notifications on that thread so you risk losing contact with the people from the original thread. Also, please dont quote the original thread in your new one, it doesnt read correctly. Again this is confusing.

Can you give an example of the final javascript you want to create? It isnt clear exactly what javascript statements you need? From that we can deduce how to create it within eZ.

paul

--
http://www.visionwt.com

Trond Åge Kvalø

Thursday 10 June 2004 2:29:55 am

Hello again Balaji.

I have replied to the posting you made earlier. And as I was about to reply to this I saw that you had edited your original post as an answer to Paul's reply.

While this probably might be convenient for you, it does mess a bit with the concept of threads and makes it harder for other people than Paul to chip in with some comments. Just my advice :-)

Anyway, as far as I can see from the provided Javascript when this is run in a browser, the final value of the cTemp variable is:

"<TD><IMG SRC=/images/_03.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_04.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_05.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_06.jpg WIDTH=155 HEIGHT=107></TD>"

First of all I would like to point out that the attribute values in the IMG tag lacks " or ' around their values. Now I don't now which version of HTML you're using but I do believe that you should put the attribute values in either " or ' to be sure that most browsers can view your HTML.

When it comes to the problem of how to use JavaScript inside an eZ template there's two ways. First is to use {literal}{/literal} to make eZ write the { and } characters between those "tags" correctly, or you could write "{ldelim}" instead of "{" and "{rdelim}" instead of "}" in all your Javascripts.

So to put your Javascript inside an eZ template, here's what I would do:

<script type="text/javascript" language="Javascript">
{literal}
function fnBuildTopMenu(cIn)
{
var cTemp = "";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_03.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_04.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_05.jpg|ezimage}{literal}" WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_06.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
}
{/literal}

This uses the ezimnage template operator to insert the design/yoursiteaccess/images to path to all your image names.

This would also put " around the source attribute of your img tag, if you still can't see any images then it's probably the resulting image source that is wrong and you should update your javascript to make sure it puts the correct image name in the src attribute.

best regards
trondåge

trondåge

Balaji Ramachandran

Thursday 10 June 2004 2:59:06 am

Thanks a lot for ur reply but i tried ur coding it is not working i could'nt find out the correct reason for this.Sorry for the trouble and thanks for your reply sir .

Trond Åge Kvalø

Thursday 10 June 2004 3:20:06 am

Hi Balaji

Ok, it doesn't work, you say.

I what way does it not work, do you get any error messages? What does the source code in your HTML page say? (To show this, just click Source code in the View menu)

If you can explain what you are trying to do, what output you expect and what output you get, etc it would be much easier to help you.

best regards
trondåge

trondåge

Balaji Ramachandran

Thursday 10 June 2004 3:41:47 am

Sir actually iam trying to convert a finshed web site in ezpublish .See what iam trying to do is i wanted the news article to be placed dynamically in the finished website. ihave done but the images what they are displaying is not coming in ezpublish.I have transfered all the images in design/news/images.but they have kept in some local folder called images So that myImg var is under confusion how to solve this whther to take the myImg variable and place original name of the jpg as about_03.jpg ezpublish style or how to do .but in all methods i have tried it is displaying a plain page or else it is diplaying the page without images when we keep that (myImg="/images/";)local folder name is images dont confuse.

Coding:(javascript)

function fnBuildTopMenu(cIn)
{
var myImg = "/images/";
var cTemp = "";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_03.jpgWIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_04.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_05.jpg WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_06.jpg WIDTH=155 HEIGHT=107></TD>";
}
Please help me ,in which way to solve this problem.

Trond Åge Kvalø

Friday 11 June 2004 2:15:27 am

Ok, I will try to sum up a bit just to make sure I've understood you correctly. Please correct me if I'm wrong.

You have a finished, static website. You want to convert this to a dynamic eZ publish site, right.

You have managed to display a news article dynamically on the website, but the images in the news article does not display.

You have transfered all the images in design/news/images. Does that mean that all your news images are now found in design/news/images? Or have you transferred them from design/news/images to somewhere else on your server?

And where does the "about" come from? Is the name of the image that ends with _03.jpg actually about_03.jpg? What are the names of the other images? That is those that ends with _04.jpg, _05.jpg and _06.jpg?

The javascript you mention has a function that accepts an argument called cIn. But as far as I can see it is not used inside the function. Do you know why?

Also the javascript only stores the needed HTML-code to display the images in a variable called cTemp. Does the contents of this variable ever get written into the document?

If you could please answer these questions, I'll try to help to the best of my abilities.

trondåge

Balaji Ramachandran

Friday 11 June 2004 4:29:46 am

Hi Trond,

I have a finished static website and I am converting it to dynamic using Ez Publish. Right now, I have not handled any images from the article. I am trying to display the images in the html page layout like the top banner. Those images are present in news/images. This is the full script from the static webpage. I have enclosed the full javascript inside {literal}.

function fnBuildTopMenu(cIn)
{
var myImg = "images/" + cIn;
var cTemp = "";
cTemp = "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";
cTemp = cTemp + "<TR><TD WIDTH=100% BGCOLOR=#E2E1E6 HEIGHT=25 ALIGN=RIGHT>";
cTemp = cTemp + "<a href='http://www.domain.com/index.html' target='_blank' class=TopMenu>Home</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghAdmitProcess.html' target='_blank' class=TopMenu>Patient Information</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPhysicianSname.html' target='_blank' class=TopMenu>Physician Listing</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghDonation.html' target='_blank' class=TopMenu>Donation</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghMediNews.html' target='_blank' class=TopMenu>News & Events</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghCareers.html' target='_blank' class=TopMenu>Careers</a>   ";
cTemp = cTemp + "</TD></TR>";
cTemp = cTemp + "<TR><TD width=100% bgcolor=#BABABA><img src='images/spacer.gif' height=1></TD></TR>";
cTemp = cTemp + "<TR><TD WIDTH=100%>";
cTemp = cTemp + "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";
cTemp = cTemp + "<TR><TD><a href='http://www.domain.com/index.html' target='_blank'><IMG SRC='images/inner-ban-mid_01.jpg' WIDTH=154 HEIGHT=107 BORDER='0'></a></TD>";
cTemp = cTemp + "<TD background='images/inner-ban-mid_02.jpg' WIDTH=100% HEIGHT=107><img src='images/spacer.gif'></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_03.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_04.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_05.jpg WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_06.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "</TR></TABLE></TD></TR>";
cTemp = cTemp + "<TR><TD width=100% bgcolor=#BABABA><img src='images/spacer.gif' height=1></TD></TR>";
cTemp = cTemp + "<TR><TD WIDTH=100% BGCOLOR=#E2E1E6 HEIGHT=25 ALIGN=RIGHT>";
cTemp = cTemp + "<a href='http://www.domain.com/DrGBProfile.html' target='_blank' class=TopMenu>Dr. GB Profile</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPersonality.html' target='_blank' class=TopMenu>Personality In Focus</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPspeak.html' target='_blank' class=TopMenu>Patient Speak</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghEducation.html' target='_blank' class=TopMenu>Educational Initiatives</a>   ";
cTemp = cTemp + "</TD></TR></TABLE>";

document.write(cTemp);
}
I am not able to use "|ezimage" for displaying the image. Any help is appreciated.

Thanks
Balaji

Trond Åge Kvalø

Friday 11 June 2004 5:23:40 am

OK, now I understand (I hope)

I presume that you have tested the page so you know it works when it is static, right.

Oh and by the way, when the function fnBuildTopMenu is called what parameter/argument do you pass? In other words what are the value of cIn? "about"?

Anyway I have two suggestions for you:

1. change the line
var myImg = "/images/" + cIn; to
var myImg = "news/images/" + cIn;

2. If that doesn't work remove the {literal} and {/literal} tags around your script and use "{ldelim}" instead of "{" and "{rdelim}" instead of "}" in your scripts.

best regards
trondåge

trondåge

Balaji Ramachandran

Tuesday 15 June 2004 8:17:50 am

Hi,

I achieved it with this code

cTemp = cTemp + "<TD><IMG SRC=" + {/literal} {'about_03.jpg'|ezimage} {literal} + " WIDTH=155 HEIGHT=107></TD>";

Thanks a lot.

Trond Åge Kvalø

Thursday 17 June 2004 1:57:37 am

Hi Balaji!

Good to see that you managed to fix it, well done :-)

I thought I'd just chip in with a nice JavaScript tip, which you might find useful. I see that you write your cTemp statements like:

cTemp = cTemp + "<TD>................

You can achieve the same result with

cTemp += "<TD>................

Which is a bit shorter to write. :-)

Best regards
trondåge

trondåge

eZ debug

Timing: Jan 19 2025 04:57:59
Script start
Timing: Jan 19 2025 04:57:59
Module start 'content'
Timing: Jan 19 2025 04:58:00
Module end 'content'
Timing: Jan 19 2025 04:58:00
Script end

Main resources:

Total runtime1.2544 sec
Peak memory usage4,096.0000 KB
Database Queries220

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0057 589.0547180.8281
Module start 'content' 0.00571.0794 769.8828681.5703
Module end 'content' 1.08510.1691 1,451.4531353.1563
Script end 1.2542  1,804.6094 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00430.3445210.0002
Check MTime0.00150.1190210.0001
Mysql Total
Database connection0.00100.083310.0010
Mysqli_queries1.149791.65782200.0052
Looping result0.00230.18712180.0000
Template Total1.219697.220.6098
Template load0.00240.192520.0012
Template processing1.217297.039020.6086
Template load and register function0.00030.026010.0003
states
state_id_array0.00150.119210.0015
state_identifier_array0.00130.101720.0006
Override
Cache load0.00230.18681370.0000
Sytem overhead
Fetch class attribute can translate value0.00150.123140.0004
Fetch class attribute name0.00170.1325110.0002
XML
Image XML parsing0.00060.049840.0002
class_abstraction
Instantiating content class attribute0.00000.0016110.0000
General
dbfile0.00500.3996210.0002
String conversion0.00000.000530.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1node/view/full.tplfull/forum_topic.tplextension/sevenx/design/simple/override/templates/full/forum_topic.tplEdit templateOverride template
11content/datatype/view/ezxmltext.tpl<No override>extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tplEdit templateOverride template
14content/datatype/view/ezxmltags/line.tpl<No override>design/standard/templates/content/datatype/view/ezxmltags/line.tplEdit templateOverride template
28content/datatype/view/ezxmltags/paragraph.tpl<No override>extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tplEdit templateOverride template
4content/datatype/view/ezxmltags/literal.tpl<No override>extension/community/design/standard/templates/content/datatype/view/ezxmltags/literal.tplEdit templateOverride template
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 59
 Number of unique templates used: 6

Time used to render debug report: 0.0002 secs