HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Gallery customization: thumbnail size (width / height)

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#63978 (In Topic #13803)
Avatar

Honoured member

Hi,

I want to create a big community gallery. Unfortunately often there are pictures with ratio 4:3, 3:4, 16:9, 19:6 and other exotic sizes. But I want to realize it like the following example:

279 views (438 Kb)

There are some predifined boxes (140 x 105px) and all the boxes should be filled with the images. The first image e.g. is to thin. That is why there is space on the right side. But I do not want this space. The other boxes are ok. I want to maintain the original ratio. With CSS I only can define width OR height, but I want both.

ocPortal only supports making thumbnails with a predifined width. But I need making thumbnails something like this:

Attachment

Download: gallery.png (8 Kb, 0 downloads so far)



I only want to use the middle of the thumbnails. The other parts I would cut off with overflow:hidden.

The program should simply work in this way:

if (picture-width < picture-height) do
resize width to 140px;
else
resize height to 105px;


I hope you will understand what I mean

Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
Posted
Rating:
#64134
Avatar

Honoured member

Is there no solution for my problem?

I would do it by myself, but I don't know, which files I have to edit …

Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
Posted
Rating:
#64135
Avatar

I would guess it's possible, but would require some high level CSS skills and a lot of time.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#64424
Avatar

Honoured member

Hi Chris,

over the last weekend I made some changes by my own.

First I want to show you the results:







What is new?
  • All the gallery thumbnails have the same size.
  • The gallery pictures all have the same wide.
  • Unfortunately I had to delete the hover effect of the thumbnails, because I decided to embed the thumbnail as an background image, so I could place it centered. And I don't know if the css background function supports an hover command.
Which files I've changed?

sources/images.php

