How can i make the 3 images on the 3 boxes columms link to different pages url « Support Forum | Kriesi.at

Support Forum » Display

How can i make the 3 images on the 3 boxes columms link to different pages url

24 posts from 4 voices

Started 2 years ago by rafizzz
Latest reply from Dude
This topic is not a support question

Tags:

rafizzz
Member

hi

I want that the 3 images below the slider will link to 3 different urls.
how can i do that? i'm using display theme...

Thanks

Posted 2 years ago #

Dude
Dude

Hey, replace following code in kclass_display_box.php (loacted under framework\classes):

if ($preview_big == "") { $lightbox = ''; $link = true; $link_url = get_permalink(); }
				// the kriesi_build_image function used here checks if the image should be resized.
				// the function is located in framework/helper_functions

with:

if ($preview_big == "") { $lightbox = ''; $link = true; $link_url = get_permalink(); }
                                if (get_post_meta($post->ID, 'url', true)) { $lightbox = ''; $link = true; $link_url = get_post_meta($post->ID, 'url', true); }
				// the kriesi_build_image function used here checks if the image should be resized.
				// the function is located in framework/helper_functions

Afterwards you can set post meta fields in all your posts/pages which should appear in your mainpage columns (pages/posts you set under Display Options > Mainpage Options). Call the fields "url" and type in the websites' adresses as values. This post will tell you more about custom fields: http://www.kriesi.at/archives/how-to-use-wordpress-custom-fields

Posted 2 years ago #

rafizzz
Member

Hi dude,

Thank you for you help!
I didn't understand few things:

1) in whice file should i edit this code.
2) what did you mean here:
"Afterwards you must set post meta fields in all your portfolio posts. Call the fields "url" and type in the websites' adresses as values"

what is setting post meta fields? and what are portfolio posts?

Please help

Thanks again,
Rafael

Posted 2 years ago #
Dude
Dude

Oops ... forgot a few things. I updated the instructions above.

Posted 2 years ago #
rafizzz
Member

Hi

Thank you for the update.
i'm not using post, page or widget just using the index.php....

isn't there any simple option to just add some links to index.php?

Posted 2 years ago #
Dude
Dude
You can add a link with an image like:
```
<a href="http://website.com"><img src="my-image.jpg" alt="" title="" /></a>
```
to your index.php text.
Replace website.com and my-image.jpg with the source path to your image/website. You need to resize the images first to 280px width so that they fit into the columns.
Posted 2 years ago #
webt
Member

Hi, I'm wondering the same thing. Maybe I'm wrong but won't the code you've placed above open an image in a lightbox? I'm just wanting it to forward the user to a different page.

Posted 2 years ago #
webt
Member

Quick idea: what if I placed :

