define_main_page image problem

**rsolly** · 20 Apr 2016, 07:25 AM

I added new text to the define_main_page.php in the form of html. The text shows up just fine. The text also contains an image. The image does not show up on the page even though I added the image to /fargorockandjewelry.com/includes/languages/english/html_includes/responsive_sheffield_blue.
Is there somewhere else the image is supposed to go? Is this a PHP thing that I have done wrong? I don't know much about PHP. Here is the define_main_page.php file:

HTML Code:

<div id="home-text">
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>FRJblog1</title>
  </head>
  <body>
    <table border="4" cellpadding="2" cellspacing="2" width="400">
      <tbody>
        <tr>
          <td bgcolor="#ff6666" valign="top">
            <address><b>The sometimes regular Lapidary Interest resting
                place.</b></address>
            <br>
            For those of you who are new to the hobby and science of
            Lapidary, We'll give you some weekly factoids in this
            column. We'll start with rock tumbling. We will progress
            through finding the rock, cutting rock with our rock saws,
            polishing the rock by hand or with a machine.<br>
            <img alt=""
              src="Rocktumbler1.png"
              height="161" width="242"><br>
         --  Extra text deleted-------------------
            &nbsp;<br>
          </td>
        </tr>
      </tbody>
    </table>
    <br>
  </body>
</html>

</div>

--------------------------------------------------

The image file in question is Rocktumbler1.png

Any help would be appreciated. Did I get this question in the right forum?

Chuck

**rbarbour** · 20 Apr 2016, 08:18 AM

The HTML, HEAD and BODY tags get added automatically via:
/includes/templates/responsive_sheffield_blue/common/html_header.php

so that part of the code is not necessary.

upload the image to:
/includes/templates/responsive_sheffield_blue/images

easy way to add image in the define pages is:

PHP Code:


<?php echo zen_image(DIR_WS_TEMPLATE.'images/Rocktumbler1.png', 'Rock Tumbler', '', ''); ?>

I noticed the script tags, you can still add them without the HEAD tags

**kobra** · 22 Apr 2016, 08:13 AM

You also do not need the antiquated tables at all

**kobra** · 22 Apr 2016, 08:34 AM

Here is the code for this page HERE

Code:

<span style="color: rgb(0, 0, 128);"></span><b>The sometimes regular Lapidary Interest resting place.<span style="color: rgb(0, 0, 128);"></span></b><span style="color: rgb(0, 0, 128);">&nbsp;</span>
<span style="color: rgb(0, 0, 128);"><br /></span>
For those of you who are new to the hobby and 
science of Lapidary, We'll give you some weekly
factoids in this column. We'll start with rock
tumbling. We will progress through finding the
rock, cutting rock with our rock saws, polishing
the rock by hand or with a machine.<br /><img width="380" height="253" src="http://kobrawd.com/demo/images/roadster32.jpg" /><br />

**rsolly** · 25 Apr 2016, 05:58 PM

Rbarbour,
Thanks for your help on this one. Unfortunately, I cannot get the image to show up. I have added the image to the images file as you mentioned. Is there something wrong with the src? Here is the file that I am using currently:

<div id="home-text">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>FRJblog1</title>
</head>
<body>
<table border="4" cellpadding="2" cellspacing="2" width="500">
<tbody>
<tr>
<td bgcolor="#ff6666" valign="top">
<address><b>The sometimes regular Lapidary Interest resting
place.</b></address>
<br>
For those of you who are new to the hobby and science of
Lapidary, We'll give you some weekly factoids in this
column. We'll start with rock tumbling. We will progress
through finding the rock, cutting rock with our rock saws,
polishing the rock by hand or with a machine.<br>
<img alt=""
src="Rocktumbler1.png"
height="134" width="202"><br>
Tumbling rocks is how you get them smooth and eventually
polished.The tumbler above is a home-made electric
tumbler.  There are two types of tumblers, rolling and
vibratory. Rolling tumblers are very inexpensive but require
much more time to do their job. For instance, to get a load
of Agate processed and finished with beautiful polished
surfaces will take about 6 weeks with a rolling tumbler.
Vibratory tumblers, on the other hand, do the same job in
about 5 days. A vibratory tumbler will require surrendering
more money to the seller however. Check out our equipment
here in our store and you will see what I mean. I have spent
many hours with both types and each will produce a beautiful
product.<br>
The rock is abraded with grit mixed with water. The grit
sizes are the subject of the next talk but the result is the
same, the coarser the grit the faster the grinding action.<br>
As of this writing, there are thousands of rockhounds
enjoying the hobby and finding new and unusual rocks and
minerals to process. --Chuck<br>
 <br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

