Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Banner - rotating pictures?

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

Tagged:
«13456

Comments

  • LincLinc Detroit Admin

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

  • 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!

  • LincLinc Detroit Admin

    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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • 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 ...

  • 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>
    
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited 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

  • 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?

  • phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP

    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.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited 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.

  • 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>
    
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited 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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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

  • 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> ?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited 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 >

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited 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.

  • 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?

  • 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 ...

Sign In or Register to comment.