echo 'insert hyperlink code here';
<p>before:
$placeholder[1] = $placeholder_image1.'<h3>my text content here . . . . . .</p>
<p>and then change the above to
$placeholder[1] = $placeholder_image1.'<h3>my text content here . . . . . .</p>
<p>`

O gee maybe I'll just test this and post the results . . .BRB

Posted 2 years ago #
webt
Member

It works!

Sorry, the forum would let me place code for a sample hyperlink (for those who don't know how to write it) above where it says "insert hyperlink code here"

I will try your example above if I want to use a lightbox at some time in the future because that does look pretty cool, especially the video.

One last question though. Sorry to be so complicated, but that's valeuable SEO real estate and I was wondering if you could rtell me how to add an alt tag to the tree images in question, so I can pass a keyword on with the link?

Posted 2 years ago #
webt
Member

O nuts! I thought it worked, until I opened it in IE. then, only the first linked image worked and it busted the layout, making the image display vertically instead of the way they did originally.

nuts..

So the ball is back in your court . . .

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

What's the site URL with the IE bug?

Seeing it 1st hand makes it a lot easier to work out what's going on.

James

Posted 2 years ago #
webt
Member

It's http://wentransit.mobi...

Give me 10 minutes to put the bug back in....

Posted 2 years ago #

webt
Member

The bug is back in place:

I'll paste the code here, but I think the forum will auto strip parts of it:

echo	'<a href="http://webtransit.mobi/atlanta-e-commerce-more">';
		$placeholder[1] = $placeholder_image1.'</a><h3>E Commerce:</h3><p>E-Commerce includes web and mobile sites. You have to be everywhere. We understand the interface, gateway, merchant services, and how it all works.  <a href="http://webtransit.mobi/atlanta-e-commerce-more">We help you sell online</a></p>';

		echo	'<a href="http://webtransit.mobi/atlanta-online-marketing">';
		$placeholder[2] = $placeholder_image2.'</a><h3>Internet Marketing:</h3><p>Web, mobile, local, email, iPad, Android, etc. You need to use everything at your disposal to drive sales. <a href="http://webtransit.mobi/atlanta-online-marketing">We get customers to your store</a></p>';
		//class for link used to be class="more-link", removing this allowed to be all on one line instead 12 characters per line or whatev.

		echo	'<a href="http://webtransit.mobi/atlanta-ipad-development-more">';
		$placeholder[3] = $placeholder_image3.'</a><h3>iPad / Mobile Development:</h3><p>The web is moving to your handheld device, at an alarming rate. There are more searches coming from mobile devices than ever before. <a href="validURL">We help you get your mobile going.</a>';

It appears to be some IE CSS nightmare...

It's also weird that only the first image is linked, not all three . . .

I've tried several things, I'm stumped.... for the moment.

Posted 2 years ago #

webt
Member

ack, it stripped out tons o code, like the <a href tags . . .

I can send it through other means , email, IM whateve, if you need me too.

Posted 2 years ago #
Dude
Dude

Hey,
first I cleaned up the thread a bit - my lightbox thread was intended for another request (was not the answer to your question). The first answer I gave was (second post) is the correct one.

Can you post a correct link to your site please. The link http://wentransit.mobi doesn't work for me.

Posted 2 years ago #
webt
Member

my bad, i typed it incorrectly, it's http://webtransit.mobi . . .

And thanks for fixing my code sample!

I appreciate your input, but adding
<a href="http://website.com"><img src="my-image.jpg" alt="" title="" /></a>
didn't work, I suppose because it was in the middle of a php statement and it's html not php? In fact it gives an error:
Parse error: syntax error, unexpected '<' in /home/webtrans/public_html/wp-content/themes/display/index.php on line 58

I didn't mean to hijack this thread, it was just so closely related that I couldn't resist! :)

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

Looking at the site in FireBug, only the first image has a link attached to it so the 2nd and 3rd column images won't link anywhere in any browser.

Can you upload the code you've used to http://pastebin.com (selecting PHP as the Syntax Highlighting) and link back to it here?

James

Posted 2 years ago #
webt
Member

will do, thanks. I noticed that the link is only applied to the first one too...

here's the code:
http://pastebin.com/x9ekdZs3

Thanks for jumping in!

Posted 2 years ago #
webt
Member

and while talking about the Three Amigo's (the three images below the slider, I noticed they have a blank alt tag and I's like them to each have a different keyphrase in there. Should I open a new thread for that or can we address that too?

Posted 2 years ago #
Dude
Dude

Hey,
I think the code is wrong. I posted the corrected version here: http://pastebin.com/G3kdW6kS

Posted 2 years ago #
webt
Member

Thanks I'll try that today, I would have never thought of trying it that way.

Posted 2 years ago #
webt
Member

Ok I just tried it and it has two problems:
it places a second set of the three images (with no text and no link) below the original three and:
The three images and their text are placed vertically (in all browsers), on the screen instead of horizontally.
Screen cap: http://webtransit.mobi/images/SS2.png

The first one was easy to fix, removing:
` $placeholder[1] = $placeholder_image1;
$placeholder[2] = $placeholder_image2;
$placeholder[3] = $placeholder_image3; '
removes the second set of the three images at the bottom with no seen adverse effects. the three images above are still placed vertically instead of horizontally though.

I'm thinking we are almost there, but I'm out of time. I have to have this website ready for launch this afternoon. I just found that I can place widgets on the main page(?), so I'm going to try to create the desired effect with three text widgets real quick if that doesn't work I'm going to just go back to the original with no links on these images. I'll update the post either way, but if the three widget thing doesn't work I'm going to leave this post open. For usability sake we believe that it's very important that these three images be linked to a page.

One promising thing about your method is that I can now easily place an alt tag in there!

Posted 2 years ago #
webt
Member

SWEET!

Adding three text widgets to the main page worked!
http://webtransit.mobi

If I would have remembered that I can add widgets there earlier, I could have saved us all a lot of time, sorry about that!

I would definitely recommend this method to the next person that asks...

Posted 2 years ago #
Dude
Dude

Glad that you found a solution :)

Posted 2 years ago #