</div>
------------------------------------------------
Keep in mind that I am not a programmer! Kobra said that I don't need "the antiquated tables". What does that mean?

Thanks in advance for your help, it has saved me hours already...

Chuck

Originally Posted by rbarbour

The HTML, HEAD and BODY tags get added automatically via:
/includes/templates/responsive_sheffield_blue/common/html_header.php

so that part of the code is not necessary.

upload the image to:
/includes/templates/responsive_sheffield_blue/images

easy way to add image in the define pages is:

PHP Code:


<?php echo zen_image(DIR_WS_TEMPLATE.'images/Rocktumbler1.png', 'Rock Tumbler', '', ''); ?>

I noticed the script tags, you can still add them without the HEAD tags

**carlwhat** · 26 Apr 2016, 03:45 PM

currently, your page has the image locatation here:

http://fargorockandjewelry.com/Rocktumbler1.png

but you do not have the image there. you have the image located here:

http://fargorockandjewelry.com/inclu...cktumbler1.png

you can either a.) upload the image to: /fargorockandjewelry.com/ or b.) replace your line as such:

old code:

Code:

<img alt=""
src="Rocktumbler1.png"
height="134" width="202">

new code:

Code:

<?php echo zen_image(DIR_WS_TEMPLATE.'images/Rocktumbler1.png', 'Rock Tumbler', '', ''); ?>

i recommend option b.) as i think most people on the board would as well.

good luck!

**mc12345678** · 26 Apr 2016, 04:50 PM

Agree with option B. And if that is what currently is present then would suggest posting the includes/configure.php file with DB credentials obscured. Please use the # button in the menu toolbar just before pasting code.

**mc12345678** · 26 Apr 2016, 05:39 PM

Originally Posted by rsolly

Rbarbour,
Thanks for your help on this one. Unfortunately, I cannot get the image to show up. I have added the image to the images file as you mentioned. Is there something wrong with the src? Here is the file that I am using currently:

