Forums / Templates, Stylesheets, Page Layout / how to change text links to images

how to change text links to images

Locked

Views: 4,955

Results 1 to 20 of 28
This thread is locked. New replies are disabled.
1 May 2007, 9:36 AM
#1
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

how to change text links to images

i know how to change buttons to image links, but i can't seem to figure out how to do the opposite, since the text links aren't located in the button_images file.

so, im trying to change the " ... more info " text link to an image link.

i changed the define('MORE_INFO_TEXT','... more info'); to define('MORE_INFO_TEXT','moreinfo.jpg'); in my includes/languages/bb_template/english.php file.

i then put the 'moreinfo.jpg' into includes/templates/bb_template/images file.

now, everywhere on my site where '... more info' used to be, i have the text 'moreinfo.jpg' appear instead of the image.

i also tried putting a copy of this image in 5 other pertinent image locations, none of which are helping. im guessing there is another line of code i need to change, similar to changing the Categories Heading to an image, but im not sure what or where to do this.

i realize i could probably find a css workaround and simply change the background of the more_info link to an image. however it'd be nice to have complete artistic control over how the button looks. is the css bg the only way to do this?

2 May 2007, 4:47 AM
#2
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: how to change text links to images

Your getting a text more info because you are calling for text and not an image.

Try:

zen_image_button(BUTTON_IMAGE_VIEW)


Play with it long enough and you will break it.
2 May 2007, 4:53 AM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

moreinfo.jpg is not an image link, it is just a filename. A text output doesn't know it is supposed to display as anything but text.

Try '<img src="moreinfo.jpg">' (you may need more path info in front of the filename; look at any other image links in defines).

2 May 2007, 1:29 PM
#4
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

Thanks for both of the suggestions. Unfortunately, however, i wasn't able to get either one to work.

In response to gjh42, when i changed define('MORE_INFO_TEXT','moreinfo.jpg') to define('MORE_INFO_TEXT','<img src="moreinfo.jpg">') or to define('MORE_INFO_TEXT','<img src="../../templates/bb_template/images/moreinfo.jpg'), what ends up showing up on the screen is a big blank spot. no text readout like before, no box, no image, nada. i went through and checked for other images in the english.php file, like you suggested, and ironically the only other one is the one i personally added, which is the image for the categories header. the code for the header image is the same format as what i thought would work for my button: define('BOX_HEADING_CATEGORIES', 'categories_header.jpg'); .

i know that the only reason the header image works is b/c i modified code in the includes/modules/sideboxes/bb_template/categories.php file. specifically, i changed
'$title = BOX_HEADING_CATEGORIES;' to
'$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES,
DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES,
HEADER_ALT_TEXT);'

In response to usernameone, i think that's along the lines of what i need to do, b/c it resembles the modification i made to the categories header text. I don't quite understand where i need to put that code, or if thats even the specific code i need to write (or if its just a generic button call that i need to modify to fit my buttons name). I tried putting in a modified version of that code (define('MORE_INFO_TEXT','zen_image_button(BUTTON_IMAGE_MORE_INFO)'); ) into my english.php file, and inserted the appropriate code (define('BUTTON_IMAGE_MORE_INFO', 'moreinfo.jpg'); ) into my button_names.php file, but on the site it still only comes up as text.

Would you be able to be a little more specific, just with the code and what file(s) i should put it into. Do I need to change all the files that call the 'MORE_INFO_TEXT' or is there a central location i can do this from?

THANKS!!

if a link to my site would be helpful, here's a link to an example page im working on. beware, site is just getting started! http://bridgetbullentemp.dreamhosters.com/zencart/index.php?main_page=index&cPath=3

-mel

2 May 2007, 6:05 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

The blank spot indicates that it is trying to display an image but not finding it.

The "zen_image_button..." indicates that the PHP function is being seen as HTML text output. To use PHP inside an HTML output statement (which is being generated by PHP code), you need to escape from the HTML, evaluate the PHP, join it on either side with . and return to the HTML.

The following works to insert a heading image into the categories box contents list:

$content .= '<span class="catBoxHeading"><img src="' . HTTP_SERVER . DIR_WS_TEMPLATE . 'images/your_image.gif">
</span><br />' . "\n"; //display heading image in cat box list 

This is converting the constants into their text values and combining the whole into a text string that will later be used as HTML output.

In your case, the constant is being called within an HTML output, so must already be escaped as above, but it is spilling its contents out as text, not as code. It would need another layer of escaping built into the define.

Try this one:

define('MORE_INFO_TEXT', '<img src="' . HTTP_SERVER . DIR_WS_TEMPLATE . 'images/moreinfo.jpg">')

