Hi,

I noticed that with several browsers, images are not visible until page refresh.
This is because images dimensions are not known by the browser until it downloads the image, so the element's height is 0 when javascript starts.

This issue doesn't occurs on the demo site because the css is customized with fixed dimensions.

theme_image_style() should be used as it tries to get image dimensions, and rdf metadata is added.

The following patch resolves this issue by adding a image_tag property to $image, directly used by the nivo-slider template.
(I kept image and settings properties for backward compatibility)

CommentFileSizeAuthor
#1 theme_image_style-1335138-0.patch1.69 KBmanu-manu

Comments

manu-manu’s picture

manu-manu
Primary language French
Location Aix-en-Provence
commented
Status: Active » Needs review
StatusFileSize
new theme_image_style-1335138-0.patch1.69 KB

Patch with issue number.

steelglass06’s picture

steelglass06 commented

Hi,

I've been having the same trouble. Wasn't sure if I placed my libraries incorrectly or something else entirely that was creating the problem. I'm not "code savy" so I apologize if this seems like a silly question. Hopefully Manu Manu or someone else could tell me where to place the patch code that manu manu provided? Thank you in advance!

Andrew

manu-manu’s picture

manu-manu
Primary language French
Location Aix-en-Provence
commented

Hi steelglass06,

Basically you have to replace the function andromeda_slideshow_block_view() in andromedia_slideshow.module near line 200 by this:

/**
 * Implements hook_block_view().
 */
function andromeda_slideshow_block_view($delta = '') {
  $block = array();
  $name = $delta;
  $slideshow = andromeda_slideshow_load_by_name($name);
  $images = andromeda_slideshow_load_slideshow_images($slideshow->sid);
  $type_name = isset($slideshow->settings['type']) ? $slideshow->settings['type'] : 'andromeda_slideshow';
  $theme = 'andromeda_slideshow_' . $type_name;
  $type = andromeda_slideshow_build_type($type_name);
  
  //build image style, tag and links
  $style_name = $slideshow->settings['image_style'];
  foreach ($images as $key => $image) {
    $tag = theme('image_style', array('style_name' => $style_name, 'path' => $image->uri, 'title' => $image->caption));
    $images[$key]->image_tag = $image->settings['link'] ? l($tag, $image->settings['link'], array('html' => true)) : $tag;

    $images[$key]->image = image_style_url($style_name, $image->uri);
    if ($image->settings['link']) {
      $images[$key]->settings['link'] = url($image->settings['link']);
    }
  }
  
  if (sizeof($images)) {
    $block['subject'] = $slideshow->title;
    $block['content']['#attached']['css'] = $type['styles'];
    $block['content']['#attached']['js'] = $type['scripts'];
    $block['content']['#markup'] = theme($theme, array('slideshow' => $slideshow, 'images' => $images));
  }
  
  return $block;
}

and the content of modules/andromeda_slideshow_nivo_slider/nivo-slider.tpl.php by this:

<div class="nivo-slider theme-pascal">
  <?php if ($images) : ?>
      <?php foreach ($images as $image) : ?>
        <?php print $image->image_tag; ?>
      <?php endforeach; ?>
  <?php endif; ?>
</div>

These modifications are quite safe but you should continue to follow this issue as the module's maintainer hasn't responded yet and may implement a proper way to resolve this issue..

BrendanP’s picture

BrendanP commented

#3 fix worked for me, thanks @manu

My issue was that webkit browsers, chrome(ium) / safari, where not displaying the slideshow on first view/load. I.e. you visit the site for the first time, the images are downloaded but not displayed. If you navigate away from the page and then return to the page with the slideshow, the images are read from the browser cache and displayed as expected.

shadcn’s picture

shadcn commented

Thanks for your help on this @manu manu, i'll commit this asap.

shadcn’s picture

shadcn commented
Status: Needs review » Reviewed & tested by the community
drBob-2’s picture

drBob-2 commented

Thanks for this great instuctions. The slideshow works very well after this new code. But now in structure/blocks the 'slideshow titles' are no longer there. It says 'no blocks in this region'. While the slideshows are there. When I put the original 'andromeda_slideshow.module' back, the 'slideshow titles' are back in 'structure/blocks'. Is there some code missing?

manu-manu’s picture

manu-manu
Primary language French
Location Aix-en-Provence
commented

Sorry, I forgot to mention that these modifications are for the dev version.

drBob-2’s picture

drBob-2 commented

I'm using the 'Andromeda Slideshow 7.x-1.x-dev (2011-nov-08)'. Still no sign of the slideshow titles in 'structure/blocks'.

drBob-2’s picture

drBob-2 commented

Did the whole 'process' again from scratch. And as by miracle they are there again. Sorry for the trouble.

shadcn’s picture

shadcn commented
Status: Reviewed & tested by the community » Fixed

ok committed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

andrea.orlando’s picture

andrea.orlando commented

same trouble after patch and after update at 2011-Dec-14 verson

azmchichi’s picture

azmchichi commented

subscribing

azmchichi’s picture

azmchichi commented

Bonjour,

I think the problem is that the browser loads the HTML code before the module calculates the size of the

slideshow from the used images.

To solve the problem temporarily, you have to assign the CSS proprieties "height" and/or "width" the size of the used style image.
for example:
in any CSS file (which we are sure it loads with the slideshow page ), you put:

.nivoSlider {
	height : 200px;
}

or (to determine the page )

.front .nivoSlider{
	height : 200px;
}

Excuse me for my English ! :D
--
Abdel.MA

maxrossello’s picture

maxrossello commented

This works but is not responsive to changes to the slider size

maxrossello’s picture

maxrossello commented
Status: Closed (fixed) » Active

I reopen this. Even with the patch, slideshow requires to click the home link after a refresh in order to show images on Chrome.
Firefox works as expected instead.

Through inspection, it turns out that the containing div is not set with an height attribute on Chrome.
Setting a value into css makes it unresponsive to changes in slideshow dimensions

sidog’s picture

sidog commented

I am also have the same issues even w/ the latest updates. No initial image load unless i click the home button

jcnventura’s picture

jcnventura
Primary language English
commented

Confirmed that this still happens in the latest dev.