sam.christiansen

Steven,

I’d be happy to help any way I can. I’ve actually prototyped this doing it all with client-side javascript for parsing the exif data. My only issue is that I’m a total wordpress noob and don’t know how to write plugins.

There is a nice client-side exif parser in JS available here:

https://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html

That is what I used. I’d be happy to share the code I wrote to do this with you if you’d like.

thanks,
sam

Just wanted to follow up – after updating to version 1.9 of the plugin recently, I just switched to apply the style to the ribbon and it seems to be working great.

thanks,
sam

Hi,

Here is the CSS that I added:

.slider-wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
}

.nivoSlider-dummy {
    margin-top: 26%; /* 960x250 */
}

div .theme-default .nivoSlider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* show me! */
    /*
    background-color: silver;
    */
}

Unfortunately, I don’t know if there is a good answer about how to programmatically determining the percentage figure. I knew that our header the image was going to be 960×250. 250 / 960 => 26%. I suppose if you knew the width/height of the slider (maybe you could look at the first source image width/height?), then you could calculate this.

I have also seen people do the auto-resizing with JavaScript, but the CSS solution seems a bit more elegant. I can look into the JavaScript version of resizing if you think it would be a better option.

thanks,
sam

Hi,

I was worried about mucking with the “ribbon” div, because I wasn’t sure what it was for! It could be I could have re-used it. I can give it a try if you’d like.

Here is the snippet of code I changed, in oik-nivo-slider/nivo.inc:

sdiv( $class );
    sdiv( "slider-wrapper theme-${theme}" );
    if ( $ribbon )
      sediv( "ribbon" );
    sediv( "nivoSlider-dummy" );
    sdiv( "nivoSlider", "slider-$slider_id" );
    $funcname = bw_funcname( "bw_format_nivo", $atts['post_type'] );
    foreach ( $posts as $post ) {
      $funcname( $post, $atts );
    }
    ediv();
    ediv();
    ediv( $class );

Pretty simple, just adding “nivoSlider-dummy”. The CSS is pretty simple for it.

I’m sorry if there is an obvious mistake; I’m just learning PHP.

thanks,
sam