THis is evaluating the constants immediately and making a pure HTML output string saved in MORE_INFO_TEXT.

2 May 2007, 6:24 PM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

To use your button image method, try this:

define('MORE_INFO_TEXT', '"' . zen_image_button(BUTTON_ IMAGE_MORE_INFO) . '"')

Hmm... not sure about that... have to see it in context to know how it needs to be written.

2 May 2007, 6:43 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

Doh.
Evaluate zen_image_button in the define:

define('MORE_INFO_TEXT', zen_image_button(BUTTON_ IMAGE_MORE_INFO))

This presumes it evaluates to a link to an image, which is exactly what is needed.

3 May 2007, 12:46 AM
#8
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: how to change text links to images

This is how I call the image button from my template images buttons english and the name of the image is button_more_info.gif

zen_image_button('button_more_info.gif')

If you give me the lines of code you are inserting the image into and assuming that would be a button image in the above mentioned folder I will mod the code for you.

You need to remove all reference of text to pull up an image.


Play with it long enough and you will break it.
3 May 2007, 1:23 AM
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

Third time's the charm ... lol

define('MORE_INFO_TEXT', '\'' . zen_image_button(BUTTON_IMAGE_MORE_INFO) . '\'')

This will define MORE_INFO_TEXT as '<img src="/what/ever/moreinfo.jpg">' .
Hopefully that is the right way to define it. if not, the previous one should be it.

3 May 2007, 1:52 AM
#10
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: how to change text links to images

You have the code almost correct.

This is where you are trying to pull your image from.

http://bridgetbullentemp.dreamhosters.com/zencart/includes/templates/template_default/buttons/english/BUTTON_IMAGE_MORE_INFO

Just remove the extra ' and ' from around the image and rename the

BUTTON_IMAGE_MORE_INFO to your image.gif

It looks like you have wrapped your image.gif in " and " and should just be

zen_image_button('name-of-image.gif')

and the path is your template/buttons/english/name-of-buttom.gif

mellonade:

Thanks for both of the suggestions. Unfortunately, however, i wasn't able to get either one to work.

In response to gjh42, when i changed define('MORE_INFO_TEXT','moreinfo.jpg') to define('MORE_INFO_TEXT','<img src="moreinfo.jpg">') or to define('MORE_INFO_TEXT','<img src="../../templates/bb_template/images/moreinfo.jpg'), what ends up showing up on the screen is a big blank spot. no text readout like before, no box, no image, nada. i went through and checked for other images in the english.php file, like you suggested, and ironically the only other one is the one i personally added, which is the image for the categories header. the code for the header image is the same format as what i thought would work for my button: define('BOX_HEADING_CATEGORIES', 'categories_header.jpg'); .

i know that the only reason the header image works is b/c i modified code in the includes/modules/sideboxes/bb_template/categories.php file. specifically, i changed
'$title = BOX_HEADING_CATEGORIES;' to
'$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES,
DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES,
HEADER_ALT_TEXT);'

In response to usernameone, i think that's along the lines of what i need to do, b/c it resembles the modification i made to the categories header text. I don't quite understand where i need to put that code, or if thats even the specific code i need to write (or if its just a generic button call that i need to modify to fit my buttons name). I tried putting in a modified version of that code (define('MORE_INFO_TEXT','zen_image_button(BUTTON_IMAGE_MORE_INFO)'); ) into my english.php file, and inserted the appropriate code (define('BUTTON_IMAGE_MORE_INFO', 'moreinfo.jpg'); ) into my button_names.php file, but on the site it still only comes up as text.

Would you be able to be a little more specific, just with the code and what file(s) i should put it into. Do I need to change all the files that call the 'MORE_INFO_TEXT' or is there a central location i can do this from?

THANKS!!

if a link to my site would be helpful, here's a link to an example page im working on. beware, site is just getting started! http://bridgetbullentemp.dreamhosters.com/zencart/index.php?main_page=index&cPath=3

-mel


Play with it long enough and you will break it.
3 May 2007, 1:56 AM
#11
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

thanks for the quick responses from both of you. :cool:

glenn- i tried all three and unfortunately none of them seem to work. method 2 gives me, again, simply a text print-out of the 'zen_image_button(BUTTON_ IMAGE_MORE_INFO)'. method 3 gives me no text, but a double-quote (you can check it out on the site, i left it in).

