Skip to content
Snippets Groups Projects
Select Git revision
  • c3acf9d3fd8c809fbccf600be757746fa76abfea
  • test default protected
  • master protected
  • feat/custom-css
  • feat/redesign-improvements-10
  • feat/redesign-improvements-8
  • feat/redesign-fixes-3
  • feat/pirstan-changes
  • feat/separate-import-thread
  • feat/dary-improvements
  • features/add-pdf-page
  • features/add-typed-table
  • features/fix-broken-calendar-categories
  • features/add-embed-to-articles
  • features/create-mastodon-feed-block
  • features/add-custom-numbering-for-candidates
  • features/add-timeline
  • features/create-wordcloud-from-article-page
  • features/create-collapsible-extra-legal-info
  • features/extend-hero-banner
  • features/add-link-to-images
21 results

forms.py

Blame
  • Picture.vue 1.57 KiB
    <template>
      <img :src="sources.normal" :srcset="`${sources.normal} 1x, ${sources.retina} 2x`" @error="handleImageLoadError" :width="width" :height="height" :alt="alt">
    </template>
    
    <script>
    export default {
      data() {
        return {
          cloudinaryUrl: 'https://res.cloudinary.com/pirati/image/fetch',
          hasError: false,
        }
      },
      props: {
        src: String,
        width: String,
        height: String,
        alt: String,
        lazy: Boolean,
        isInView: Boolean,
      },
      computed: {
        sources() {
          let normal = `${this.src}?w=720`;
          let retina = `${this.src}?w=1440`;    
          //let normal = `${this.cloudinaryUrl}/${this.cloudinaryTransformations({retina: false})}/${this.src}`;
          //let retina = `${this.cloudinaryUrl}/${this.cloudinaryTransformations({retina: true})}/${this.src}`;
    
          //if (process.env.NODE_ENV === 'development' || this.hasError) {
          //  normal = this.src;
          //  retina = this.src;
          //}
    
          if (this.lazy && !this.isInView) {
            normal = '/blank-image.svg';
            retina = '/blank-image.svg';
          }
    
          return {
            normal,
            retina,
          };
        },
      },
      methods: {
        cloudinaryTransformations({retina}) {
          let transformations = '';
    
          if (this.width) {
            transformations += `w_${retina ? this.width*2 : this.width},`;
          }
          if (this.height) {
            transformations += `h_${retina ? this.height*2 : this.height},`;
          }
    
          transformations += `q_auto,f_auto,g_face,c_fill`;
    
          return transformations;
        },
        handleImageLoadError() {
          this.hasError = true;
        },
      }
    };
    </script>