Use gallery to display multiple images in Ubuntu scope

In this article, we'll show you how to use gallery Previewwidget to display multiple images in scope preview. More about previewwidget types can be found in the API.

First, let's download the Scopetemplate routine we talked about in our last lesson:

git clone https://gitcafe.com/ubuntu/scopetemplates_video.git

To be able to display multiple images, we have made the following changes to our program:

Query.cpp

  Add an array to show the gallary of it    Sc::variantarray arr;    for (const auto &datum:icons_) {        arr.push_back (Variant (datum.tostdstring ()));    }    r["array"] = Sc::variant (arr);

Here, we press our local image into a variantarray and write it into the "array" field.

Preview.cpp

    Result result = Previewquerybase::result ();    Previewwidget Listen ("tracks", "Audio");        {Variantbuilder Builder; Builder.add_tuple ({{"title", Variant ("This is the song title")}, {"Source", Variant (result["MUSICSO        Urce "].get_string (). C_STR ())});    Listen.add_attribute_value ("Tracks", Builder.end ());    } previewwidget Video ("Videos", "video");    Video.add_attribute_value ("Source", Variant (result["VideoSource"].get_string (). C_STR ()));    Video.add_attribute_value ("screenshot", Variant (result["screenshot"].get_string (). C_STR ()));    SC::P reviewwidget header_gal ("Gallery_header", "header");    Header_gal.add_attribute_value ("title", Variant ("Gallery files are:"));    Previewwidget Gallery ("Gallerys", "Gallery");    Gallery.add_attribute_value ("Sources", Variant (result["Array"]));    Previewwidgetlist Widgets ({image, header, description}); if (result["Musicsource"].get_string (). Length ()! = 0) {Widgets.emplace_back (Listen);    } if (result["VideoSource"].get_string (). Length ()! = 0) {widgets.emplace_back (video);        } if (result["array"].get_array (). Size ()! = 0) {widgets.emplace_back (Header_gal);    Widgets.emplace_back (gallery); } reply->push (widgets);

Here, we create a new header called Header_gal. It is used to cue a header to us, and we use it directly:

    Previewwidget Gallery ("Gallerys", "Gallery");    Gallery.add_attribute_value ("Sources", Variant (result["Array"]));

Or

    Previewwidget Gallery ("Gallerys", "Gallery");    Gallery.add_attribute_mapping ("Sources", "array");

Map the contents of the array field to sources so that the gallery can be displayed correctly:
To run our scope:


The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/scopetemplates_gallery.git

Use gallery to display multiple images in Ubuntu scope