WordPress.org

Support

Support » Plugins and Hacks » WP Vegas » [Resolved] Issues with a single image

[Resolved] Issues with a single image

  • Andrei G

    @27shutterclicks

    Hi,

    Thanks for the plugin, really what I was looking for.

    I ran into some issues in the beginning and I wanted to provide some feedback for you and anyone else who may need it.

    First, the documentation is quite unclear about how to use it. It does say to use the shortcode, but that’s not very intuitive. For example, I did not want the shortcode associated with a certain page and I wanted to make it part of the header.

    I eventually got to the forum and saw that do_shortcode can be used in the header, but that failed in my first attempts. The fix was to NOT use the shortcode as given on the post page, but to use the complete shortcode using the fade and overlay parameters, as per the documentation. Without specifying fade and overlay parameters, it simply won’t activate. It would be nice if these were specified as part of the plugin’s default values so that it can also be used without them.

    Second, my initial goal was to use a single background image and then allow other users to add images as needed down the road.

    However, I realized that if only a single image is uploaded to a slider, then it won’t work. You need two or more images for any background image to be displayed.

    After poking through the plugin code, I realized that is due to the logic used in building out the javascript needed.

    You’re counting the number of items in the array after exploding it and then you deduct 1. But, if the array only contains a single item/image, then deducting 1 makes it 0 and the FOR loop that follows won’t even start.

    I changed the code as follows, and that fixed my issue and it now allows to upload a single image as well:

    $imagenum = count($image) ;
    if ($imagenum > 1){ $imagenum = $imagenum -1 ;}
    wp_enqueue_style( 'vegas', plugins_url('/css/jquery.vegas.css', __FILE__));
    
    ?>
    
    <script>
    jQuery( function() {
      jQuery.vegas('slideshow', {
      backgrounds:[
    <?php
    
      for($i = 0;$i < $imagenum;$i++){
        echo "{ src:'" . $image[$i] . "', fade:" . $atts['fade'] . " },"; //get image
      }
    
    endwhile; ?>

    Third, for those who want to add the shortcode to the header using echo do_shortcode, it must be added after wp_head() call. Otherwise, it will not work.

    This is a great plugin and if the documentation were to be more complete, I think it would be even more awesome.

    Thanks.

    http://wordpress.org/extend/plugins/vegas-fullscreen-background-slider/

Viewing 15 replies - 1 through 15 (of 39 total)
  • Andrei G

    @27shutterclicks

    Actually, there may be no need to deduct 1 after all, as the for loop already looks at a number smaller than the count.

    So this may be better suited. Sorry, didn’t quite test it previously:

    $imagenum = count($image) ;
    wp_enqueue_style( 'vegas', plugins_url('/css/jquery.vegas.css', __FILE__));
    
    ?>
    
    <script>
    jQuery( function() {
      jQuery.vegas('slideshow', {
      backgrounds:[
    <?php
    
      for($i = 0;$i < $imagenum;$i++){
        echo "{ src:'" . $image[$i] . "', fade:" . $atts['fade'] . " },"; //get image
      }
    
    endwhile; ?>
    Plugin Author jamesdbruner

    @jamesdbruner

    Hello 27shutterclicks! Thanks for your input and I appreciate the code. I’ll update the plugin to reflect your changes hopefully this weekend if I get some time off. Also I really am going to go through and try to clean up the documentation so it’s more clear. I’ve been meaning to do that for a while now…

    Plugin Author jamesdbruner

    @jamesdbruner

    Okay, I’ve updated the plugin to reflect your single image code, added super sized arrows and delay parameter and I’ve tried to clean up the description to make it easier to understand how to use the plugin… I was wondering if I could get your opinion on the description/documentation specifically.

    Also any other recommendations/suggestions are appreciated as well.

    Andrei G

    @27shutterclicks

    Hi there.

    Alright, so the documentation is a lot better. Very nice, thanks.

    I installed the new version of the plugin on a test site and went through the initial setup process again. Here’s my process and some suggestions:

    Upon installing and activating the plugin, I went to Vegas Slides and created a new slide, uploaded some images and published.

    I then copied the shortcode provided on the slide page where the images were uploaded and pasted it into a new blog post.

    Nothing happened.

    I then added the additional paramaters, like this: delay =”2000″ overlay=”” arrows=”yes” (within the shortcode).

    That made it appear and function correctly.

    So the shortcode provided on the slide page is still not intuitive, as per my original post. What appears there should either be:

    1. Just the ID, so that it can be plugged in the shortcode as per the documentation.
    2. A complete shortcode, with all details added, as per the documentation, so that it can be simply copied and pasted into a page, post, etc.

    Here’s an example of the shortcode that should appear on the respective slide page:

    [vegasslider id=”27″ fade=”1500″ delay =”2000″ overlay=”” title=”no” arrows=”yes”]

    This would make it much easier for people to get started faster, without further headaches.

    About the arrows and title:

    The newly added arrows are a nice touch, but they move as the page scrolls. So if the page is longer vertically, when you drag the scrollbar down the arrows move up with the content, up to a point where they’re no longer in view. This means you have to scroll back up in order to use them. I think ideally, they should be fixed so they’re always in the same position regardless of scrolling. Same for the title.

    Some other suggestions:

    I feel that the plugin should have a settings page where one can easily configure default parameters like fade, delay, overlay and whether arrows and title are displayed or not (via checkboxes).

    Imagine that different shortcodes are used in different pages and posts. If I want to change the delay for all, I have to go in every page or post and change the value. This would be cumbersome. Being able to go to the plugin settings and adjust the value there would be far easier.

    Also on the plugin settings page, there could be a checkbox that would enable the slider globally (equivalent to adding it to the header). Feels like this would be the more likely scenario that people would primarily want to use the plugin for. This would make it more accessible, rather than having to edit the header.php.

    If slider is enabled globally, you could specify the slider id via input field (in case there are multiple Vegas Slides defined).

    Hope this helps and thanks for your efforts.

    Andrei G

    @27shutterclicks

    Oh, one more thing. During development of a theme, I find myself constantly using the Developer Tools to inspect html and css.

    When the slider is enabled and the Developer Tools window is opened (in Chrome for example), it actually causes the code to shift down every time the animation occurs. So if you’re trying to track a certain piece of code, every 2-3 seconds it shifts up and down, which is very distracting.

    I ended up adding //stop in the plugin code when I don’t want the animation happening, so that I can test and debug the theme easily.

    So if the plugin had a settings page, my suggestion would be to have an option for AutoPlay (yes/no) via checkbox, so that users can choose where slideshow plays automatically (or if it’s advanced manually via the arrows).

    Alternatively, this autoplay could be made available via shortcode parameters, similar to fade, delay, overlay, etc.

    Thanks

    – Andrei

    Plugin Author jamesdbruner

    @jamesdbruner

    Okay… So far I’ve added an autoplay parameter, made it so the shortcode generator gives you the full shortcode, made the title and arrows fixed positioning.

    Preferably I’d like to steer clear of a settings page. I don’t feel as if anything here really warrants one aside from the global option. I’m still trying to work out how to do that exactly but like I said, I’d rather not do a settings page.

    Andrei G

    @27shutterclicks

    Nice!

    You’re trying to work out how to do a settings page or how to do the global option?

    Plugin Author jamesdbruner

    @jamesdbruner

    The global option without the use of a settings page. I’ll work on it more tomorrow. 🙂 If I can get that out of the way, then I’ll release version 1.2 and probably be done for a while since my spring break is coming to an end.

    Andrei G

    @27shutterclicks

    I was gonna say that I don’t see how it could be done without a settings page… but there may be a way.

    The Slide edit screen could have an additional metabox with a checkbox like “Make slider global”.

    When saving the post, you could use the built-in WordPress functions like get_option, add_option, update_option, delete_option(), to save the setting to the db.

    Then, you could use an action to output stuff to wp_head maybe.

    See if you can find some inspiration in this plugin: http://www.devdevote.com/cms/wordpress-plugins/add-to-header

    Plugin Author jamesdbruner

    @jamesdbruner

    Well, the good news it that you convinced me to try and create my first settings page and that I’ve added the page successfully… and even made a little bit of head way into figuring out how this all works… but I’m a bit confused now… I was wondering if I could email you and maybe you could take a look at what I’ve got so far…

    Plugin Author jamesdbruner

    @jamesdbruner

    Ahh, nevermind. I found my problem. I wasn’t using register_setting correctly and it wasn’t saving properly. Hopefully I’ll have version 1.2 out shortly!

    Thanks for your suggestions and help! 🙂 Also if you could rate the plugin that would be very appreciated.

    Andrei G

    @27shutterclicks

    Sure, I’ll be happy to rate the plugin. It’s really turning into a very nifty thing. Great job!

    Here are some links that may help in creating the settings page and making the most of the WordPress functions. You may already be aware of these, but just in case:

    http://codex.wordpress.org/Settings_API
    http://ottopress.com/2009/wordpress-settings-api-tutorial/

    For the Settings link, it would ideally appear on the plugins page, next to Deactivate and Edit (http://www.hughlashbrooke.com/wordpress-add-plugin-settings-link-to-plugins-page/), and also grouped with the Vegas Slides menu, so you’d have:

    Vegas Slides
    – Vegas Slides
    – Add Slide
    – Settings

    Plugin Author jamesdbruner

    @jamesdbruner

    The last two things I’m trying to do are add a global option (just haven’t gotten around to figuring out how I’m going to do it) and saving check boxes. I can’t seem to find too much help on that. Other than that, you can save fade/delay from the settings page which I have already grouped with the plugin as you suggested. I’ve gone through otto’s tutorial and it’s pretty good! Thanks for the resources 🙂

    Andrei G

    @27shutterclicks

    For saving checkboxes, you may find some help here: http://codex.wordpress.org/Creating_Options_Pages

    For the global option, if the option is selected (checkbox checked), you could output your regular shortcode (echo do_shortcode) to wp_head possibly.

    See my previous link: http://www.devdevote.com/cms/wordpress-plugins/add-to-header

    Download the plugin and look through the code. It basically does the same thing… outputting stuff to the header via WordPress action hooks.

    add_action('wp_head', array('add_to_header', 'front_add_data'));

    So all you’d need is something similar to this:

    function output_vegas_shortcode_to_head( $slide_id )
    {
    //do_shortcode…
    }
    add_action( ‘wp_head’, array(‘vegas_slides’, ‘output_vegas_shortcode_to_head’));

    Plugin Author jamesdbruner

    @jamesdbruner

    Yeah… I’m still having trouble with saving the checkbox.. I’m able to save the fade/delay/title just fine but I’m really confused on how to apply update_option to the checkbox…

    public function check_fade($input){
            if(is_numeric($input['Fade'])){
    	    $Fade = $input['Fade'];
    	    if(get_option('fade') === FALSE){
    		add_option('fade', $Fade);
    	    }else{
    		update_option('fade', $Fade);
    	    }
    	}else{
    	    $Fade = '';
    	}
    	return $Fade;
        }

    That’s how I’m saving/updating the fade but applying that to a checkbox doesn’t work haha

Viewing 15 replies - 1 through 15 (of 39 total)
  • The topic ‘[Resolved] Issues with a single image’ is closed to new replies.
Skip to toolbar