Banner - rotating pictures?

DavidColburn · July 2013

Is it possible to use a file of pictures and to rotate which is displayed when people visit the Forum?

vrijvlinder · July 2013

You can try the apt ads plugin

http://vanillaforums.org/addon/aptads-plugin

Linc · July 2013

I'd just find a nice jQuery image rotater and hack it into the default.master.php template in your theme.

DavidColburn · July 2013

Oh you would, would you? ;-)

What if you were a pre-HTML 4 code-duffer, like me, who hasn't even figured out jquery yet?

Y'alls gonna get me into a lot of trouble if you keep suggesting I hack master templates without a proper clue ...

You going to get me out of trouble when I break something? :-)

Seriously, that sounds like a more-elegant & less-complex solution than AptAds (which I have, btw, already loaded).

Any chance you have a jquery image rotator in mind ... and a proper location in default.master.php into which to shoehorn it without breaking things?

Thanks!

Linc · July 2013

First, make sure you have your own theme. Don't hack the default.master.tpl in core (I just remembered it's now .tpl, not .php)

Second, it's the line with "logo" in it. You can replace the whole line, if you want.

I don't know a particular image shuffler, no. I don't do much theming these days.

vrijvlinder · July 2013

http://malsup.com/jquery/cycle/

http://wowslider.com/jquery-image-rotator-terse-blur-demo.html

about where to put it in the master, it is the same as html but with some php mixed in if it is a default.master.php theme and in the tpl if it is that kind of master. It looks like html and you can insert it cleverly if have some grasp of html.

You can also use the pockets plugin to add this stuff in there.

You can also use categoryImageheader to add images to the categories header, or other plugins that add images elsewhere from the discussions.

Or the Marquee plugin to add a marquee where you can add a string of images and looks like a slider.

DavidColburn · July 2013

Imagine a bobble-head doll.

Now imagine the head of that doll left out in a windstorm ... you just did that to my head!

I think I now have shaken code-baby syndrome. :-)

I will print this and think about it ... after some coffee and a quick errand ...

DavidColburn · July 2013

So if I go to: /applications/dashboard/views/default.master.php

As I try to work my way through the early lines my guess is that I'd want to insert the code from here:
malsup.com/jquery/cycle/basic.html
somewhere inside the "head"?

<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
<head>
   <?php $this->RenderAsset('Head'); ?>
</head>
<body id="<?php echo $BodyIdentifier; ?>" class="<?php echo $this->CssClass; ?>">
   <div id="Frame">
      <div id="Head">
         <div class="Menu">
            <h1><a class="Title" href="<?php echo Url('/'); ?>"><span><?php echo Gdn_Theme::Logo(); ?></span></a></h1>

vrijvlinder · July 2013

Yes but not in that file you must not edit any files in the dashboard/

You must use a custom theme , or clone the default theme and put it in the themes folder.

But yes that is where you would insert it , you would either use

<? php echo'your html ';?> or add straight html and add the div class to the div you are putting in there so you can apply css later.

I tested the wow slider and it works very well and easy.

http://vrijvlinder.com/cosmicjustice/themes/HeavyMetal/gallerywow/iframe_index.html

You just drag and drop you images and choose the settings
then you publish by saving in a folder and ftp to the your custom theme folder

then just embed the iframe like you would any iframe or object in the area you want.

vrijvlinder · July 2013

I moved this section

< div id="Head" >
         < div class="Menu" >
  < h1 >< a class="Title" href="< ?php echo Url('/'); ? >"> < span >< ?php echo Gdn_Theme::Logo(); ?>< /span >< /a >< /h1 >

like this on my themes

< div id="Head" >
(this is where you could insert your slider remove the stuff you don't want) < h1 >< a class="Title" href="<?php echo Url('/'); ?>">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 >
         < div class="Menu" >

to make the banner above the menu and control height

DavidColburn · July 2013

OK, I created a new folder "oache", added design and views sub folders, copied about, readme, and screenshot to the first folder then favicon.png and settings.css to the design folder and default.master.php to the view folder.

I am guessing that I need to rename default.master.php - perhaps to oache.php or something like that and then edit it?

phreak · July 2013

I didn't have a decent look into this. But make sure you have a Close-Button connected to a cookie, so the users who click it away, wil have it away, otherwise they'd be angry with this popping up every page they visit.

vrijvlinder · July 2013

no the name default master stays the same , you don't need the settings.css? or is it style.css , that is for the dashboard settings. Anyway the one you want is the style.css

You only change the name of the theme folder and the about.php of the theme. Rename the style.css to custom.css

The favicon goes in the design folder as well as the css file and images in the image folder inside design folder as well.

DavidColburn · July 2013

Would this be better for my simple need and simple code knowledge?

Are these things I can host on my server host or must I link out?

ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

I would, of course, need to change the image links and names.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">.slideshow{height:232px;width:232px;margin:auto}.slideshow img{padding:15px;border:1px solid #ccc;background-color:#eee}</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.slideshow').cycle({fx:'fade'});});</script>
</head>
<body>
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
    </div>
</body>
</html>

vrijvlinder · July 2013

Actually I tested this one below but if that works for you then it is good too. If you do try the wow,

http://wowslider.com/jquery-image-rotator-terse-blur-demo.html

you download the free program and just drag and drop the images and set it up like you want. Then publish and save to a folder on your desktop then ftp the folder to your theme folder and then just take the source link to the iframe file

use < iframe src="url to iframe"> < /iframe >
in the spot you want the thing to appear. seems less code than above .

there are several ways to do this actually . But if you go with the one you posted all you need to add into the master is the script parts and put them in the head section of that document and only add the parts in the divs

so, add the scripts in the head

then ad the < div class="slideshow" > in the spot you want it.

vrijvlinder · July 2013

Are these things I can host on my server host or must I link out?

ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

this one get's it from the source library

this one you need to host after you download just put it in a folder called js and add it to your theme folder.

cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

DavidColburn · July 2013

Then I change this line, contained in the HTML I copy into default.master.php,

From: <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle>/jquery.cycle.all.latest.js"></script>

To: <script type="text/javascript" src="js//jquery.cycle.all.latest.js"</script> ?

vrijvlinder · July 2013

Yes that's right you need to point it to where the file is but add the full url to it like this
< script type="text/javascript" src="http://yoursite.com/themes/yourtheme/js/jquery.cycle.all.latest.js"< /script >

vrijvlinder · July 2013

What you can also do is save that html with the images and js like the demo , save it as an iframe, it is a bit of a round about but it is less code in the long run .

here you can make your iframes using that html and then save the file and just use < iframe > tags to generate it.

http://7thspace.com/webmaster_tools/iframe_generator.html

however this what that wow slider program does for you . It automatically generates the necessary html files and comes with the js and css files to edit further. I think it is a good option.

DavidColburn · July 2013

Well, my new theme partially displays OK but the top part shows a group of small empty boxes a the top, a bunch of blank spaces, and this code (below which are the discussions and the list of discussion categories):
< div id="Head" > < h1 >< a class="Title" href="/">< span >< ?php echo Gdn_Theme::Logo(); ? >< /span >< /a >< /h1 > < div class="Menu" >

WDYT I broke?

DavidColburn · July 2013

OK, dumb pill ... I had .com in one place and needed to add .org for all of the image links. Sigh.
Anyhow, I now have a box at the top that dimly displays a slightly-perceptible change of colors, and below that is still the text I previously posted ... progress but still no images ...

Banner - rotating pictures?

Comments