Jump to:

23552 Posts in 19349 Topics by 2891 members

General Questions

SilverStripe Forums » General Questions » Calculate images total width

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

Page: 1
Go to End
Author Topic: 1824 Views
  • socks
    Avatar
    Community Member
    190 Posts

    Calculate images total width Link to this post

    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

  • Nathan Cox
    Avatar
    Community Member
    99 Posts

    Re: Calculate images total width Link to this post

    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 %>

  • socks
    Avatar
    Community Member
    190 Posts

    Re: Calculate images total width Link to this post

    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

  • Nathan Cox
    Avatar
    Community Member
    99 Posts

    Re: Calculate images total width Link to this post

    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.

  • socks
    Avatar
    Community Member
    190 Posts

    Re: Calculate images total width Link to this post

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

    1824 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.