<div id="home-text">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(e,t,n){function r(e,t){return function(){o(e,[(new Date).getTime()].concat(a(arguments)),null,t)}}var o=e("handle"),i=e(2),a=e(3);"undefined"==typeof window.newrelic&&(newrelic=NREUM);var u=["setPageViewName","addPageAction","setCustomAttribute","finished","addToTrace"," inlineHit"],c=["addPageAction"],f="api-";i(u,function(e,t){newrelic[t]=r(f+t,"api")}),i(c,function(e,t){newrelic[t]=r(f+t)}),t.exports=newrelic,newrelic.noticeError=function(e){"string"==typeof e&&(e=new Error(e)),o("err",[e,(new Date).getTime()])}},{}],2:[function(e,t,n){function r(e,t){var n=[],r="",i=0;for(r in e)o.call(e,r)&&(n[i]=t(r,e[r]),i+=1);return n}var o=Object.prototype.hasOwnProperty;t.exports=r},{}],3:[function(e,t,n){function r(e,t,n){t||(t=0),"undefined"==typeof n&&(n=e?e.length:0);for(var r=-1,o=n-t||0,i=Array(0>o?0:o);++r<o;)i[r]=e[t+r];return i}t.exports=r},{}],ee:[function(e,t,n){function r(){}function o(e){function t(e){return e&&e instanceof r?e:e?u(e,a,i):i()}function n(n,r,o){e&&e(n,r,o);for(var i=t(o),a=l(n),u=a.length,c=0;u>c;c++)a[c].apply(i,r);var s=f[g[n]];return s&&s.push([m,n,r,i]),i}function p(e,t){w[e]=l(e).concat(t)}function l(e){return w[e]||[]}function d(e){return s[e]=s[e]||o(n)}function v(e,t){c(e,function(e,n){t=t||"feature",g[n]=t,t in f||(f[t]=[])})}var w={},g={},m={on

,emit:n,get:d,listeners:l,context:t,buffer:v};return m}function i(){return new r}var a="nr@context",u=e("gos"),c=e(2),f={},s={},p=t.exports=o();p.backlog=f},{}],gos:[function(e,t,n){function r(e,t,n){if(o.call(e,t))return e[t];var r=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,t,{value:r,writable:!0,enumerable:!1}),r}catch(i){}retur n e[t]=r,r}var o=Object.prototype.hasOwnProperty;t.exports=r},{}],handle:[function(e,t,n){function r(e,t,n,r){o.buffer([e],r),o.emit(e,t,n)}var o=e("ee").get("handle");t.exports=r,r.ee=o},{}],id:[function(e,t,n){function r(e){var t=typeof e;return!e||"object"!==t&&"function"!==t?-1:e===window?0:a(e,i,function(){return o++})}var o=1,i="nr@id",a=e("gos");t.exports=r},{}],loader:[function(e,t,n){function r(){if(!w++){var e=v.info=NREUM.info,t=s.getElementsByTagName("script")[0];if(e&&e.licenseKey&&e.applicationID&&t){c(l,function(t,n){e[t]||(e[t]=n)});var n="https"===p.split(":")[0]||e.sslForHttp;v.proto=n?"https://":"http://",u("mark",["onload",a()],null,"api");var r=s.createElement("script");r.src=v.proto+e.agent,t.parentNode.insertBefore(r,t) }}}function o(){"complete"===s.readyState&&i()}function i(){u("mark",["domContent",a()],null,"api")}function a(){return(new Date).getTime()}var u=e("handle"),c=e(2),f=window,s=f.document;NREUM.o={ST:setTimeout,CT:clearTimeou t,XHR:f.XMLHttpRequest,REQ:f.Request,EV:f.Event,PR:f.Promise,MO:f.MutationObserv er},e(1);var p=""+location,l={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-918.min.js"},d=window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.p rototype.addEventListener&&!/CriOS/.test(navigator.userAgent),v=t.exports={offset:a(),origin

,features:{},xhrWrappable:d};s.addEventListener?(s.addEventListener("DOMContentL oaded",i,!1),f.addEventListener("load",r,!1))

s.attachEvent("onreadystatechange",o),f.attachEvent("onload",r)),u("mark",["firstbyte",a()],null,"api");var w=0},{}]},{},["loader"]);</script>
<title>FRJblog1</title>
</head>
<body>
<table border="4" cellpadding="2" cellspacing="2" width="500">
<tbody>
<tr>
<td bgcolor="#ff6666" valign="top">
<address><b>The sometimes regular Lapidary Interest resting
place.</b></address>
<br>
For those of you who are new to the hobby and science of
Lapidary, We'll give you some weekly factoids in this
column. We'll start with rock tumbling. We will progress
through finding the rock, cutting rock with our rock saws,
polishing the rock by hand or with a machine.<br>
<img alt=""
src="Rocktumbler1.png"
height="134" width="202"><br>
Tumbling rocks is how you get them smooth and eventually
polished.The tumbler above is a home-made electric
tumbler.  There are two types of tumblers, rolling and
vibratory. Rolling tumblers are very inexpensive but require
much more time to do their job. For instance, to get a load
of Agate processed and finished with beautiful polished
surfaces will take about 6 weeks with a rolling tumbler.
Vibratory tumblers, on the other hand, do the same job in
about 5 days. A vibratory tumbler will require surrendering
more money to the seller however. Check out our equipment
here in our store and you will see what I mean. I have spent
many hours with both types and each will produce a beautiful
product.<br>
The rock is abraded with grit mixed with water. The grit
sizes are the subject of the next talk but the result is the
same, the coarser the grit the faster the grinding action.<br>
As of this writing, there are thousands of rockhounds
enjoying the hobby and finding new and unusual rocks and
minerals to process. --Chuck<br>
 <br>
</td>
</tr>
</tbody>
</table>
<br>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"d9d1086122","applicationID":"11437187","transactionName" :"blRVYUsFWkAEW0cPX1ceYkdQS1VZBEAdFlhJ","queueTime":0,"applicationTime":43,"atts ":"QhNWFwMfSU4=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

</div>
------------------------------------------------
Keep in mind that I am not a programmer! Kobra said that I don't need "the antiquated tables". What does that mean?

Thanks in advance for your help, it has saved me hours already...

Chuck

What it means (kobra's comment about the table) is that where the <table tag and all of its "parts" are used (ie. <td, <tr, etc... and associated closing tag(s)) are not needed. Also, there is extra code included in this define page that will cause html validation issues. The opening and closing tags of html, and the redefine the document type. To see the results of the above code, view the page then press f12 and review the source code. You will see that type of declaration twice in the page and if you load the page through an html validator (Internet search html validator, I can't remember the url at the moment.)

There is also a tag that is incorrectly used, the address tag is supposed to represent a physical address like a street name, city, etc... not a tag of text.

But perhaps that's an issue for another day.

**rbarbour** · 27 Apr 2016, 03:00 PM

Originally Posted by rsolly

Rbarbour,
Thanks for your help on this one. Unfortunately, I cannot get the image to show up. I have added the image to the images file as you mentioned. Is there something wrong with the src? Here is the file that I am using currently:

