Image Gallery for the blog demo

I have added a Image Gallery functionality to the enhanced blog demo by a request from a user.

You can download the source from here, and can try out the demo.

Please enjoy :D

Thank you very much.

Quote

Thank you very much.

You’re welcome. BTW I made it prettier. Please try the demo again.

GREAT!!!

How to use:

(1) Upload your image in the Image Gallery page.

(2) Create a blog article having following syntax for this image.

Quote

*[imagename](filename.jpg)

That's all.

C.f. http://www.yiiframew…oc/cookbook/12/

So nice mocapapa  ;D

Help a little about css

in main.css file append

.image-squares img {

    max-width: 100px;

    max-height: 75px;

}

And in your td contain img tag will have class="image-squares" . So every image have the same size row of table will look better.

Can add a div tag out side the table with style="height: 400px; overflow-Y: auto;" so will auto scroll when table content reach max height 400px we will have vertical scroll bar

Just my modified when test and hope you will interest  ;)

Hi daonhack,

Thanks for your comment. :) Though I haven’t tried your idea, I just changed it a bit. Actually, I have added a bounding-box feature to the thumbnails. The size of the bounding-box of the thumbnails can be configured by the parameter (config/params.php).

And you can see that the "Highslide" capability is enabled for the thumbnails.

As I know I have to take care of the situation when the number of thumbnails exceeds, say 10, I may want to have a pagenation (or scrolling, as you said) functionality there.

Quote

So nice mocapapa  ;D

Help a little about css

in main.css file append

.image-squares img {

    max-width: 100px;

    max-height: 75px;

}

And in your td contain img tag will have class="image-squares" . So every image have the same size row of table will look better.

Thank you for contributing to make it prettier. When this style limits the maximum size of the image, how is the aspect ratio of the image?

My idea in the previous post is that the bounding-box of the image can be configured, and the image fits this bounding-box. The algorithm follows.



<?php


$size=getimagesize($current.$file);


$bb = Yii::app()->params['imageThumbnailBoundingbox'];





if ($size[0] > $bb && $size[1] <= $bb)


  $whtext = 'width';


else if ($size[0] <= $bb && $size[1] > $bb)


  $whtext = 'height';


else if ($size[0] > $bb && $size[1] > $bb)


  if (1.0 <= $size[1]/$size[0])


    $whtext = 'height';


  else


    $whtext = 'width';


?>





<?php echo CHtml::link(CHtml::image($url, 'image', array($whtext=>$bb)), $url, array('class'=>'highslide')); ?>





Yep, i did not thought about HighSlide :) . Thanks mocapapa.

highslide is not free for commersial website… :(

any Javascript tool for image gallery that is free for commercial website???

screenshot:

Posted Image

I have not noticed because I am running non commercial site…

I have added a feature that enables to copy the text string of the file name to the clipboard using a jQuery plug-in (http://bradleysepos.com/projects/jquery/clipboard/). It is useful for a user to post a blog article with the image having been uploaded.

As I assume several browsers are supported by this plug-in, there may be some cases where it does not work for a certain browser. Please report in case.

You can download it from here, and have fun :)

Hi all, I just remember that someone told about blank validation of the formmodel of the yii-blogdemo-enhanced. I have fixed this bug, and you can see the code. Sorry that I haven’t realized for some time.

Nice work. If I want to delete multiple image using checkbox then how to do that. Can you help me?

Sorry I haven’t come here for many months. Though I would not show the direct code of it, I don’t think it is difficult. Make another form having activeCheckBox in the view (gallery.php), and catch these information in the controller and delete them.

Can get the source code of the gallery…