{"id":502,"date":"2022-07-05T13:08:21","date_gmt":"2022-07-05T10:08:21","guid":{"rendered":"http:\/\/jla.localsitehere\/?p=502"},"modified":"2024-10-22T12:48:36","modified_gmt":"2024-10-22T09:48:36","slug":"metal-2022","status":"publish","type":"post","link":"https:\/\/jenniina.fi\/finnish\/metal-2022\/","title":{"rendered":"Metal 2022 Konferenssi"},"content":{"rendered":"<section class=\"wp-block-group alignfull is-style-no-margin-vertical shadow-under-nav has-palette-1-color has-text-color has-background\" style=\"background-color:#040202;padding-bottom:20px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\"><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Etusivu<\/span><\/p><\/nav>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-text-align-center\" id=\"metal2022\">Metal 2022 Hybrid Conference<\/h1>\n<\/div>\n<\/div>\n<\/div><\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull is-style-no-margin-vertical section-metal has-palette-1-color has-text-color has-background\" style=\"background-color:#040202;padding-top:50px;padding-bottom:20px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">ICOM-CC metallity\u00f6ryhm\u00e4n kymmenes tapaaminen. (Sivu englanniksi)<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p class=\"has-text-align-left has-large-font-size\">Implementation, development and maintenance.<\/p>\n\n\n\n<p>During my internship at Metropolia&#8217;s <a lang=\"fi\" href=\"https:\/\/valovirta.metropolia.fi\/\" rel=\"nofollow noopener\">Valovirta<\/a> in 2001, I had the pleasure to start work with the National Museum of Finland on the website of the Metal 2022 hybrid conference. I took on the project to implement the work of <a lang=\"fi\" href=\"http:\/\/urbandrawer.fi\" rel=\"nofollow noopener\">Henri Eskelinen<\/a> (website draft) and develop it further. Logo design by <a lang=\"fi\" href=\"http:\/\/jaxallu.wixsite.com\/portfolio\" rel=\"nofollow noopener\">Allu Laitila<\/a>.<\/p>\n\n\n\n<p>I was honored to be asked to keep maintaining and developing the project after I graduated and am currently working on poster and rollup designs for the upcoming conference, as well as designing the visual appearance of the streaming platform, hosted by <a href=\"https:\/\/liveto.io\/en\/\" rel=\"nofollow noopener\">Liveto<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide regain-width\">\n<div class=\"wp-block-column\">\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"http:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547.jpg\"><img decoding=\"async\" width=\"1400\" height=\"878\" data-src=\"http:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-1400x878.jpg\" alt=\"mockups of Metal 2022 on desktop and mobile\" class=\"wp-image-633 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-1400x878.jpg 1400w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-640x402.jpg 640w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-480x301.jpg 480w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-768x482.jpg 768w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-1536x964.jpg 1536w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-2048x1285.jpg 2048w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Mockup-Metal2022_all2-e1657354504547-18x12.jpg 18w\" data-sizes=\"(max-width: 1400px) 100vw, 1400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1400px; --smush-placeholder-aspect-ratio: 1400\/878;\" \/><\/a><figcaption class=\"wp-element-caption\">Metal 2022 website visualised on desktop and laptop<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">Requirements<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>The website needed to be in English, responsive and accessible, following the rules of the <dfn><abbr title=\"Web Content Accessibility Guidelines 2.1\">WCAG 2.1<\/abbr><\/dfn>. The purpose of the website was to be informational, with sign-up, payment methods and streaming services to be added on later. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">Materials<\/h2>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped gallery-padding-small wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes.jpg\"><img decoding=\"async\" width=\"1920\" height=\"1452\" data-id=\"1437\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes.jpg\" alt=\"Original draft of Metal 2022 Themes page\" class=\"wp-image-1437 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1920px; --smush-placeholder-aspect-ratio: 1920\/1452;\" \/><\/a><figcaption class=\"wp-element-caption\">Original draft with grey content background<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/HOME-\u2013-1.jpg\"><img decoding=\"async\" width=\"1920\" height=\"2103\" data-id=\"1435\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/HOME-\u2013-1.jpg\" alt=\"Original draft of Metal 2022 front page\" class=\"wp-image-1435 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1920px; --smush-placeholder-aspect-ratio: 1920\/2103;\" \/><\/a><figcaption class=\"wp-element-caption\">Original draft with white content background.<\/figcaption><\/figure>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>In the Adobe XD draft I received, were fonts and colors that needed accessibility checking. The title font was Volkhov and body text Open Sans. No issues there. <\/p>\n\n\n\n<p>My colour contrast checker of choice is the Paciello Group&#8217;s program <dfn><abbr title=\"Colour Contrast Analyser\">CCA<\/abbr><\/dfn>. I had two colors to check, besides white:<\/p>\n\n\n\n<div class=\"wp-block-group colorlist\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ul>\n\n<\/ul>\n<\/div><\/div>\n\n\n\n<p>There were options to have a white background or grey background, but following the WCAG 2.1 guidelines, the blue green colour&#8217;s contrast ratio unfortunately failed on the grey background that required darkening, as I wished to retain the blue green color to highlight content and links. You may see the new darkened background colour #040202 as the background of the page you&#8217;re currently on. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">Edits<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>As the client wished for a dark background, I needed to do adjustments to the header. Wishing to keep the menu background within the dark theme caused issues with the logos of the hosts needing white backgrounds. I resolved this by giving them their own white space above all other content and additionally, giving the threshold between the elements a more dynamic slant.  <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-4 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-white-all.jpg\"><img decoding=\"async\" width=\"1920\" height=\"1080\" data-id=\"1441\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-white-all.jpg\" alt=\"Themes white header background\" class=\"wp-image-1441 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1920px; --smush-placeholder-aspect-ratio: 1920\/1080;\" \/><\/a><figcaption class=\"wp-element-caption\">First edit: Themes page with white header background<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-dark-all.jpg\"><img decoding=\"async\" width=\"1920\" height=\"1080\" data-id=\"1438\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-dark-all.jpg\" alt=\"Themes dark header background\" class=\"wp-image-1438 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1920px; --smush-placeholder-aspect-ratio: 1920\/1080;\" \/><\/a><figcaption class=\"wp-element-caption\">Second edit: Themes page with dark header background. Hosts&#8217; logos needing white background cause issues<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-dark-menu.jpg\"><img decoding=\"async\" width=\"1920\" height=\"1080\" data-id=\"1439\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal-2022-Themes-header-dark-menu.jpg\" alt=\"Metal 2022 Themes header with dark menu and light logo background\" class=\"wp-image-1439 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1920px; --smush-placeholder-aspect-ratio: 1920\/1080;\" \/><\/a><figcaption class=\"wp-element-caption\">Third edit: Metal 2022 Themes header with dark menu and light logo background<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/themes-current.jpg\"><img decoding=\"async\" width=\"1899\" height=\"1068\" data-id=\"1440\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/themes-current.jpg\" alt=\"Themes page current view\" class=\"wp-image-1440 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1899px; --smush-placeholder-aspect-ratio: 1899\/1068;\" \/><\/a><figcaption class=\"wp-element-caption\">Fourth edit: incorporate a slanted edge between logos and menu<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">Development Environment<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<ul class=\"wp-block-list\">\n<li>Windows 10<\/li>\n\n\n\n<li>WordPress<\/li>\n\n\n\n<li>Local by Flywheel<\/li>\n\n\n\n<li>VS Code<\/li>\n\n\n\n<li>Firefox development tools<\/li>\n\n\n\n<li>WAVE Evaluation Tool<\/li>\n\n\n\n<li>NVDA screen reader<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading to-left\">WordPress Plugins<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WPvivid Backup Plugin<\/strong> for version control and migration<\/li>\n\n\n\n<li><strong>Code Snippets<\/strong> for the ease of turning code bits on and off <\/li>\n\n\n\n<li><strong>WPForms Lite<\/strong> for contact forms and surveys<\/li>\n\n\n\n<li><strong>Lightbox with PhotoSwipe<\/strong> as the most accessible lightbox plugin I could find<\/li>\n\n\n\n<li><s>Yoast SEO<\/s> <strong>Rank Math  SEO<\/strong> <\/li>\n\n\n\n<li><s>Cookie Notice &amp; Compliance for GDPR \/ CCPA<\/s> <strong>Complianz<\/strong> for the cookie consent banner<\/li>\n\n\n\n<li>Security plugins<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading to-left\">WordPress Theme<\/h4>\n\n\n\n<p>Reykjavik<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\"><\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<h2 class=\"wp-block-heading has-text-align-left metalh2\">Problem-solving<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Here are some issues I ran into and the ways I solved them.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h3 class=\"wp-block-heading has-text-align-center\">CSS Backgrounds<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>I placed the big main heading backgrounds with CSS. However, this is not accessible. As a workaround, I placed thumbnails of the images in a way that they could be interacted with: either by opening them into a lightbox or reading the caption with a screen reader. I placed a little magnifying glass icon to show that the thumbnail is interactive. Added a little drop shadow under both thumbnail and magnifying glass to make it pop. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"625\" height=\"355\" data-src=\"http:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-greetings-page-top_partial.jpg\" alt=\"round thumbnail icon with overlaying magnifying glass\" class=\"wp-image-1154 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-greetings-page-top_partial.jpg 625w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-greetings-page-top_partial-480x273.jpg 480w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-greetings-page-top_partial-18x10.jpg 18w\" data-sizes=\"(max-width: 625px) 100vw, 625px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 625px; --smush-placeholder-aspect-ratio: 625\/355;\" \/><figcaption class=\"wp-element-caption\">Greetings page closeup of thumbnail icon with magnifying glass<\/figcaption><\/figure>\n\n\n\n<p>I registered a widget area for the thumbnail in order to place it into the &#8220;Notice&#8221; post category page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** Register widget area to Notice page for title thumbnail: *\/\nfunction noticepage_widgets_init() {\n    register_sidebar( array(\n        'name'          =&gt; 'Image Thumbnail for Notice Page',\n        'id'            =&gt; 'custom-widget-noticepage',\n        'before_widget' =&gt; '&lt;div class=&quot;wp-block-group__inner-container&quot;&gt;',\n        'after_widget'  =&gt; '&lt;\/div&gt;',\n\n    ) );\n}\nadd_action( 'widgets_init', 'noticepage_widgets_init' );\n\n\/*Place noticepage widget to category page:*\/\nfunction widget_to_notices_page() {\n    if ( is_category( 'notice' ) OR is_singular() ){\n        if ( is_active_sidebar( 'custom-widget-notice' ) ) : ?&gt;\n            &lt;aside id=&quot;custom-widget-notice&quot; class=&quot;group-otsikkokuvake wp-block-group&quot;&gt;\t\n                &lt;?php dynamic_sidebar( 'custom-widget-noticepage' ); ?&gt;\n            &lt;\/aside&gt;\n            &lt;?php endif; \n    }\n}\nadd_action('tha_entry_before', 'widget_to_notices_page');<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h3 class=\"wp-block-heading has-text-align-center\">Link Visibility<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>I needed a color to differentiate between visited and unvisited links and for when you hover over them with the cursor. I ended up keeping the original blue green for the visited links and created a brightened version. <\/p>\n\n\n\n<p>On white cards, I switched it up and made the original color as the default, with a darker color for visited links. <\/p>\n\n\n\n<p>I added an additional underline on hover for improved clarity. <\/p>\n\n\n\n<p>Additionally, I added a code snippet to mark external links with an icon (also seen on the top of this page) and an aria-roledescription of &#8220;external link&#8221;, so a screen reader would read &#8220;external link&#8221; instead of just link. The snippet also changed the links to open in a new window, which is not necessarily good usability. I disabled that feature on my site.  <\/p>\n\n\n\n<div class=\"wp-block-group group-nosto\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>You may see link examples on this page, especially in the introduction at the <a href=\"#metal2022\">top of this page<\/a>. <\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>        function linkopener(a) {\n            let trgt = a ? \"_blank\" : \"_self\";\n            let link = document.links;\n            for (let i = 0; i &lt; link.length; i++) {\n                if (link&#091;i].href.search(\"metal2022.org\") == -1) {\n                    link&#091;i].addEventListener(\"click\", function() {\n                        this.target = trgt;\n                    });\n                    link&#091;i].target = trgt;\n                    link&#091;i].className += 'link-external ';\n                    link&#091;i].setAttribute('aria-roledescription', 'external link');\n                }\n            }\n        };\n        $(document).ready(function() {\n            linkopener(true);\n        });<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h3 class=\"wp-block-heading has-text-align-center\">Slider Accessibility<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>Sliders were another wish of the client. I chose the plugin Smart Slider 3 as it was the most accessible slider plugin I could find.<\/p>\n\n\n\n<p>By tweaking the settings and CSS, I could make it more accessible. Instead of bullets, a thumbnail gallery with titles at the bottom helps in visualizing what&#8217;s next. The previous\/next arrows were a little hard to see as well, but that was a quick fix in CSS. They&#8217;re up\/down arrows, because the sliding motion is as such. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-tuska-screenshot-old.jpg\"><img decoding=\"async\" width=\"1200\" height=\"554\" data-id=\"1442\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-tuska-screenshot-old.jpg\" alt=\"slider with metalheads, no thumbnails\" class=\"wp-image-1442 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/554;\" \/><\/a><figcaption class=\"wp-element-caption\">Slider with bullets, previous\/next arrows were hard to see<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-tuska-screenshot-current.jpg\"><img decoding=\"async\" width=\"1200\" height=\"534\" data-id=\"1436\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/metal-tuska-screenshot-current.jpg\" alt=\"slider with metalheads, thumbnails below\" class=\"wp-image-1436 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/534;\" \/><\/a><figcaption class=\"wp-element-caption\">Slider with thumbnails containing title, friendlier accessibility<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h3 class=\"wp-block-heading has-text-align-center\">Extra Edits<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\"><div class=\"wp-block-image\">\n<figure class=\"align-horizontal-wrap alignleft size-medium is-resized\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In.png\"><img decoding=\"async\" width=\"392\" height=\"640\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In-392x640.png\" alt=\"Metal 2022 site login page\" class=\"wp-image-3023 lazyload\" style=\"--smush-placeholder-width: 392px; --smush-placeholder-aspect-ratio: 392\/640;width:294px;height:480px\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In-392x640.png 392w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In-294x480.png 294w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In-7x12.png 7w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/07\/Metal2022-Screenshot-2022-10-14-Log-In.png 567w\" data-sizes=\"(max-width: 392px) 100vw, 392px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><figcaption class=\"wp-element-caption\">Custom login page<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Since my clients would be logging in, I decided to customize the WordPress login page to suit the event brand.<\/p>\n\n\n\n<p>I edited the login page to fit the  brand image by simply linking a custom stylesheet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function custom_login_style(){\n    wp_enqueue_style( 'style-login', get_stylesheet_directory_uri() . '\/style-login.css' );\n}\nadd_action('login_enqueue_scripts', 'custom_login_style');<\/code><\/pre>\n\n\n\n<p>I also changed the logo link to go to the Metal 2022 homepage instead of WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function change_loginheaderurl ( $url ) {\n    $url = \"https:\/\/www.metal2022.org\/\";\n    return $url;\n}\nadd_filter( 'login_headerurl', 'change_loginheaderurl');<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h3 class=\"wp-block-heading has-text-align-center\">Streaming platform<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>I set up the streaming platform&#8217;s appearance and designed the posters and rollups for the conference, which was held successfully on the appointed week. Below is a visual representation of how the landing page (or lobby) of the platform looked like in desktop mode: <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width liveto-wrap\">\n<div class=\"wp-block-column\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-image size-large base-img\"><img decoding=\"async\" width=\"1215\" height=\"1400\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-1215x1400.png\" alt=\"Metal2022-Screenshot-Lobby-base-lobby\" class=\"wp-image-3032 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-1215x1400.png 1215w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-555x640.png 555w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-417x480.png 417w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-768x885.png 768w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-1333x1536.png 1333w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-1777x2048.png 1777w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby-10x12.png 10w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/Metal2022-Screenshot-Lobby-base-lobby.png 1898w\" data-sizes=\"(max-width: 1215px) 100vw, 1215px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1215px; --smush-placeholder-aspect-ratio: 1215\/1400;\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide block-max-width\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading has-text-align-center\">Finally on Metal 2022<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column border-metal2022\">\n<p>Since the emergence of WordPress 6.0 and block patterns, I see many things I would do differently if I were to start planning the site now. As it is now, it still works as intended, and has been a pleasure to work on. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center\">Katso my\u00f6s <a href=\"https:\/\/jenniina.fi\/finnish\/jyvaskylan-salonkiorkesteri-orchestra-website\/\" data-type=\"post\" data-id=\"4767\">orchestra website<\/a> ja <a href=\"https:\/\/jenniina.fi\/finnish\/website-of-psychologist\/\" data-type=\"post\" data-id=\"639\">psychologist website<\/a>. <\/p>\n\n\n\n<div class=\"wp-block-group alignfull back-to-top-container is-style-default has-accent-color has-text-color\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<a href=\"#top\" class=\"back-to-top\">\n    <svg class=\"svg-icon\" width=\"3em\" aria-hidden=\"true\" version=\"1.1\" \nxmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 16 16\"><polygon points=\"8,4.6 1.3,11.3 2.7,12.7 8,7.4 13.3,12.7 14.7,11.3 \"><\/polygon><\/svg>\n    <span class=\"screen-reader-text\">Back to top of the page<\/span>\n<\/a>\n<\/div><\/div>\n<\/div><\/section>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nMetallikonservoijien hybridikonferenssi. (Sivua ei ole k\u00e4\u00e4nnetty suomeksi)\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/jenniina.fi\/finnish\/metal-2022\/\" class=\"link-more\" aria-label=\"Continue reading Metal 2022 Conference Website\">More &raquo;<\/a><\/div>","protected":false},"author":1,"featured_media":576,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,10],"tags":[],"class_list":["post-502","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-website","entry","entry-type-post"],"_links":{"self":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":164,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"predecessor-version":[{"id":5766,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/502\/revisions\/5766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media\/576"}],"wp:attachment":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/tags?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}