Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Calculate images total width


Reply


5 Posts   1950 Views

Avatar
socks

Community Member, 190 Posts

27 March 2011 at 3:12pm

I'm spitting out a bunch of images for a gallery and I'll like to calculate the total width of those images.

I was doing in jQuery and got it to work for one gallery but haven't figured out how to do it when I have multiple galleries on the page as it was adding up all images on the page, not just the ones per gallery. So I thought maybe a function in my controller would be a better route. So, I'm looking for help with the function to do the calculation.

in my template I have:

<% control PortfolioWorks %>
<div class="scroll-pane">
      <% control PortfolioImages %>
<img class="portImage" src="$Attachment.URL" width="$Attachment.width" height="$Attachment.height">
       <% end_control %>
</div>
<% end_control %>

or if you think jQuery is the best option, this is what I have so far:
I figured I could make the above class - class="scroll-pane$Pos" but not sure how to do address that in the script without writing it a bunch of times, one for each… scroll-pane1, scroll-pane2, etc.

var totalWidth = 0;
$('.scroll-pane img').each(function() {
totalWidth += $(this).outerWidth();
$('.scroll-pane').css("width", totalWidth);
});

thanks

Avatar
Nathan Cox

Community Member, 99 Posts

28 March 2011 at 12:21am

OK I haven't test this and it's kind of late but off the top of my head I'd say your JS needs to look like this:

$('.scroll-pane').each(function() {
   var totalWidth = 0;
   $('img', this).each(function() {
      totalWidth += $(this).outerWidth();
   });
   $(this).css("width", totalWidth+"px");
});

Basically it says for each .scroll-pane, it loop over it's child images images (in jQuery "$('img', this)" will get all images that are children of the current object).

I'm not sure what your controller looks like but I'm thinking if you want to do it server-side you'd need to have something like a TotalWidth method or attribute on whatever PortfolioWorks is returning.
So if PortfolioWorks is a pageor dataobject that has_many images, give it a method something like this:

function TotalWidth() {
   $width = 0;
   foreach ($this->PortfolioImages() as $portfolioImage) {
      $width += $portfolioImage->Attachment()->Width;
   }
   
   return $width+'px';
}

and call it in your template like

<% control PortfolioWorks %>
<div class="scroll-pane" style='width:$TotalWidth'>
   <% control PortfolioImages %>
      <img class="portImage" src="$Attachment.URL" width="$Attachment.width" height="$Attachment.height">
   <% end_control %>
</div>
<% end_control %>

Avatar
socks

Community Member, 190 Posts

28 March 2011 at 8:18pm

Thanks Nathan for the help.

I was able to get the jQuery to work after changing the css to $('.portfolio', this).css("width", totalWidth); Thanks for the explanation, it helped me figure it out. Unfortunately, the jQuery is either not running after all the images are loaded or something else is causing me pain because it's not working every single time.

I tried to play with the php method version but was unable to get it to work. If you have time, here's the bigger picture (have a dom nested in a dom)…

PortfolioWork.php

class PortfolioWork extends DataObject {

   public static $has_one = array (
      'PortfolioPage' => 'PortfolioPage'
   );
   
   static $has_many = array (
      'PortfolioImages' => 'PortfolioImage'
   );

}

PortfolioImage.php

class PortfolioImage extends DataObject {
...
   static $has_one = array (
      'PortfolioWork' => 'PortfolioWork',
      'Attachment' => 'Image'
   );

}

PortfolioPage.php

class PortfolioPage extends Page {
...
   public static $has_many = array (
      'PortfolioWorks' => 'PortfolioWork'
   );

}

class PortfolioPage_Controller extends Page_Controller {
   
   function TotalWidth() {
    $width = 0;
    foreach ($this->PortfolioImages() as $portfolioImage) {
    $width += $portfolioImage->Attachment()->Width;
    }

    return $width+'px';
   }
   
}

Thanks again

Avatar
Nathan Cox

Community Member, 99 Posts

28 March 2011 at 8:26pm

You're just trying to get the total width of images in each PortfolioWork right, not the combined width of all images on the PortfolioPage? It looks like you need to put TotalWidth() in PortfolioWork rather than PortfolioPage, since inside <% control PortfolioWorks %> you're dealing wiht the PortfolioWork rather than the containing page.

Avatar
socks

Community Member, 190 Posts

31 March 2011 at 1:18pm

Thanks Nathan, that worked. And I got the jQuery to work as well. :-) Yes I was just getting the width of each PortfolioWork.