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
|
|
|
|
|
/**
|
|
|
|
|
* 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
|
|
|
|
|
*/
|
|
|
|
|
|
2017-12-01 10:02:26 +00:00
|
|
|
/**
|
|
|
|
|
* Packed overlay image gallery. All images adjusted to be same height and
|
|
|
|
|
* image caption being placed over top of image.
|
|
|
|
|
*/
|
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
|
|
|
class PackedOverlayImageGallery extends PackedImageGallery {
|
|
|
|
|
/**
|
|
|
|
|
* Add the wrapper html around the thumb's caption
|
|
|
|
|
*
|
2013-11-24 19:06:17 +00:00
|
|
|
* @param string $galleryText The caption
|
2022-03-07 20:38:44 +00:00
|
|
|
* @param MediaTransformOutput|false $thumb The thumb this caption is for
|
2013-11-24 18:40:30 +00:00
|
|
|
* or false for bad image.
|
2013-11-24 19:06:17 +00:00
|
|
|
* @return string
|
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 wrapGalleryText( $galleryText, $thumb ) {
|
|
|
|
|
// If we have no text, do not output anything to avoid
|
|
|
|
|
// ugly white overlay.
|
|
|
|
|
if ( trim( $galleryText ) === '' ) {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$thumbWidth = $this->getGBWidth( $thumb ) - $this->getThumbPadding() - $this->getGBPadding();
|
|
|
|
|
$captionWidth = ceil( $thumbWidth - 20 );
|
|
|
|
|
|
|
|
|
|
$outerWrapper = '<div class="gallerytextwrapper" style="width: ' . $captionWidth . 'px">';
|
2013-11-24 18:36:13 +00:00
|
|
|
|
2023-11-28 00:14:05 +00:00
|
|
|
return "\n\t\t\t" .
|
|
|
|
|
$outerWrapper . '<div class="gallerytext">' . $galleryText . "</div>"
|
|
|
|
|
. "\n\t\t\t</div>";
|
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
|
|
|
}
|
|
|
|
|
}
|