Skip to content
Snippets Groups Projects
Commit 003e9732 authored by Cee Nell's avatar Cee Nell
Browse files

read in ranslated maps

parent ed516d33
No related branches found
No related tags found
1 merge request!87read in translated maps
Hide whitespace changes
Inline Side-by-side
src/components/MapsSection.vue
+ 34
− 59
View file @ 003e9732
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment