There are a number of slideshows you can use with your WordPress blog but these are often required in the main body of the blog page, in this tutorial we will walk you through installing the cu3er Slideshow as used in our wedding theme.
We have created a new function for adding code calls to a page or post:
View the new post here: Cu3er Slideshow and More
.
We have used this plugin in the our wedding theme, the cu3er slideshow WordPress plugin from 18Elements uses a category to feed the display, you can view: The Wedding Theme here.
To have the slideshow embedded in the home page we cannot use a sidebar widget so you will have to add a line of code to the home page, this tutorial will use a 2.4 version theme created with the Artisteer template maker.
Stylesheet
We need to add a style to the stylesheet for our slideshow container, as we want to pad the slideshow, add borders, change margins to suit our theme, to start we need to open our style.css and find these two style blocks making a note of the width settings, this will be used to calculate your slideshow width.
/* begin Layout */
.art-content-layout
{
display: table;
padding: 0;
border: none;
width: 996px;
}
/* begin LayoutCell, content */
.art-content-layout .art-content
{
width: 75%;
}
We now know the width of our theme and we can calculate the width of our slideshow 996px * 75% = 747px we will be adding a nice left and right margin of 25px and padding 5px to suit our theme, different themes will need adjusting, so our div width = 747 – 60 = 687px we rounded this to 685px to suit our theme.
Next step open our demo-custom.css or style.css file and paste in the code below.
/* begin LayoutCell, sidebar1 */
.art-content-layout .demo-slideshow
{
margin-top: 7px;
margin-bottom: 7px;
margin-left: 25px;
margin-right: 25px;
padding: 5px;
width: 685px;
border: dotted 2px #D1D1D1;
}
Include file
Next step is to create an include php file for our Slideshow which will be called from the index.php, copy the code below and paste into a new text editor file and save this as demo-slideshow.php .
<div class="demo-slideshow">
<div class="inner">
<!-- cu3er Slideshow Start -->
<?php if ( function_exists('install_cu3er') ) { install_cu3er(); } ?>
<!-- cu3er Slideshow End -->
</div>
</div>
The last code step is to add a call to include our new file in our home.php or index.php or any other page file we may want the gallery on, find this line <div class=”art-layout-cell art-content”> and insert the code below on the next line.
&amp;lt;!-- demo Slideshow Start --&amp;gt; &amp;lt;?php if (file_exists(TEMPLATEPATH. '/demo-slideshow.php')) include(TEMPLATEPATH. '/demo-slideshow.php'); ?&amp;gt; &amp;lt;!-- demo Slideshow End --&amp;gt;
Cu3er Setup
We can now adjust the settings from Admin > Settings > Cu3er, enter the width and height to match our theme, we have worked out the width from the two values we noted earlier, and you can suppress the slideshow category by following the other tutorial on this website.
Notice
Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.
All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Membership
We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.
You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.
this website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.
The Slideshow isn’t showing up for me when I click to the wedding dress site. I can see the dotted line border / placeholder but that’s all.
Paul
Paul,
Working fine here, might be high server traffic!
Let us know how you get on with installing this in your Atahualpa ‘framework’ theme!
David
The Slideshow isn’t showing up for me when I click to the wedding dress site. I can see the dotted line border / placeholder but that’s all.
Paul
Paul,
Working fine here, might be high server traffic!
Let us know how you get on with installing this in your Atahualpa ‘framework’ theme!
David
I’ve just taken another look at your Wedding Dress demo site.
Cu3er header is working in Explorer 8 (and looks great!!), but it is still just showing as a blank dotted place holder in Firefox.
Paul
Hi Paul,
It is working fine here with Internet Explorer and FireFox, it may be an issue with your PC and FireFox, no one else has reported a problem and the Cu3er I am using is a WordPress plugin, also there is no feedback there about the slideshow not working.
Regards
David
B.T.W. the blocking on your websites header graphic is called artifacting, it happens when a jpg is saved many times as each time it is saved it is rebuilt and pixels are thrown away causing the artifact blocks, a tip is to work with tiff images and only save as jpg at the last moment, the bad one I see in FireFox was “Bride_and_groom_confetti_WEB.jpg”
I’ve just taken another look at your Wedding Dress demo site.
Cu3er header is working in Explorer 8 (and looks great!!), but it is still just showing as a blank dotted place holder in Firefox.
Paul
Hi Paul,
It is working fine here with Internet Explorer and FireFox, it may be an issue with your PC and FireFox, no one else has reported a problem and the Cu3er I am using is a WordPress plugin, also there is no feedback there about the slideshow not working.
Regards
David
B.T.W. the blocking on your websites header graphic is called artifacting, it happens when a jpg is saved many times as each time it is saved it is rebuilt and pixels are thrown away causing the artifact blocks, a tip is to work with tiff images and only save as jpg at the last moment, the bad one I see in FireFox was “Bride_and_groom_confetti_WEB.jpg”
David,
I don’t have a in my index.php file. I am using the original sectional theme I sent you. I tried putting it after
but it didn’t work.
It would be great if you could provide a SQL export with the theme.
David,
I don’t have a in my index.php file. I am using the original sectional theme I sent you. I tried putting it after
but it didn’t work.
It would be great if you could provide a SQL export with the theme.
Thanks for your tutorial, so far so good
Today I exported a fresh new template with the latest Artisteer and installed the latest cu3er slideshow plugin, then followed your guide step by step. But I cannot find a section in the index.php file.
However the file contents
in line 2-3 and I placed the code right after. Unfortnunately nothing is displayed, no error, no blank space so I guess it needs to be inserted at a different position. Here is a zip of the file btw: “link removed” if you could lend me a hand.
Thanks in advance.
Michael
Thanks for your tutorial, so far so good
Today I exported a fresh new template with the latest Artisteer and installed the latest cu3er slideshow plugin, then followed your guide step by step. But I cannot find a section in the index.php file.
However the file contents
in line 2-3 and I placed the code right after. Unfortnunately nothing is displayed, no error, no blank space so I guess it needs to be inserted at a different position. Here is a zip of the file btw: “link removed” if you could lend me a hand.
Thanks in advance.
Michael
Hi,
I have looked at the code and that is fine, have you installed and activated the cu3er plugin?
If you email me the theme zipped up I will have a look, but if the file is there and the name and path matches (case sensitive), cu3er is installed, and the style.css and index.php is edited then it should be working.
David
Hi,
I have looked at the code and that is fine, have you installed and activated the cu3er plugin?
If you email me the theme zipped up I will have a look, but if the file is there and the name and path matches (case sensitive), cu3er is installed, and the style.css and index.php is edited then it should be working.
David
Another change I stumbled upon is that the new version of Artisteer also renamed the “.art-content-layout” to “.art-contentLayout” if you were trying to edit the css.
Thanks for the tutorial and the quick response per mail!
kind regards,
Michael
Just to let others know, this has been resolved, the problem was copying the code from the blog, there is an option on the code to copy to clipboard, please use that rather than selecting and copying as additional html tags for ” etc are added to the copied code.
Glad it is now working!
David
Thanks to your description I have cu3er running really well now (Thanks!!!)and was able to adjust it to my needs. One mystery I was not able to handle is that clicking on a link always opens a new window in firefox. The Cu3er website says that the behaviour on links can be steered by giving the link target=”" attribute.
I tried link target=”_top” link target=”_self” but they both open a new window on click.
You can see the generated content for cu3er here: http://www.myrddin.de/wp-content/plugins/cu3er-post-elements/config.php
Do you have any idea what might be causing this? If it is related to Cu3er at all?
Thanks in advance.
Michael
Another change I stumbled upon is that the new version of Artisteer also renamed the “.art-content-layout” to “.art-contentLayout” if you were trying to edit the css.
Thanks for the tutorial and the quick response per mail!
kind regards,
Michael
Just to let others know, this has been resolved, the problem was copying the code from the blog, there is an option on the code to copy to clipboard, please use that rather than selecting and copying as additional html tags for ” etc are added to the copied code.
Glad it is now working!
David
Thanks to your description I have cu3er running really well now (Thanks!!!)and was able to adjust it to my needs. One mystery I was not able to handle is that clicking on a link always opens a new window in firefox. The Cu3er website says that the behaviour on links can be steered by giving the link target=”" attribute.
I tried link target=”_top” link target=”_self” but they both open a new window on click.
You can see the generated content for cu3er here: http://www.myrddin.de/wp-content/plugins/cu3er-post-elements/config.php
Do you have any idea what might be causing this? If it is related to Cu3er at all?
Thanks in advance.
Michael
Hey. I'm fresh with wordpress, but im starting to get the point.
I've got the question:
I cant find
/* begin Layout */
.art-content-layout
{
display: table;
padding: 0;
border: none;
width: 996px;
}
/* begin LayoutCell, content */
.art-content-layout .art-content
{
width: 75%;
}
in my style.css
Hi,
The css 'code' is version 2.4, open style.css and text search for art-content
Earlier versions widths are fixed pixels.
Regards
David
This works great.
One question, though. Can you loop the slideshow?
thanks
The slideshow loop question has now been resolved.
Not sore how it happened, but it is working now
Great site this, Thanks for your efforts.
I am jut experimenting with the slider. Got it working. The only problem I get is that the images load fine but immediately become 'part' obscured before reappearing (see site below). They are 720 x 400. I dont understand what settings I should use for timer left and top padding and excerpt area queue time and left and top padding !. Or is it something else causing this ?
Site is business11.getonthenet.org
Any help much appreciated
Si