New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
<?php
|
|
|
|
|
/**
|
|
|
|
|
* Packed image gallery. All images adjusted to be same height.
|
|
|
|
|
*
|
|
|
|
|
* This program is free software; you can redistribute it and/or modify
|
|
|
|
|
* it under the terms of the GNU General Public License as published by
|
|
|
|
|
* the Free Software Foundation; either version 2 of the License, or
|
|
|
|
|
* (at your option) any later version.
|
|
|
|
|
*
|
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
|
* GNU General Public License for more details.
|
|
|
|
|
*
|
|
|
|
|
* You should have received a copy of the GNU General Public License along
|
|
|
|
|
* with this program; if not, write to the Free Software Foundation, Inc.,
|
|
|
|
|
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
|
|
|
* http://www.gnu.org/copyleft/gpl.html
|
|
|
|
|
*
|
|
|
|
|
* @file
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
class PackedImageGallery extends TraditionalImageGallery {
|
2013-08-23 23:22:06 +00:00
|
|
|
function __construct( $mode = 'traditional' ) {
|
|
|
|
|
parent::__construct( $mode );
|
|
|
|
|
// Does not support per row option.
|
|
|
|
|
$this->mPerRow = 0;
|
|
|
|
|
}
|
|
|
|
|
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
/**
|
|
|
|
|
* We artificially have 1.5 the resolution neccessary so that
|
|
|
|
|
* we can scale it up by that much on the client side, without
|
|
|
|
|
* worrying about requesting a new image.
|
|
|
|
|
*/
|
|
|
|
|
const SCALE_FACTOR = 1.5;
|
|
|
|
|
|
|
|
|
|
protected function getVPad( $boxHeight, $thumbHeight ) {
|
2013-08-24 15:06:25 +00:00
|
|
|
return ( $this->getThumbPadding() + $boxHeight - $thumbHeight / self::SCALE_FACTOR ) / 2;
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
protected function getThumbPadding() {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
protected function getGBPadding() {
|
|
|
|
|
return 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param File $img The file being transformed. May be false
|
2013-11-24 19:06:17 +00:00
|
|
|
* @return array
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
*/
|
|
|
|
|
protected function getThumbParams( $img ) {
|
|
|
|
|
if ( $img && $img->getMediaType() === MEDIATYPE_AUDIO ) {
|
|
|
|
|
$width = $this->mWidths;
|
|
|
|
|
} else {
|
|
|
|
|
// We want the width not to be the constraining
|
|
|
|
|
// factor, so use random big number.
|
|
|
|
|
$width = $this->mHeights * 10 + 100;
|
|
|
|
|
}
|
2013-11-24 18:36:13 +00:00
|
|
|
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
// self::SCALE_FACTOR so the js has some room to manipulate sizes.
|
|
|
|
|
return array(
|
|
|
|
|
'width' => $width * self::SCALE_FACTOR,
|
|
|
|
|
'height' => $this->mHeights * self::SCALE_FACTOR,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
protected function getThumbDivWidth( $thumbWidth ) {
|
|
|
|
|
// Require at least 60px wide, so caption is wide enough to work.
|
|
|
|
|
if ( $thumbWidth < 60 * self::SCALE_FACTOR ) {
|
|
|
|
|
$thumbWidth = 60 * self::SCALE_FACTOR;
|
|
|
|
|
}
|
2013-11-24 18:36:13 +00:00
|
|
|
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
return $thumbWidth / self::SCALE_FACTOR + $this->getThumbPadding();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
2013-11-24 18:40:30 +00:00
|
|
|
* @param MediaTransformOutput|bool $thumb the thumbnail, or false if no
|
|
|
|
|
* thumb (which can happen)
|
2013-11-24 19:06:17 +00:00
|
|
|
* @return float
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
*/
|
|
|
|
|
protected function getGBWidth( $thumb ) {
|
|
|
|
|
$thumbWidth = $thumb ? $thumb->getWidth() : $this->mWidths * self::SCALE_FACTOR;
|
2013-11-24 18:36:13 +00:00
|
|
|
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
return $this->getThumbDivWidth( $thumbWidth ) + $this->getGBPadding();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
protected function adjustImageParameters( $thumb, &$imageParameters ) {
|
|
|
|
|
// Re-adjust back to normal size.
|
|
|
|
|
$imageParameters['override-width'] = ceil( $thumb->getWidth() / self::SCALE_FACTOR );
|
|
|
|
|
$imageParameters['override-height'] = ceil( $thumb->getHeight() / self::SCALE_FACTOR );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Add javascript which auto-justifies the rows by manipulating the image sizes.
|
|
|
|
|
* Also ensures that the hover version of this degrades gracefully.
|
|
|
|
|
*/
|
|
|
|
|
protected function getModules() {
|
|
|
|
|
return array( 'mediawiki.page.gallery' );
|
|
|
|
|
}
|
2013-08-23 23:22:06 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Do not support per-row on packed. It really doesn't work
|
|
|
|
|
* since the images have varying widths.
|
|
|
|
|
*/
|
|
|
|
|
public function setPerRow( $num ) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
New more slick gallery display
This extension adds a "mode" parameter to the gallery
tag, allowing different formats for the gallery tag
(galleries in the ui can be controlled by a global)
The added modes are:
*traditional - The original gallery
*nolines - Like the original, no borders, less padding
*packed - All images aligned by having same height.
JS also justifies the images.
(I think this one is the one that will go over best
with users.)
*packed-overlay - like packed, but caption goes over
top the image in a transloucent box.
*packed-hover - like packed-overlay, but caption only
visible on hover. Degrades gracefully on screen
readers, and falls back to packed-overlay if
you are using a touch screen. I kind of like
this mode when the caption is not that important
(ex a category where its just the file name).
This also adds a hook to allow people to make their
own gallery version. I believe there would be interest
in this, as different people have done different
experiments. For example:
* Wikia: http://community.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext
* Wikinews: https://en.wikinews.org/wiki/Template:Picture_select
What I would like to see for this patch, is first it gets
enabled, with the default still "traditional". After
about a month or two we consult with users. If feedback
is positive, we change the default mode to one of the
others (probably "packed").
Adds a "mode" parameter to gallery for different
mode, including one 'height-constrained-overlay'
which looks much more like other modern websites.
Note: This makes one change to the old gallery format.
It makes Nonexistent files be rendered like thumbnails
(i.e. they are rendered with a little grey border).
One thing I'm slightly worried about with this patch,
is that I added an option to MediaTransformOutput::toHtml
to override the width attribute. I'm not sure if that
is the best approach, and would appreciate thoughts
on that.
This should be merged at the same time as Ie82c1548
Change-Id: I33462a8b52502ed76aeb163b66e3704c8618ba23
2013-06-08 04:47:07 +00:00
|
|
|
}
|