Slider assistance required for show theme


(Chris) #1

Novice user needs assistance with slider banner in show. Cannot seem to get my images to display and replace the example ones. I changed the 1st slider to this:


to test but a blank image appeared on preview.

Below is the original code from the show theme tutorial

Page built with Stacks.

Show includes a FREE Stack called "Gridly" that you can use to create pages like this!

Learn More

Slide 2

Slide 3

Slide 4

Slide 5


(scott williams) #2

To show code on here, highlight the code and click the </> button in the toolbar if the editor


(Chris) #3

&lt;div id="myExtraContent1"&gt; &lt;div class="wt-slider"&gt; &lt;div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"&gt; &lt;div class="s-item"&gt; &lt;h1&gt;Page built with Stacks.&lt;/h1&gt; &lt;p&gt;Show includes a FREE Stack called "Gridly" that you can use to create pages like this!&lt;/p&gt; &lt;a href="#two" class="button scrolly"&gt;Learn More&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"&gt;&lt;div class="s-item"&gt;&lt;h1&gt;Slide 2&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"&gt;&lt;div class="s-item"&gt;&lt;h1&gt;Slide 3&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"&gt;&lt;div class="s-item"&gt;&lt;h1&gt;Slide 4&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"&gt;&lt;div class="s-item"&gt;&lt;h1&gt;Slide 5&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

thanks for your help - here is the code which I’m using from the show theme. I have the image I want to use in resources. When i replace (images/banners/banner_1.jpg)%) to (resources/banner_1)%) i get a blank. I guess I am doing it totally wrong.


(Doug Bennett) #4

Not sure how you put the code into the forum or your project.

<div id="myExtraContent1">
	<div class="wt-slider">
		<div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)">
			<div class="s-item">
				<h1>Page built with Stacks.</h1>
				<p>Show includes a FREE Stack called "Gridly" that you can use to create pages like this!</p>
				<a href="#two" class="button scrolly">Learn More</a>
			</div>
		</div>
		<div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"><div class="s-item"><h1>Slide 2</h1></div></div>
		<div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"><div class="s-item"><h1>Slide 3</h1></div></div>
		<div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"><div class="s-item"><h1>Slide 4</h1></div></div>
		<div class="s-slide" style="background-image:url(%pathto(images/banners/banner_1.jpg)%)"><div class="s-item"><h1>Slide 5</h1></div></div>
	</div>
</div>

Above is from http://preview.weaverthemes.com/show/extras/tutorials/


(Doug Bennett) #5

Make sure you paste as plan text.
To use resources try
Replacing the entire url statement:
url(%pathto(images/banners/banner_1.jpg)%)
With:
url("%resource(my-image.jpg)%")

Change the my-image.jpg With the image name.


(Chris) #6

Unfortunately it didn’t work but thanks for trying to help me.


(Doug Bennett) #7

I don’t have the theme you are using, a URL to the site might help. Can you post the code as you have it on the site?
Might contact the developer.


(Chris) #8

Thank you again - this is the tutorial that provides instructions to add the slider banner. http://preview.weaverthemes.com/show/extras/tutorials/

It works correctly with this code and his images but replacing the images with my own and making it work is proving an issue. I did email him but as yet have had no reply.


(Doug Bennett) #9

That’s why we need to see Your Code and your URL. There is something you are doing differently. I already referenced the tutorial URL above. When working with CSS, HTML, and inserting resources something as simple as a comma or bracket will “break” the site.

Without seeing what you have there’s no way to get help.