Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider

[Paolo Bonzini]

On 27/10/20 14:20, Daniel P. Berrangé wrote:
> We have a number of screenshots to display, with three fitted across the
> width of the screen. The screenshots dominate the usage of screen real
> estate on the front page, with other relevant information off the bottom
> of the page.
> 
> As a step towards increasing the information density of the home screen
> replace the horizontally presented screenshots with a rotating carousel
> of images.

Looks good, but the left and right columns are a bit unbalanced.
Since you are at it, perhaps you could organize the part below the red
strip a bit like the Dolphin home page (https://dolphin-emu.org/):


    ----------------------------------------------------------
                             QEMU
          Generic, open source emulator and virtualizer
    ----------------------------------------------------------


         Latest release:                    CAROUSEL
         ....                                . . .



         Contribute              Recent posts
         .....                   ....

         Advent calendar
         Blog planet
         KVM
         Libguestfs
         Libvirt
         Xen
    ---------------------------------------------------------


Also, possibly include the excerpt of the first post ({{post.excerpt}}).

Thanks!

Paolo

> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
> ---
>  _data/screenshots.yml     | 14 ++++++++++++--
>  _includes/screenshot.html |  8 ++++++--
>  assets/css/style.css      | 10 +++++++---
>  index.html                | 36 ++++++++++++++++--------------------
>  4 files changed, 41 insertions(+), 27 deletions(-)
> 
> diff --git a/_data/screenshots.yml b/_data/screenshots.yml
> index 3b8b6a5..2811244 100644
> --- a/_data/screenshots.yml
> +++ b/_data/screenshots.yml
> @@ -3,18 +3,28 @@
>    author: "Screenshot by 
> [User:Nurnware](https://commons.wikimedia.org/wiki/User:Nurnware)"
>    description: "QEMU running the ReactOS operating system on Linux."
>    description_md: "QEMU running the [ReactOS](http://www.reactos.org) 
> operating system on Linux."
> -- file: qemu-arm.png
> -  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
> +  heading: Full-system emulation
> +  blurb: Run operating systems for any machine, on any supported architecture
>  - file: qemu-advent-calendar-osv-redis.png
>    source: http://www.qemu-advent-calendar.org/#day-11
>    author: "Courtesy of Dor Laor"
>    description: "The dashboard of the OSv operating system, running in the 
> background as a QEMU/KVM process."
>    description_md: "The dashboard of the [OSv](http://osv.io) operating 
> system, running in the background as a QEMU/KVM process."
> +  heading: Virtualization
> +  blurb: Run KVM and Xen virtual machines with near native performance
> +- file: qemu-arm.png
> +  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
> +  heading: User-mode emulation
> +  blurb: Run programs for another Linux/BSD target, on any supported 
> architecture
>  - file: qemu-advent-calendar-s390-moon-buggy.png
>    source: http://www.qemu-advent-calendar.org/#day-22
>    author: "Courtesy of Alexander Graf"
>    description: "QEMU emulating an ASCII art game for the System z (s390) 
> mainframe."
> +  heading: Full-system emulation
> +  blurb: Run operating systems for non-native architectures
>  - file: qemu-advent-calendar-second-reality.png
>    source: http://www.qemu-advent-calendar.org/#day-13
>    author: "Courtesy of Paolo Bonzini"
>    description: "QEMU running Second Reality, a well-known PC demo from 1993, 
> inside the FreeDOS operating system."
> +  heading: Full-system emulation
> +  blurb: Run demos written for classic / obsolete operating systems
> diff --git a/_includes/screenshot.html b/_includes/screenshot.html
> index 70b0d11..fb79e5d 100644
> --- a/_includes/screenshot.html
> +++ b/_includes/screenshot.html
> @@ -1,9 +1,13 @@
>  {% for screenshot in site.data.screenshots offset: {{include.offset}} limit: 
> {{include.limit}} %}
> -<a href="screenshots/{{screenshot.file}}" class="colorbox"
> +<section>
> +  {% if screenshot.heading %}<h3>{{ screenshot.heading }}</h3>{% endif %}
> +  <div class="pennant"><a href="screenshots/{{screenshot.file}}" 
> class="colorbox"
>     title="{{screenshot.description}}"
>     data-title="{% if screenshot.description_md %}{{screenshot.description_md 
> | markdownify | remove: '<p>' | remove: '</p>' | strip_newlines | escape}}{%
>     else %}{{screenshot.description}}{%endif %}{%
>     if screenshot.author %} {{screenshot.author | markdownify | remove: '<p>' 
> | remove: '</p>' | strip_newlines | escape}} {% endif %}{%
>     if screenshot.source %} (&lt;a 
> href=&quot;{{screenshot.source}}&quot;&gt;Source&lt;/a&gt;){%endif %}"><img
> -   src="screenshots/{{screenshot.file}}" alt="Screenshot: 
> {{screenshot.description}}"/></a>
> +   src="screenshots/{{screenshot.file}}" alt="Screenshot: 
> {{screenshot.description}}"/></a></div>
> +  {% if screenshot.blurb %}<p>{{ screenshot.blurb }}</p>{% endif %}
> +</section>
>  {% endfor %}
> diff --git a/assets/css/style.css b/assets/css/style.css
> index e09b383..855217b 100644
> --- a/assets/css/style.css
> +++ b/assets/css/style.css
> @@ -557,13 +557,14 @@
>       #featured header
>       {
>               border-bottom: 1px solid #333333;
> +             margin-bottom: 0.5em;
>       }
>       #featured h2
>       {
>               margin-bottom: 0em;
>       }
>  
> -     #featured h3
> +     #featured .screenshots h3
>       {
>               padding: 1.5em 0em;
>               font-size: 1.6em;
> @@ -573,12 +574,15 @@
>               margin: 0em 0em 1em 0em;
>       }
>  
> -     #featured .pennant
> +     #featured .screenshots .pennant
>       {
>               font-size: 4em;
> +             width: 40%;
> +             margin-left: auto;
> +             margin-right: auto;
>       }
>  
> -     #featured .pennant img
> +     #featured .screenshots .pennant img
>       {
>               width: 100%;
>               object-fit: contain;
> diff --git a/index.html b/index.html
> index e52868d..48304c8 100644
> --- a/index.html
> +++ b/index.html
> @@ -2,6 +2,7 @@
>  title: QEMU
>  layout: home
>  colorbox: True
> +bxslider: True
>  ---
>  {% include relative_root.html %}
>       <!-- Header -->
> @@ -19,25 +20,9 @@ colorbox: True
>                       <h2>What is QEMU?</h2>
>                       <p>QEMU is a generic and open source machine emulator 
> and virtualizer.</p>
>               </header>
> -             <div class="row">
> -                     <section class="4u">
> -                             <div class="pennant">{% include screenshot.html 
> offset=0 limit=1 %}</div>
> -                             <h3>Full-system<br class="only-desktop"> 
> emulation</h3>
> -                             <p>Run operating systems for any machine, on 
> any supported architecture</p>
> -                     </section>
> -                     <section class="4u">
> -                             <div class="pennant">{% include screenshot.html 
> offset=1 limit=1 %}</div>
> -                             <h3>User-mode<br class="only-desktop"> 
> emulation</h3>
> -                             <p>Run programs for another Linux/BSD target, 
> on any supported architecture</p>
> -                     </section>
> -                     <section class="4u">
> -                             <div class="pennant">{% include screenshot.html 
> offset=2 limit=1 %}</div>
> -                             <h3>Virtualization</h3>
> -                             <p>Run KVM and Xen virtual machines with near 
> native performance</p>
> -                     </section>
> -                     <section style="display: none;">
> -                     {% include screenshot.html offset=3 limit=10 %}
> -                     </section>
> +             <div class="row slider screenshots">
> +                     {% include screenshot.html %}
> +             </div>
>  
>  <script src="{{ relative_root }}/assets/js/object-fit.js"></script>
>  <script>
> @@ -59,9 +44,20 @@ $(window).on("load resize", function() {
>  $('.colorbox').on("click.random-namespace", function() {
>      return window.hasColorBox;
>  })
> +
> +$(document).ready(function(){
> +    $('.slider').bxSlider({
> +        auto: true,
> +        autoHover: true,
> +        mode: "fade",
> +        infiniteLoop: true,
> +        controls: false,
> +        speed: 500,
> +        pause: 5000,
> +    });
> +});
>  </script>
>  
> -             </div>
>               <hr>
>               <p>QEMU is a member of <a href="{{ relative_root 
> }}/conservancy/">Software Freedom Conservancy</a>.</p>
>       </div>
>