From 003e9732ed7d0a8b8053d36dad38f603f8616bee Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 22 Sep 2024 21:27:14 -0700
Subject: [PATCH] read in ranslated maps
---
src/components/MapsSection.vue | 93 +++++++++++++---------------------
1 file changed, 34 insertions(+), 59 deletions(-)
diff --git a/src/components/MapsSection.vue b/src/components/MapsSection.vue
index 3cd79bb..451ac5f 100644
--- a/src/components/MapsSection.vue
+++ b/src/components/MapsSection.vue
@@ -17,28 +17,20 @@
<picture>
<source
type="image/webp"
- srcset="
- @/assets/images/responsive_images/avg_household_size_2022_en-320.webp 320w,
- @/assets/images/responsive_images/avg_household_size_2022_en-640.webp 640w,
- @/assets/images/responsive_images/avg_household_size_2022_en-1280.webp 1280w,
- @/assets/images/responsive_images/avg_household_size_2022_en-1800.webp 1920w"
+ :srcset="getImageSrcSet('avg_household_size_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
- srcset="
- @/assets/images/responsive_images/avg_household_size_2022_en-320.jpg 320w,
- @/assets/images/responsive_images/avg_household_size_2022_en-640.jpg 640w,
- @/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg 1280w,
- @/assets/images/responsive_images/avg_household_size_2022_en-1800.jpg 1920w"
+ :srcset="getImageSrcSet('avg_household_size_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
- src="@/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg"
+ :src="getImageSrc('avg_household_size_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p1Alt')"
/>
</picture>
</div>
- <!-- Accordion 2 -->
- <button class="accordion latino-accordion">
+<!-- Accordion 2 -->
+<button class="accordion latino-accordion">
<span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span>
</button>
<div class="panel">
@@ -46,21 +38,13 @@
<picture>
<source
type="image/webp"
- srcset="
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-320.webp 320w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-640.webp 640w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.webp 1280w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-1800.webp 1920w"
+ :srcset="getImageSrcSet('perc_hispanic_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
- srcset="
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-320.jpg 320w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-640.jpg 640w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg 1280w,
- @/assets/images/responsive_images/perc_hispanic_census_2022_en-1800.jpg 1920w"
+ :srcset="getImageSrcSet('perc_hispanic_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
- src="@/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg"
+ :src="getImageSrc('perc_hispanic_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p4Alt')"
/>
</picture>
@@ -75,21 +59,13 @@
<picture>
<source
type="image/webp"
- srcset="
- @/assets/images/responsive_images/perc_disabled_census_2022_en-320.webp 320w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-640.webp 640w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-1280.webp 1280w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-1800.webp 1920w"
+ :srcset="getImageSrcSet('perc_disabled_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
- srcset="
- @/assets/images/responsive_images/perc_disabled_census_2022_en-320.jpg 320w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-640.jpg 640w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg 1280w,
- @/assets/images/responsive_images/perc_disabled_census_2022_en-1800.jpg 1920w"
+ :srcset="getImageSrcSet('perc_disabled_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
- src="@/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg"
+ :src="getImageSrc('perc_disabled_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p5Alt')"
/>
</picture>
@@ -104,21 +80,13 @@
<picture>
<source
type="image/webp"
- srcset="
- @/assets/images/responsive_images/med_income_census_2022_en-320.webp 320w,
- @/assets/images/responsive_images/med_income_census_2022_en-640.webp 640w,
- @/assets/images/responsive_images/med_income_census_2022_en-1280.webp 1280w,
- @/assets/images/responsive_images/med_income_census_2022_en-1800.webp 1920w"
+ :srcset="getImageSrcSet('med_income_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
- srcset="
- @/assets/images/responsive_images/med_income_census_2022_en-320.jpg 320w,
- @/assets/images/responsive_images/med_income_census_2022_en-640.jpg 640w,
- @/assets/images/responsive_images/med_income_census_2022_en-1280.jpg 1280w,
- @/assets/images/responsive_images/med_income_census_2022_en-1800.jpg 1920w"
+ :srcset="getImageSrcSet('med_income_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
- src="@/assets/images/responsive_images/med_income_census_2022_en-1280.jpg"
+ :src="getImageSrc('med_income_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p2Alt')"
/>
</picture>
@@ -133,21 +101,13 @@
<picture>
<source
type="image/webp"
- srcset="
- @/assets/images/responsive_images/median_rent_2022_en-320.webp 320w,
- @/assets/images/responsive_images/median_rent_2022_en-640.webp 640w,
- @/assets/images/responsive_images/median_rent_2022_en-1280.webp 1280w,
- @/assets/images/responsive_images/median_rent_2022_en-1800.webp 1920w"
+ :srcset="getImageSrcSet('median_rent_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
- srcset="
- @/assets/images/responsive_images/median_rent_2022_en-320.jpg 320w,
- @/assets/images/responsive_images/median_rent_2022_en-640.jpg 640w,
- @/assets/images/responsive_images/median_rent_2022_en-1280.jpg 1280w,
- @/assets/images/responsive_images/median_rent_2022_en-1800.jpg 1920w"
+ :srcset="getImageSrcSet('median_rent_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
- src="@/assets/images/responsive_images/median_rent_2022_en-1280.jpg"
+ :src="getImageSrc('median_rent_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p3Alt')"
/>
</picture>
@@ -163,8 +123,24 @@
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const getImageSrc = (baseName, format, size) => {
+ const lang = locale.value === 'es' ? 'es' : 'en'; // Get language
+ return new URL(`../assets/images/responsive_images/${baseName}_${lang}-${size}.${format}`, import.meta.url).href;
+};
+
+const getImageSrcSet = (baseName, format) => {
+ const lang = locale.value === 'es' ? 'es' : 'en'; // Get language
+ return `
+ ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-320.${format}`, import.meta.url).href} 320w,
+ ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-640.${format}`, import.meta.url).href} 640w,
+ ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1280.${format}`, import.meta.url).href} 1280w,
+ ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1800.${format}`, import.meta.url).href} 1920w
+ `;
+};
+
+// Accordion click handler
onMounted(() => {
const acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
@@ -183,7 +159,6 @@ onMounted(() => {
}
});
</script>
-
<style lang="scss" scoped>
$Demographiccharacteristics: var(--color-Demographiccharacteristics);
--
GitLab