Inserting Images onto My Website's Slider

[aaronoafc]

Hi Guys,

Basically, I run a website www.internetwresltingnews.com - It is actually a blog hosted on blogspot...Now I'm thinking of getting a new theme for the site so I can have a "Top Stories" Slider somewhere on the page...

Now...the website is all run online...It wasn't coded on my machine so I don't have any html files, however, If i was to get a theme that contained a slider for top stories....HOW would I get an image on that slider....

For example...let just say a top story is something about football...and I want a picture of a football as the picture for that story...on the "top stories" slider...How would I do it? I've looked at code on other sites and due to their website's files being local on their machine, they all have paths like "img src="/./whatever/documents/images" or something along those lines...

How would I do it if i had an image on my computer which had either been taken off the internet or whatever then wanted to use it as a "Top Stories" image on my slider.

Thanks in Advance
Aaron

[SeattleMicah]

This requires much more than simple html.

What you will be doing is setting up a div that includes via php/javascript your predefined posts, and certain elements of those posts i.e. the thumbnail, the title, a snippet of the post, etc.

If your totally lost I would just find a nice theme that has this already laid out for you.

http://www.elegantthemes.com/demo/?theme=Evolution

[aaronoafc]

Hi mate,

It's not the actual "Slider" Im wanting to code...just how I would put the image on the slider.

For example a slider with scrolling images...each image has an assigned story...

say a slider off...football image (football related story)....cricket image(cricket story) etc...

but how would I upload the image? is it possible? other websites have the image locally on their machine in an "images" folder which they put in the path in HTML...

However mine would be online with nowhere to put that due to the theme being ONLINE...not LOCAL.

Thanks
Aaron

[SeattleMicah]

well either way you will be loading the file on the server so that the website can call for the image via a path based on your domain i.e. yourdomain.com/home/images/theimageyouwant.png.

And as far as inserting it into the post that all depends how the slider works. Is the slider pulling from dynamic posts? are the various slides predefined?

[aaronoafc]

No, here is the code, I would be wanting to add an <img src="..."> after each item

<div id="top-stories" class="block h250">
<div class="controls">
<h2>Top Stories</h2>
<span>

</span>
</div>
<div class="slider-wrap">
<ul class="slider" type="none">
<li>
<a href='http://www.internetwrestlingnews.com/2012/05/breaking-news-randy-orton-suspended.html' class='caption'>
<h3>BREAKING NEWS: Randy Orton Suspended For 60 Days</h3>

</a>
</li>
<li>
<a href='http://www.internetwrestlingnews.com/2012/05/early-wm29-plans-for-undertaker-wwe.html' class='caption'>
<h3>The Undertaker's WM29 Opponent, WWE Woried By Raw Rating</h3>
</a>
</li>

<li>
<a href='http://www.internetwrestlingnews.com/2012/05/smackdown-spoilers-for-this-fridays.html' class='caption'>
<h3>*Spoilers* WWE Smackdown Results For Friday's Show!</h3>
</a>
</li>
</ul>
</div></div>

You can change the link to another article

[SeattleMicah]

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO I get it now.

You can use a image hosting site like imageshak.us, have them host the image, and using their provided link, then insert in your html like below.

PHP Code:

<div id="top-stories" class="block h250">
<div class="controls">
<h2>Top Stories</h2>
<span>

</span>
</div>
<div class="slider-wrap">
<ul class="slider" type="none">

<li>
<img src=".../images/yourimage1.png"/>
<a href='http://www.internetwrestlingnews.com/2012/05/breaking-news-randy-orton-suspended.html' class='caption'>
<h3>BREAKING NEWS: Randy Orton Suspended For 60 Days</h3>

</a>
</li>
<li>
<img src=".../images/yourimage2.png"/>
<a href='http://www.internetwrestlingnews.com/2012/05/early-wm29-plans-for-undertaker-wwe.html' class='caption'>
<h3>The Undertaker's WM29 Opponent, WWE Woried By Raw Rating</h3>
</a>
</li>

<li>
<img src=".../images/yourimage3.png"/>
<a href='http://www.internetwrestlingnews.com/2012/05/smackdown-spoilers-for-this-fridays.html' class='caption'>
<h3>*Spoilers* WWE Smackdown Results For Fridays Show!</h3>
</a>
</li>
</ul>
</div></div> 


[aaronoafc]

Thanks a lot buddy!