Changing banner displayed on a page with new page load!?

(25 posts) (3 voices)

  1. mporsild
    Member

    Hi,

    On one of my current sites (not wordpress) I have a top banner on all pages -- the banner displayed on any given page is pulling from a bank (folder) of images. Whenever a page is re-loaded or load a new page the banner changes randomly pulling an image from the 100 images in the folder. Hope that makes sense (to see, please go here http://www.PolarHusky.com/explore/chat )

    I would like to do the same on many of the pages in my new site using the Awake theme - is that possible?

    If you have different suggestions for solution depending on whether it is in 1.3 or the newest version would you mind detailing both?

    Thank you so much!

    Posted 8 months ago #
  2. Ruderic
    Support

    Hello,

    I guess you have a custom PHP or Javascript code that achieves that functionality. You would have to copy that same code in one of the PHP files of the theme.

    Where do you exactly want to position that banner? Could you please provide us a screenshot showing us your desired results?

    Posted 8 months ago #
  3. mporsild
    Member

    Ok, we finally have figured how to work it into design. It would only be on 2nd level pages and the thought is to put it in the intro space --- so one question is now, can we use one of your built in slide show option to get this effect?

    Key is that we would like the image showing to not 'rotate' while the user is on the page .. but more important: that it is random out of a pool of images, what image displays -- any good idea for how to do that?

    Thank you again!

    Attaching mock-up of design we would like:

    Attachments

    1. Black_2nd_leve.jpg (119.9 KB, 0 downloads) 7 months old
    Posted 7 months ago #
  4. Elliott
    Support

    Hello mporsild,

    You can get an image to display in the intro by selecting the custom raw html option, http://mysitemyway.com/docs/index.php?title=Page_Options#Intro_Options.

    And inserting your image like so,

    <div style = 'position: relative; left: -20px; top: -20px;'>
    <img src = '#' />
    </div>

    The div is for making it flush with the edges.

    Unfortunately having it rotate you would have to use a plugin or edit the PHP files.

    Posted 7 months ago #
  5. mporsild
    Member

    Ok, thank you for looking at it.

    While exploring the PHP option; Do you know of any plugin that would assist in this?

    Posted 7 months ago #
  6. mporsild
    Member

    Thank you for the link -- Tried a couple of the options; from installing plug-in to now working with a PHP option that seems very straightforward. But, nothing is working right! What are we missing? We even tried to put into page content instead to see if it would work there..

    Code used in Custom Raw Html field

    '
    <img src="http://2012.polarhusky.com/wp-content/uploads/randomfiles/header_<?php echo(rand(1,5)); ?>.jpg"
    width="image_width" height="image_height" alt="image_alt_text" />

    '
    The page it is on http://2012.polarhusky.com/?page_id=2

    Source of code: http://www.pearsonified.com/2006/10/simple_random_header_images_for_your_blog.php

    Thank you so much for your help, it is more than appreciated!

    Posted 7 months ago #
  7. Elliott
    Support

    It looks like your using PHP code inside the page content. PHP code needs to be used inside a PHP file or it will not execute.

    This isn't really that hard to do so I'll add it to our feature requests and we'll see if we can get a shortcode worked out in a future update.

    In the meantime I would try out some more plugins to see if any have a shortcode version.

    Posted 7 months ago #
  8. mporsild
    Member

    Ok, sounds good. That makes sense. Sorry for not knowing that. We will keep looking for a short code -

    Now you earlier wrote some code to put in if we are just using one image / to make it flush. We can also not get that to work...

    I just uploaded it right now for you to see -- hopefully you can tell me what we have to do different to deal with that part of it!

    http://2012.polarhusky.com/?page_id=2

    '<div style = 'position: relative; left: -20px; top: -20px;'><img src = 'http://2012.polarhusky.com/wp-content/uploads/randomfiles/header_5.jpg' /></div>'

    Thank you again!

    Posted 7 months ago #
  9. Elliott
    Support

    Try this,

    <div style = 'position: relative; left: -40px; top: 0px;'>
    <img src = 'http://2012.polarhusky.com/wp-content/uploads/randomfiles/header_5.jpg' />
    </div>
    <style type = 'text/css'>#intro_inner { margin: 0px auto !important; overflow: visible !important; }</style>
    Posted 7 months ago #
  10. mporsild
    Member

    That worked - beautiful - Thank you!

    Posted 7 months ago #
  11. mporsild
    Member

    Hi,

    A couple of months ago Elliot wrote "This isn't really that hard to do so I'll add it to our feature requests and we'll see if we can get a shortcode worked out in a future update."

    Is this still being considered, and any idea when if it is it might happen?

    Thank you!

    Posted 5 months ago #
  12. Elliott
    Support

    Hello mporsild,

    Open up /wp-content/themes/[your_theme]/lib/shortcodes/24-miscellaneous.php and at the bottom of the file you should see this,

    }
    
    ?>

    Right before that add this,

    /**
     *
     */
    function random( $atts = null, $content = null ) {
    
        if( $atts == 'generator' ) {
            $option = array(
                'name' => __( 'random', MYSITE_ADMIN_TEXTDOMAIN ),
                'value' => 'random',
                'options' => array(
                    array(
                        'name' => __( 'Images URL', MYSITE_ADMIN_TEXTDOMAIN ),
                        "desc" => __( 'Paste all of the image URLs that you would like to randomize here.', MYSITE_ADMIN_TEXTDOMAIN ),
                        'id' => 'content',
                        'type' => 'textarea',
                    ),
                    array(
                        'name' => __( 'Type', MYSITE_ADMIN_TEXTDOMAIN ),
                        'desc' => __( 'Choose which type of frame you wish to use.', MYSITE_ADMIN_TEXTDOMAIN ),
                        'id' => 'style',
                        'default' => '',
                        'options' => array(
                            'border' => __( 'Transparent Border', MYSITE_ADMIN_TEXTDOMAIN ),
                            'reflect' => __( 'Reflection', MYSITE_ADMIN_TEXTDOMAIN ),
                            'framed' => __( 'Framed', MYSITE_ADMIN_TEXTDOMAIN ),
                            'shadow' => __( 'Shadow', MYSITE_ADMIN_TEXTDOMAIN ),
                            'reflect_shadow' => __( 'Reflection + Shadow', MYSITE_ADMIN_TEXTDOMAIN ),
                            'framed_shadow' => __( 'Framed + Shadow', MYSITE_ADMIN_TEXTDOMAIN ),
                            'none' => __( 'None', MYSITE_ADMIN_TEXTDOMAIN ),
                        ),
                        'type' => 'select'
                    ),
                    array(
                        'name' => __( 'Image Height <small>(optional)</small>', MYSITE_ADMIN_TEXTDOMAIN ),
                        'desc' => __( 'You can set the image height here.  Leave this blank if you do not want to resize your image.', MYSITE_ADMIN_TEXTDOMAIN ),
                        'id' => 'height',
                        'default' => '',
                        'type' => 'text'
                    ),
                    array(
                        'name' => __( 'Image Width <small>(optional)</small>', MYSITE_ADMIN_TEXTDOMAIN ),
                        'desc' => __( 'You can set the image width here.  Leave this blank if you do not want to resize your image.', MYSITE_ADMIN_TEXTDOMAIN ),
                        'id' => 'width',
                        'default' => '',
                        'type' => 'text'
                    ),
                'shortcode_has_atts' => true,
                )
            );
    
            return $option;
        }
    
        extract(shortcode_atts(array(
            'style'       => '',
            'height'      => '',
            'width'       => '',
            'link_to'     => 'true',
            'prettyphoto' => 'true'
        ), $atts));
    
        if( preg_match_all( '!http://.+\.(?:jpe?g|png|gif)!Ui', $content, $matches ) ){
    
            $images = array();
            foreach ( $matches[0] as $img ) {
                array_push($images, $img);
            }
    
        }
    
        shuffle($images);
    
        if (isset($width)) { $width = ' width = "'.$width.'"'; }
        if (isset($height)) { $height = ' height = "'.$height.'"'; }
    
        if ($style != 'none') { return do_shortcode('[image_frame '.$width.$height.' style = "'.$style.'"]'.$images[0].'[/image_frame]'); }
        else { return '<img src = "'.$images[0].'" />'; }
    }
    

    You can then use it like so,

    [random style = "none" height="100" width="200"]
    http://www.yoursite.com/images/1.jpg
    http://www.yoursite.com/images/2.jpg
    http://www.yoursite.com/images/3.jpg
    [/random]
    Posted 5 months ago #
  13. mporsild
    Member

    Hi! Simply beyond excited that we are having a solution for this!!!

    Now, no masters at implementing it -- a couple of questions, as what we did so far has not made it happen:

    In the code for 24-miscellaneous.php you provide

    1) MYSITE_ADMIN_TEXTDOMAIN ---> Question: we replace this with what? the domain name.. so http://2012.polarhusky.com/
    (sorry that this is something I have to ask about)

    2) 'Paste all of the image URLs that you would like to randomize here.' ---> Question: is there any way to be pulling randomly from a folder as this will allow us to continuously add images to the bunch?

    Then once we have that done and go to paste in the short code, we do this in Custom Raw Html of each page we want to apply it to correct?

    If yes, right now we in this field what you suggested earlier (see below) - we delete this correct?

    <div style = 'position: relative; left: -40px; top: 0px;'><img src = 'http://2012.polarhusky.com/wp-content/uploads/randomfiles/header_5.jpg' /></div><style type = 'text/css'>#intro_inner { margin: 0px auto !important; overflow: visible !important; }</style>

    http://2012.polarhusky.com/?page_id=463#!prettyPhoto[portfolio_img_group_295]/0/

    Posted 5 months ago #
  14. Elliott
    Support

    1. That's for translating, you can leave it alone.

    2. We'll look into it for a future update.

    Posted 5 months ago #
  15. mporsild
    Member

    Hi Elliot,

    Ok we have the images rotating with new page loads - but each image does not fill out the space / not flush --

    The first screen shot (now.jpg) is how it looks now;
    The second screen shot is how we would like it (before.jpg). This second screen shot is from before when pulling one image and using the following code you provided us earlier that was added to the Custom Raw Html field as well (we have now deleted that)

    <div style = 'position: relative; left: -40px; top: 0px;'><img src = 'http://2012.polarhusky.com/wp-content/uploads/randomfiles/header_5.jpg' /></div><style type = 'text/css'>#intro_inner { margin: 0px auto !important; overflow: visible !important; }</style>

    Thank you for your help!

    Attachments

    1. before.jpg (72.6 KB, 0 downloads) 5 months old
    2. now.jpg (52.8 KB, 0 downloads) 5 months old
    Posted 5 months ago #
  16. mporsild
    Member

    Hi again,

    While we wait your response we now have two more quick questions that you can maybe answer at the same time -- this is our attempt to get around the issue of not being able to pull from a folder / having to identify all images we would like to pull now --

    1) Images used here are named ..header_1.jpg, header_2.jpg etc. We right now have 10 of these. We have tested adding an image url "header_12.jpg" that does not exists to a) the php file and b) the shortcode - And it works. This way we leave it open to add images not yet created and still not have to go in on each page and change the short code. Do you see any issue with this / we would like to go as high as 100?

    2) In the future the site will be moved to live on a different root url. Thus we try to use relative url's whenever possible .. we have tested using relative url instead of absolute in php file / page short code and this does not work for us. Is that not possible / any suggestions?

    Thank you again!

    Posted 5 months ago #
  17. Elliott
    Support

    You need to surround the shortcode with a div and position it 40px to the left and top but add a negative value in front. You already displayed the correct code in your post.

    1. It shouldn't matter how many images you use or what they are named.

    2. You'll have to use absolute path or take off the width / height parameters.

    Posted 5 months ago #
  18. mporsild
    Member

    "2. You'll have to use absolute path or take off the width / height parameters."

    Would this be in the php file or short code or both?

    Thank you thank you!

    Posted 5 months ago #
  19. Elliott
    Support

    Sorry, if you want to use a regular image then you would do this,

    [random style = "none"]

    If you want to use one of the image effects then you would do this,

    [random style = "framed_shadow" height="100" width="200"]

    We'll get a tutorial up when the next update comes out.

    Posted 5 months ago #
  20. mporsild
    Member

    Hi again,

    Made the change to `[random style = "none"] in short code and changed to relative url in both php and shortcode -- now there is no image showing at all.... ?

    Shortcode:

    <div style = 'position: relative; left: -40px; top: 0px;'>[random style = "none"]/images/header_1.jpg, /images/header_2.jpg[/random]</div><style type = 'text/css'>#intro_inner { margin: 0px auto !important; overflow: visible !important; }</style>

    php:
    "desc" => __( '/images/header_1.jpg, /images/header_2.jpg', MYSITE_ADMIN_TEXTDOMAIN ),

    Posted 5 months ago #
  21. mporsild
    Member

    Sorry, meant to include url -- here is the page we are testing on

    http://2012.polarhusky.com/?page_id=463

    Posted 5 months ago #
  22. Elliott
    Support

    Go ahead and use absolute paths for now. We'll look into changing it in the next update.

    Posted 5 months ago #
  23. mporsild
    Member

    Hi again - Ok, if at all possible we would like to implement the change now because it will mean updating hundreds of pages once we start creating pages here.. so if we can resolve it now that would be super-helpful.

    Posted 5 months ago #
  24. mporsild
    Member

    Never mind - we will place the images on a separate server that will not change.

    Thank you.

    Posted 5 months ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme