[www-doc] [Git][VideoLAN.org/websites][master] 3 commits: carousel: fix display of portrait images
Jean-Baptiste Kempf
gitlab at videolan.org
Tue Jan 19 23:04:29 CET 2016
Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites
Commits:
e8ddca60 by David Loiret at 2016-01-19T23:03:58Z
carousel: fix display of portrait images
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
d63f68e1 by David Loiret at 2016-01-19T23:03:58Z
carousel: add drawScreenshots function
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
96da3fd3 by David Loiret at 2016-01-19T23:03:58Z
Use drawScreenshots function in download pages
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
18 changed files:
- www.videolan.org/include/os-specific.php
- www.videolan.org/style/slick-theme.scss
- www.videolan.org/vlc/download-altlinux.php
- www.videolan.org/vlc/download-android.php
- www.videolan.org/vlc/download-appletv.php
- www.videolan.org/vlc/download-archlinux.php
- www.videolan.org/vlc/download-chromeos.php
- www.videolan.org/vlc/download-debian.php
- www.videolan.org/vlc/download-fedora.php
- www.videolan.org/vlc/download-freebsd.php
- www.videolan.org/vlc/download-gentoo.php
- www.videolan.org/vlc/download-ios.php
- www.videolan.org/vlc/download-redhat.php
- www.videolan.org/vlc/download-slackware.php
- www.videolan.org/vlc/download-suse.php
- www.videolan.org/vlc/download-ubuntu.php
- www.videolan.org/vlc/download-windowsphone.php
- www.videolan.org/vlc/download-winrt.php
Changes:
=====================================
www.videolan.org/include/os-specific.php
=====================================
--- a/www.videolan.org/include/os-specific.php
+++ b/www.videolan.org/include/os-specific.php
@@ -523,6 +523,33 @@ function getScreenshots($os) {
return isset($screenshots[$os]) ? $screenshots[$os] : null;
}
+function getImageOrientation($imgPath) {
+ $aspect = 'landscape';
+ if (substr($imgPath, 0, 4) != "http" && substr($imgPath, 0, 2) == '//') {
+ $imgPath = 'http:'.$imgPath;
+ }
+ $size = getimagesize($imgPath);
+ if ($size[0] < $size[1]) {
+ $aspect = 'portrait';
+ }
+ return $aspect;
+}
+
+function drawScreenshots($screenshots) {
+ echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
+ $first = true;
+ foreach($screenshots as $screenshot) {
+ $src = $first ? $screenshot['src'] : '';
+ $srcLazy = $first ? '' : $screenshot['src'];
+ $dom = '<div class="screenshot2 '.getImageOrientation($screenshot['src']).'">';
+ $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
+ $dom .= '</div>';
+ echo $dom;
+ $first = false;
+ }
+ echo '</div></div>';
+}
+
/*
* Draw the download section.
* If a OS is given it will draw a carousel of screenshots instead of a VLC icon.
@@ -546,18 +573,7 @@ function drawVLCdownloadSection($os = null, $dropdownItems = null, $displayMainO
</div>
<?php
} else {
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'"/>';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
+ drawScreenshots($screenshots);
}
?>
<div class="v-align <?php echo is_null($screenshots) ? 'col-sm-7' : 'col-sm-5'?>">
=====================================
www.videolan.org/style/slick-theme.scss
=====================================
--- a/www.videolan.org/style/slick-theme.scss
+++ b/www.videolan.org/style/slick-theme.scss
@@ -80,6 +80,10 @@ $bg-color-hover: rgba(0, 0, 0, 0.4);
@include aspect-ratio(16, 9);
}
+#header-carousel .screenshot2.portrait img {
+ max-height: 100%;
+}
+
#header-carousel img {
text-align: center;
max-width: 100%;
=====================================
www.videolan.org/vlc/download-altlinux.php
=====================================
--- a/www.videolan.org/vlc/download-altlinux.php
+++ b/www.videolan.org/vlc/download-altlinux.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-android.php
=====================================
--- a/www.videolan.org/vlc/download-android.php
+++ b/www.videolan.org/vlc/download-android.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-appletv.php
=====================================
--- a/www.videolan.org/vlc/download-appletv.php
+++ b/www.videolan.org/vlc/download-appletv.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-archlinux.php
=====================================
--- a/www.videolan.org/vlc/download-archlinux.php
+++ b/www.videolan.org/vlc/download-archlinux.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-chromeos.php
=====================================
--- a/www.videolan.org/vlc/download-chromeos.php
+++ b/www.videolan.org/vlc/download-chromeos.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-debian.php
=====================================
--- a/www.videolan.org/vlc/download-debian.php
+++ b/www.videolan.org/vlc/download-debian.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-fedora.php
=====================================
--- a/www.videolan.org/vlc/download-fedora.php
+++ b/www.videolan.org/vlc/download-fedora.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-freebsd.php
=====================================
--- a/www.videolan.org/vlc/download-freebsd.php
+++ b/www.videolan.org/vlc/download-freebsd.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-gentoo.php
=====================================
--- a/www.videolan.org/vlc/download-gentoo.php
+++ b/www.videolan.org/vlc/download-gentoo.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-ios.php
=====================================
--- a/www.videolan.org/vlc/download-ios.php
+++ b/www.videolan.org/vlc/download-ios.php
@@ -21,20 +21,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-redhat.php
=====================================
--- a/www.videolan.org/vlc/download-redhat.php
+++ b/www.videolan.org/vlc/download-redhat.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-slackware.php
=====================================
--- a/www.videolan.org/vlc/download-slackware.php
+++ b/www.videolan.org/vlc/download-slackware.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-suse.php
=====================================
--- a/www.videolan.org/vlc/download-suse.php
+++ b/www.videolan.org/vlc/download-suse.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-ubuntu.php
=====================================
--- a/www.videolan.org/vlc/download-ubuntu.php
+++ b/www.videolan.org/vlc/download-ubuntu.php
@@ -20,18 +20,7 @@
<section class="download-wrapper">
<div class="row reorder-xs">
<?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
+ drawScreenshots($screenshots);
?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
=====================================
www.videolan.org/vlc/download-windowsphone.php
=====================================
--- a/www.videolan.org/vlc/download-windowsphone.php
+++ b/www.videolan.org/vlc/download-windowsphone.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
=====================================
www.videolan.org/vlc/download-winrt.php
=====================================
--- a/www.videolan.org/vlc/download-winrt.php
+++ b/www.videolan.org/vlc/download-winrt.php
@@ -19,20 +19,7 @@
?>
<section class="download-wrapper">
<div class="row reorder-xs">
- <?php
- echo '<div class="v-align carousel-padding-xs col-xs-12 col-sm-5 col-sm-offset-1 col-sm-pull-1"><div id="header-carousel">';
- $first = true;
- foreach($screenshots as $screenshot) {
- $src = $first ? $screenshot['src'] : '';
- $srcLazy = $first ? '' : $screenshot['src'];
- $dom = '<div class="screenshot2">';
- $dom .= '<img src="'.$src.'" alt="'.$screenshot['name'].'" data-lazy="'.$srcLazy.'">';
- $dom .= '</div>';
- echo $dom;
- $first = false;
- }
- echo '</div></div>';
- ?>
+ <?php drawScreenshots($screenshots); ?>
<div class="v-align col-sm-5">
<div class="center-font-xs">
<?php image('largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'big-vlc-img img-responsive visible-xs-inline-block v-align'); ?>
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/compare/3278804f405f191cc00e14bfcc1650703a34043f...96da3fd3740569ef3de4285e3abf7d63e7a1dd25
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160119/3b67c97f/attachment.html>
More information about the www-doc
mailing list