Code

   // Derive actual width x height, for the given maximum box (maintain aspect ratio)
   // ===============================================================================
   $sx=imagesx($source);
   $sy=imagesy($source);
   
   // make thumbnail 140x105
   
   if ($box_width==200)
   {
      if (($sx<=$sy) || (($sx/$sy)<(4/3)))
      {
         $_width=140;
         $_height=intval(($sy*140)/$sx);
      }
      elseif (($sx>$sy))
      {
         $_width=intval(($sx*105)/$sy);
         $_height=105;
      }
   }
   
   // make picture 900 x variable height
   
   elseif ($box_width==900)
   {
      if ($sx<=900)
      {
         $_width=$sx;
         $_height=$sy;
      } else
      {
         $_width=900;
         $_height=intval(($sy*900)/$sx);
      }
   } else
   {

      if ($width==0) $width=1;
      if ($height==0) $height=1;
I had to change this file to get customize thumbnail and picture sizes.

box_width==200 is the value you could define under Setup -> Configuration -> Feature options -> Thumbnail width OR Setup -> Configuration -> Feature options -> Maximum image size

themes/mytheme/css/galleries.css

Code

.gallery_media_expose {
   overflow: hidden;      /* overflow: auto; */
   outline: 0;
   float: {!en_left};
   margin: 8px 4px 0 4px;   /* margin: 8px 8px 0 0; */
   width: 142px;         /* width: 152px; */
}

.gallery_regular_thumb {
   /* border: 1px solid #6b81a1; */ /* {$,wizard, 100% medborder.border} */
   /* background-color: #e3e9f2; */ /* {$,wizard, 100% sb_color } */
   font-size: 0.85em;
}

.gallery_tooltip_description {
                     /* float: left; */
   margin-bottom: 0.85em;   /* margin-right: 10px; */
   max-width: 245px;      /* max-width: 100px; */
}
themes/default/templates/GALLERY_ENTRY_SCREEN.tpl

GALLERY_ENTRY_SCREEN.tpl

themes/default/templates/GALLERY_IMAGE.tpl

Attachment
» Download: GALLERY_IMAGE.tpl (1.41 Kb, 240 downloads so far)


themes/default/templates/GALLERY_REGULAR_MODE_SCREEN.tpl

Attachment
» Download: GALLERY_REGULAR_MODE_SCREEN.tpl (1.36 Kb, 237 downloads so far)


themes/default/templates/GALLERY_SUBGALLERY.tpl

Attachment
» Download: GALLERY_SUBGALLERY.tpl (533 Bytes, 236 downloads so far)


themes/default/templates/IMG_THUMB.tpl

Attachment
» Download: IMG_THUMB.tpl (139 Bytes, 251 downloads so far)


Please not that you copy the customized files only to the _custom folders.

I guess Chris wouldn't like it but for me it works perfect :cool:

Maybe you could embed something like that in a newer version of ocPortal. I think it looks much better than the original way.

Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
Posted
Rating:
#64427
Avatar

Well-settled

Thanks seems like a better layout, I'll give it a try, what do you think Chris?

Falko would you support this for the next version if Chris decides not to?

Can this be made into an addon ?
Back to the top
 
Posted
Rating:
#64467
Avatar

Honoured member

Hi Violative,

I only presented my results in the hope, something like that could be implemented in a future version of ocPortal. As I said it works perfect, but I don't know yet which side wide byeffects my changes will have. You can try the gallery under http://www.andromedaforum.de/site/pg/galleries. Note: the files are written for my fixed-width layout of 980px, thumbnail size 140 x 105 and picture size 900 x variable.

Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
Posted
Rating:
#64478
Avatar

We'll use a few of your CSS changes, the IF_NON_EMPTY around the description, the better tooltip layout, and the overflow setting change :).

The rest is quite specific to the thumbnail size you've chosen and I don't want to fiddle with our code too much because ours was also tuned to get things neat on 1024x768.

However, I do agree, and better thumbnailing has been on my mind. I didn't realise it wasn't already on the tracker so I've documented what I'd like us to eventually implement:
0000213: Better thumbnail control - ocPortal feature tracker


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#65992
Avatar

Community saint

I know this thread's a few months old, but I thought you'd like to know that I've beefed up the thumbnailing support for templates and this work has now been merged into ocPortal, and is available in the 6.0 beta. The thumbnail symbol, $THUMBNAIL, used to take parameters (in order) of the image URL, the desired size (width and height separated by a lowercase x), the directory to save thumbnails to, an optional filename to use and an optional fallback in case the thumbnail fails. This continues to work as it always has, but in addition to these I've added some new optional parameters which give a lot more control over the results.

The first specifies what type of scaling you want. It can be "crop" (fits to the smaller dimension and crops the longer one), "pad" (fits to the longer dimension, pads the smaller one), "width" (fits to the given width, regardless of the resulting height), "height" (fits to the given height, regardless of the given width) or the combinations "pad_vert_crop_vert" (fit to width, padding or cropping the height as necessary) or "pad_horiz_crop_horiz" (fit to height, padding or cropping the width as necessary).

If you choose one of the padding or cropping options then the next parameter determines where this should be applied, either "start" (the left and top), "end" (the right and bottom) or "both" (top and bottom or left and right equally).

The next parameter, if you've chosen a padding option, determines what the padded area is filled with. This can either be "none" (effectively 'padding with emptiness', ie. there is no padding, the image is shrunk to fit within the given dimensions), a hex colour code like "FFFFFF" or "#FFFFFF" to pad with that colour (in the order RRGGBB), or a hex colour+alpha code like "FFFFFFFF" or "#FFFFFFFF" to pad with that colour and transparency (in the order RRGGBBAA, with an alpha of "00" being fully transparent and "FF" being fully opaque). If you leave out this parameter then the average colour of the image will be calculated and the padding will be filled with that. Note that if you specify an alpha channel then you'll end up with a PNG, even if the original is in another format, or you specify something like ".jpg" in your filename parameter (in this case it will have ".jpg.png" at the end).

Finally, the last parameter specifies whether we should ignore images smaller than the given dimensions, indicated by a "1", or whether we should increase their size to the given dimensions anyway, indicated by a "0".

I hope this comes in handy for everyone. I've already made extensive use of it a few times myself :D
Back to the top
 
Posted
Rating:
#73094
Avatar

Honoured member

Hi Chris,

actually I'm having semester break, so I can spend more time again for ocPortal :)

I'm trying to implement my gallery adjustments to ocPortal 7.x. Unfortunately I don't know, where to use the $THUMBNAIL command. So first of all I played around with the sources/images.php and discovered the following:

Code

...

else
{
// Thumbnail-specific (for the moment) behaviour. We require the ability
// to crop (ie. window-off a section of the image), and pad (ie. provide a
// background around the image). We keep this separate to the above code
// because that already works well across various aspects of the site.
//
// Format of the array is 'type'=>'crop' or 'type'=>'pad'; 'where'=>'end',
// 'where'=>'start' or 'where'=>'both'. For padding, there is an optional
// 'background'=>'RRGGBBAA' or 'background'=>'RRGGBB' for colored padding
// with or without transparency.

// Grab the dimensions we would get if we didn't crop or scale
$wrong_x = intval(round(floatval($sx) / $thumb_options['scale']));
$wrong_y = intval(round(floatval($sy) / $thumb_options['scale']));

...
This seems to crop the thumbnail and does the similiar like the $THUMBNAIL command? But unfortunately it doesn't work for me. I don't know what to put for the last parameter:

Code

function convert_image($from,$to,$width,$height,$box_width=-1,$exit_on_error=true,$ext2=NULL,$using_path=false,$only_make_smaller=false,$thumb_options=NULL)
I tried something like this:

Code

function convert_image($from,$to,$width,$height,$box_width=-1,$exit_on_error=true,$ext2=NULL,$using_path=false,$only_make_smaller=false,$thumb_options=array('scale'=>1,'type'=>'pad_vert_crop_vert','where'=>'both'))
What I have to use for 'scale' ???

I want to use your solution for thumbnail scaling / cropping, but I don't have a clue and need some tips :(

I really try to understand your code, but it's so much stuff so that I often lose the overview.

Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
Posted
Rating:
#73122
Avatar

Community saint

Hi Falko,

You've found the thumbnail code alright, but that's actually the messy backend part. I still get confused following it sometimes, and I wrote it ;) What you should be editing is the template, which is the front-end part. Templates can be found in the themes/*/templates and themes/*/templates_custom folders (your custom templates should be saved into a templates_custom folder to prevent them getting nuked during upgrades). There's a tutorial on theming in general here ocPortal Tutorial: Designer themes, implementing a clean-room design - ocPortal (esp. the "lots of xhtml template editing" section).

ocPortal templates are written in a custom language called "Tempcode", which behaves a little bit like LISP (but with {braces} rather than (brackets)). The templates you're after start with "GALLERY_". Parameters are passed into templates from PHP, and are referenced using names like {THIS}.

Let's say that the {IMAGE_URL} parameter is the URL of the image being displayed. To thumbnail it we'd wrap it in the THUMBNAIL symbol (symbols start with $), like this: {$THUMBNAIL,{IMAGE},100x100,gallery_thumbs,,,pad,start,#FF000099}. This will take the comma-separated parameters, including the URL {IMAGE}, and give out the URL to a thumbnail. With these particular options, the image will be shrunk to fit within a 100x100 square, then any extra space will be filled with a semitransparent red (FF=red, 00=green, 00=blue, 99=alpha), with the image at the bottom right. This thumbnail will be saved in the uploads/gallery_thumbs folder. If there is an error making the thumbnail, the URL {IMAGE} will be given out instead.

Templating is a little strange to get one's head around, but is very powerful once you get the hang of it. There's a comprehensive Tempcode guide here, which I always have open ocPortal Tutorial: Tempcode programming - ocPortal

Note that if you do want to do this from PHP instead, take a look at the code that links the {$THUMBNAIL} symbol to the convert_image function. In the SVN repository this is the "_symbol_thumbnail" function in sources/images.php, but in older versions you might find it in the "THUMBNAIL" case of the huge switch statement in sources/symbols.php. The comma-separated parameters are accessible through the $params argument.

Hope that helps :)
Back to the top
 
Posted
Rating:
#73385
Avatar

Honoured member

Thanks Chris,

that helped me a lot :thumbs:

I think you would like to know, that I'm using your function now. It's awesome :cool:
But I made some customisations by my own:

I quoted out some lines in /sources/images.php -> function _symbol_thumbnail and changed one line in /sources/uploads.php -> underneath "// Generate thumbnail if needed" so I could use directly during the upload of images without an additional directory. Each thumbnail is stored only onth on my webspace :)

The only thing I shouldn't use now is the website cleanup tools -> Image thumbnail.
That would resize everything.

Attachment
» Download: images.php (34 Kb, 162 downloads so far)


Attachment
» Download: uploads.php (22 Kb, 172 downloads so far)


Best regards
Falko

ANDROMEDA - Das junge Beobachterforum :)
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: