{"id":937,"date":"2020-05-21T18:26:07","date_gmt":"2020-05-21T18:26:07","guid":{"rendered":"https:\/\/www.publicalbum.org\/blog\/?p=937"},"modified":"2020-05-21T18:39:04","modified_gmt":"2020-05-21T18:39:04","slug":"gallery-player-widgets-responsive-design","status":"publish","type":"post","link":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design","title":{"rendered":"Responsive design settings for gallery player widgets"},"content":{"rendered":"\n

Responsive design is now a common part of every modern website. I will now show you a simple trick on how to set up the gallery player widget to be responsive and adapt to the design of your mobile websites.<\/p>\n\n\n\n\n\n\n\n

The basis of the widget is a container element with the style definition of size. Defaults are set to a fixed height and width is set to 100%. Look at the following HTML code of the gallery player widget. The attribute style contains CSS that defines the size of the container.<\/p>\n\n\n\n

<div class=\"pa-carousel-widget\"\n  style=\"width: 100%; height: 480px; display: none;\"\n  data-link=\"https:\/\/photos.app.goo.gl\/CSV7NDstShTUwUZq5\"\n  data-title=\"Mr. Monstro\">\n    <img data-src=\"https:\/\/...image1.jpg\" \/>\n    <img data-src=\"https:\/\/...image2.jpg\" \/>\n    <img data-src=\"https:\/\/...image3.jpg\" \/>\n<\/div><\/code><\/pre>\n\n\n\n
Note: Display: none hides the container until it is decorated.<\/em><\/p>\n\n\n\n
It is also important for you to know that the size of the widget adapts to the container. When the size of the browser workspace changes, the size of the container also changes. This is ensured by the window.onresize<\/code> event.<\/p>\n\n\n\n
How to setup a container for responsive design?<\/h2>\n\n\n\n
I will show you this best with the following examples:<\/p>\n\n\n\n
1) Fullscreen view.<\/h3>\n\n\n\n
In this case, I set the size of the container to: width: 100vw; height: 100vh; display: none;<\/code><\/p>\n\n\n\n
I.e. the width will be the same as the width of the work surface and the height as the height of the work surface. To achieve this badly, use the units vw<\/code> and vh<\/code>.<\/p>\n\n\n\n
Example 1<\/strong>: responsive-gallery-fullscreen-view.html<\/a><\/em>
<\/p>\n\n\n\n
2) The size of the gallery is the same as the size of the browser area.<\/h3>\n\n\n\n
This is practically the same setting as in the previous case, but any content, such as headline, etc. is inserted before and after the widget. The height of the widgets is still the same as the height of the browser desktop.<\/p>\n\n\n\n
Example 2<\/strong>: responsive-gallery-100vh-view.html<\/a><\/em>
<\/p>\n\n\n\n
3) Using flex formatting<\/h3>\n\n\n\n
In the latter case, I used a layout formatted with flex (vertical view only).<\/p>\n\n\n\n
\"\"
Preview of responsive design page with gallery player widget.<\/figcaption><\/figure><\/div>\n\n\n\n
Example 3<\/strong>: responsive-gallery-flex-view.html<\/a><\/em>
<\/p>\n\n\n\n
The page is not scrollable and the content must fit on it. The widget now populates the contents of the element <div class=\"gallery\"><\/div><\/code>. The container fills the entire parent element. In this example, the container style is set to width: 100%; height: 100%; display: none;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive design is now a common part of every modern website. I will now show you a simple trick on how to set up the gallery player widget to be responsive and adapt to the design of your mobile websites.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,16],"tags":[],"class_list":["post-937","post","type-post","status-publish","format-standard","hentry","category-google-photos","category-web-ui-components"],"yoast_head":"\nResponsive design settings for gallery player widgets<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive design settings for gallery player widgets\" \/>\n<meta property=\"og:description\" content=\"Responsive design is now a common part of every modern website. I will now show you a simple trick on how to set up the gallery player widget to be responsive and adapt to the design of your mobile websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design\" \/>\n<meta property=\"og:site_name\" content=\"Public album .org\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-21T18:26:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-21T18:39:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif\" \/>\n<meta name=\"author\" content=\"Pavex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pavex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design\",\"url\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design\",\"name\":\"Responsive design settings for gallery player widgets\",\"isPartOf\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif\",\"datePublished\":\"2020-05-21T18:26:07+00:00\",\"dateModified\":\"2020-05-21T18:39:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage\",\"url\":\"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif\",\"contentUrl\":\"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif\",\"width\":410,\"height\":480},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.publicalbum.org\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive design settings for gallery player widgets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#website\",\"url\":\"https:\/\/www.publicalbum.org\/blog\/\",\"name\":\"Public album .org\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.publicalbum.org\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87\",\"name\":\"Pavex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g\",\"caption\":\"Pavex\"},\"url\":\"https:\/\/www.publicalbum.org\/blog\/author\/pavex\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive design settings for gallery player widgets","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design","og_locale":"en_US","og_type":"article","og_title":"Responsive design settings for gallery player widgets","og_description":"Responsive design is now a common part of every modern website. I will now show you a simple trick on how to set up the gallery player widget to be responsive and adapt to the design of your mobile websites.","og_url":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design","og_site_name":"Public album .org","article_published_time":"2020-05-21T18:26:07+00:00","article_modified_time":"2020-05-21T18:39:04+00:00","og_image":[{"url":"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif"}],"author":"Pavex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pavex","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design","url":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design","name":"Responsive design settings for gallery player widgets","isPartOf":{"@id":"https:\/\/www.publicalbum.org\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage"},"image":{"@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage"},"thumbnailUrl":"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif","datePublished":"2020-05-21T18:26:07+00:00","dateModified":"2020-05-21T18:39:04+00:00","author":{"@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87"},"breadcrumb":{"@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#primaryimage","url":"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif","contentUrl":"https:\/\/www.publicalbum.org\/blog\/wp-content\/uploads\/2020\/05\/flex-preview.gif","width":410,"height":480},{"@type":"BreadcrumbList","@id":"https:\/\/www.publicalbum.org\/blog\/gallery-player-widgets-responsive-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.publicalbum.org\/blog"},{"@type":"ListItem","position":2,"name":"Responsive design settings for gallery player widgets"}]},{"@type":"WebSite","@id":"https:\/\/www.publicalbum.org\/blog\/#website","url":"https:\/\/www.publicalbum.org\/blog\/","name":"Public album .org","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.publicalbum.org\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87","name":"Pavex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g","caption":"Pavex"},"url":"https:\/\/www.publicalbum.org\/blog\/author\/pavex"}]}},"_links":{"self":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/937"}],"collection":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":10,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions"}],"predecessor-version":[{"id":949,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/937\/revisions\/949"}],"wp:attachment":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/categories?post=937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/tags?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}