usernameone- i think i may have confused you here. what you are saying makes perfect sense if i want to change a button from a text link to an image link within the button_names.php file. The textlink im changing is not currently in that file, it resides in the english.php file. in order for me to change the link to an image button, i need to tell it something in the english.php file first, presumably i need to point it to the button_names.php file. ive entered the code you suggested in button_names.php: define('BUTTON_IMAGE_MORE_INFO', 'moreinfo.jpg'); AND i put the moreinfo.jpg into my templates/bb_template/buttons/english/ file. again, however, with your code and with glenn's redirecting code, it's not working yet.

what i think i need is what glenn is currently working hard on :blush: , a redirection from the english.php file to the button_names.php file or the specific image call w/in that file.

my other resort, of course, is to go through and change each of the MORE_INFO_TEXT calls to BUTTON_IMAGE_MORE_INFO. perhaps it wouldn't be so bad....

thanks for all your help both of you.

3 May 2007, 2:33 AM
#12
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

Just for laughs, did you try the code in post #5? That doesn't depend on the zen_image_button function. I will mess around with my local site and see if it works for me.

3 May 2007, 2:52 AM
#13
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

Just noticed - the statement in post 5 is missing its closing semicolon ;
Add that and that statement should work.

The same goes for all three other examples, though only one of them ought to work properly.

3 May 2007, 3:05 AM
#14
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

haha yea i figured that out, luckily, as i was going along. i just tried the code in post 5, it shows up totally blank on the site. post 6 may not have worked also b/c of a syntax error. the placement of the double quoteswithin the single quotes seems to nullify the code in between both groups of them. (as in: ' " ' uninterpreted code.... ' " ') i got an error when i tried it.

3 May 2007, 4:04 AM
#15
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

i actually just went through and replaced all the 'MORE_INFO_TEXT' tags with 'zen_image_button(BUTTON_IMAGE_MORE_INFO, BUTTON_MORE_INFO_ALT)'. i covered my bases by creating some alt text in the button_names.php file and making sure my image was uploaded to includes/templates/bb_template/buttons/english/ file. what shows up on the site is BUTTON_MORE_INFO_ALT. when i remove that part of the code from the image tag: 'zen_image_button(BUTTON_IMAGE_MORE_INFO)' , i get nothing appearing on the site.

this doesn't make sense to me, the button_names file pulls from the includes/templates/bb_template/buttons/english file, as i see all the other buttons from the button_names.php in there.

didnt realize this would be so difficult.....

:frusty:

3 May 2007, 4:46 AM
#16
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: how to change text links to images

You are not going to get an alt text to work on that info button or any other button that is not normaly used by zen cart.

That is why you need to wrap your image in a ('image.gif')

zen_image_button('name-of-image.gif')

and the path is your template/buttons/english/name-of-buttom.gif


Play with it long enough and you will break it.
3 May 2007, 4:54 AM
#17
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

Somehow i didnt see this post!!! :laugh: I'm guessing it was posted while i was writing the essay that became post #11.

usernamenone:

You have the code almost correct.

This is where you are trying to pull your image from.

http://bridgetbullentemp.dreamhosters.com/zencart/includes/templates/template_default/buttons/english/BUTTON_IMAGE_MORE_INFO

Just remove the extra ' and ' from around the image and rename the

BUTTON_IMAGE_MORE_INFO to your image.gif

It looks like you have wrapped your image.gif in " and " and should just be

zen_image_button('name-of-image.gif')

and the path is your template/buttons/english/name-of-buttom.gif

And guess what, this works beautifully. i did just what you said- i removed the extra quotes and changed the interior quotes to single quotes.

thank you so much, you have helped me out a ton. Please accept my apologies for not seeing this one; post #11 probably made little sense to you, and it probably helped me look realllly stupid.

-mel

3 May 2007, 5:15 AM
#18
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: how to change text links to images

Your welcome, and yes I couldn't figure out why you were trying to do a redirect through english.php as that was a new one on me!

Glad it all worked out.


Play with it long enough and you will break it.
3 May 2007, 8:05 AM
#19
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to change text links to images

For what it's worth, I did find what was causing my code not to work: the web path constants were missing DIR_WS_CATALOG, so the path was incomplete.

define('MORE_INFO_TEXT', '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/moreinfo.gif">');
``` in /includes/languages/your_template/english.php, 
combined with the image file in /includes/templates/your_template/images/moreinfo.gif, causes the image to be displayed in place of the "...more info" text and work as a link to the product info page. 

No other edits or additions are required.
4 May 2007, 7:17 AM
#20
mellonade avatar

mellonade

New Zenner

Join Date:
Apr 2007
Posts:
69
Plugin Contributions:
0

Re: how to change text links to images

usernameone- amusingly, the place i did insert your code was in english.php, and it worked great. im curious, now, where did you want me to put the code you suggested?