------------------------------------------------
Keep in mind that I am not a programmer! Kobra said that I don't need "the antiquated tables". What does that mean?

Thanks in advance for your help, it has saved me hours already...

Chuck

As @carlwhat pointed out the "src" of the img tag is pointing to

Code:

ROOT/Rocktumbler1.png

This is a bad idea and you should NOT upload images to the ROOT

It would be better to upload the image to the "images" file by changing the "src" of the img tag to

Code:

http://fargorockandjewelry.com/images/Rocktumbler1.png

as @kobra pointed out

As a rule of thumb I add site images to the templates image folder /includes/templates/responsive_sheffield_blue/images

u can do this using the "php" method I posted previously

PHP Code:


 <?php echo zen_image(DIR_WS_TEMPLATE.'images/Rocktumbler1.png', 'Rock Tumbler', '', ''); ?>

this method produces the "src" of the img tag to

Code:

http://fargorockandjewelry.com/includes/templates/responsive_sheffield_blue/images/Rocktumbler1.png

All methods work, but whichever method is chosen, that is where u need to upload the image

@kobra's phrase of "the antiquated tables" was explained in detail by @mc12345678

**kobra** · 27 Apr 2016, 05:07 PM

Originally Posted by rsolly

Here is the file that I am using currently:

You still have un needed code for a defines page
ZenCart has the required html head information covered for you
All you need is what comes after the "body" tag
like

Code:

<table border="4" cellpadding="2" cellspacing="2" width="500">
<tbody>
<tr>
<td bgcolor="#ff6666" valign="top">
<address><b>The sometimes regular Lapidary Interest resting
place.</b></address>
<br>
For those of you who are new to the hobby and science of
Lapidary, We'll give you some weekly factoids in this
column. We'll start with rock tumbling. We will progress
through finding the rock, cutting rock with our rock saws,
polishing the rock by hand or with a machine.<br>
<img alt=""
src="Rocktumbler1.png"
height="134" width="202"><br>
Tumbling rocks is how you get them smooth and eventually
polished.The tumbler above is a home-made electric
tumbler.&nbsp; There are two types of tumblers, rolling and
vibratory. Rolling tumblers are very inexpensive but require
much more time to do their job. For instance, to get a load
of Agate processed and finished with beautiful polished
surfaces will take about 6 weeks with a rolling tumbler.
Vibratory tumblers, on the other hand, do the same job in
about 5 days. A vibratory tumbler will require surrendering
more money to the seller however. Check out our equipment
here in our store and you will see what I mean. I have spent
many hours with both types and each will produce a beautiful
product.<br>
The rock is abraded with grit mixed with water. The grit
sizes are the subject of the next talk but the result is the
same, the coarser the grit the faster the grinding action.<br>
As of this writing, there are thousands of rockhounds
enjoying the hobby and finding new and unusual rocks and
minerals to process. --Chuck<br>
&nbsp;<br>
</td>
</tr>
</tbody>
</table>

Have a look at the link in my previous post and this is the code used in the define page
But for my taste I would eliminate the tables as in - cut & paste this in your define page editing the "your_domain.com" line to your domain
Use the plain text mode of the editor if you have a WYSIWYG editor installed

Code:

The sometimes regular Lapidary Interest resting
place.
<br />
For those of you who are new to the hobby and science of
Lapidary, We'll give you some weekly factoids in this
column. We'll start with rock tumbling. We will progress
through finding the rock, cutting rock with our rock saws,
polishing the rock by hand or with a machine.<br />
<img width="202" height="134" src="http://your_domain.com/images/Rocktumbler1.png" /><br />
Tumbling rocks is how you get them smooth and eventually
polished.The tumbler above is a home-made electric
tumbler.  There are two types of tumblers, rolling and
vibratory. Rolling tumblers are very inexpensive but require
much more time to do their job. For instance, to get a load
of Agate processed and finished with beautiful polished
surfaces will take about 6 weeks with a rolling tumbler.
Vibratory tumblers, on the other hand, do the same job in
about 5 days. A vibratory tumbler will require surrendering
more money to the seller however. Check out our equipment
here in our store and you will see what I mean. I have spent
many hours with both types and each will produce a beautiful
product.<br />
The rock is abraded with grit mixed with water. The grit
sizes are the subject of the next talk but the result is the
same, the coarser the grit the faster the grinding action.<br />
As of this writing, there are thousands of rockhounds
enjoying the hobby and finding new and unusual rocks and
minerals to process. --Chuck