Gif breaking the responsiveness of Gatsby site

user_7610724 0
Viewed 279

  • Problem Summary

There are two .gif images in my blog post, which are breaking the responsiveness of my site, they don't seem to get resized when opened on a mobile device. Although they seem to be fine when opened from pc.

PC view:

image

Mobile view:

image

As you can see, in mobile view the two .gif images are still the same size, which breaks the responsiveness of the page. Is there a way I could solve this issue?



  • The syntax I've used to include the .gif in my .mdx file is-

    ![otter dancing with a fish](./neural_net_data_manupulation_2.gif)

  • Config.js file of my site:

require(`dotenv`).config({
  path: `.env`,
})


const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE

module.exports = {
  siteMetadata: {
    siteTitle: `Khalid Saifullah`,
    siteTitleAlt: `Khalid Saifullah - Blog`,
    author: `@k_saifullaah`,
    siteImage: `/my_banner.jpg`,
    siteHeadline: `Khalid Saifullah - Blog`,
    siteUrl: `https://khalidsaifullaah.github.io`,
    siteDescription: `I'm Khalid - a CS undergrad student. I take great interest in Deep Learning research, visualizations, and photography.`,
  },
  plugins: [
    // `gatsby-remark-mathjax`,
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      // See the theme's README for all available options
      options: {
        mdx: false,
        feedTitle: `Khalid Saifullah - Blog`,
        navigation: [
          {
            title: `Blog`,
            slug: `/blog`,
          },
          {
            title: `About`,
            slug: `/about`,
          },
          {
            title: `Portfolio`,
            slug: `/portfolio`,
          },
        ],
        externalLinks: [
          {
            name: `Github`,
            url: `https://github.com/khalidsaifullaah`,
          },
          {
            name: `Twitter`,
            url: `https://twitter.com/k_saifullaah`,
          },
          {
            name: `Facebook`,
            url: `https://www.facebook.com/ikhalidsaifullaah/`,
          },
        ],
      },
    },
    {
            resolve: `gatsby-plugin-mdx`,
            options: {
        gatsbyRemarkPlugins: [
          `gatsby-remark-copy-linked-files`, 
          { 
            resolve: `gatsby-remark-images`, 
            options: { 
              linkImagesToOriginal: false, 
            }, 
          },
        ],
                remarkPlugins: [ require('remark-math'), require('remark-html-katex') ]
            }
        },
    
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-copy-linked-files`],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_ID,
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Khalid Saifullah - Blog`,
        short_name: `minimal-blog`,
        description: `I'm Khalid - a CS undergrad student at United International University. I take great interest in Deep Learning research, visualizations, and photography. Another aspect of me is that I'm a cinephile`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#6B46C1`,
        display: `standalone`,
        icons: [
          {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    `remark-math`,
    `remark-html-katex`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-netlify`,
    shouldAnalyseBundle && {
      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
      options: {
        analyzerMode: `static`,
        reportFilename: `_bundle.html`,
        openAnalyzer: false,
      },
    },
  ].filter(Boolean),
}

You can check out the live version of the post here

gif css javascript
3 Answers

The HTML on the question's page shows that the GIF images for figure 6(a) and 6(b) are not responsive.

Here is the HTML for figure 6(a):

<th class="css-hep4zx"><img  src="...gif" class="css-0"></th>

Note that no responsive classes are present.

And here is a responsive PNG figure 3(a), with very different markup:

<th class="css-hep4zx"><span
    class="gatsby-resp-image-wrapper"
    style="position: relative; display: block; margin-left: auto;
      margin-right: auto; max-width: 650px;">
    <span
      class="gatsby-resp-image-background-image"
      style="padding-bottom: 100%; position: relative; bottom: 0px;
      left: 0px; background-image: url(...); background-size: cover;
      display: block;"
    ></span>
    <img
      class="gatsby-resp-image-image css-0"
      src="(...).png"
      style="width: 100%; height: 100%; margin: 0px; vertical-align: middle;
      position: absolute; top: 0px; left: 0px;"
    >
  </span>
</th>

Why the PNG vs GIF Difference?

The very different HTML markup generated for .png and .gif images appears to be a limitation of the gatsby-remark-images plugin. From the documentation:

Supported Formats

This plugin will support the following formats:

• JPEG
• PNG

Conclusion: The gatsby-remark-images plugin does not generate responsive HTML for gifs.

So what now?

So if the gatsby-remark-images plugin won't make responsive GIFs, is there a plugin that will?

Let's experiment with a different plugin, here's a sample gif to try:

enter image description here

Using the gatsby-remark-interactive-gifs, with the recommended CSS styling, produces HTML like this:

/* CSS copied from `gatsby-remark-interactive-gifs` page */
.interactive-gif {}

.interactive-gif .embedded {
  position: relative;
  width: 100%;
  height: auto;
}

.interactive-gif .gif-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.interactive-gif .gif {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
<div class="interactive-gif">
  <div class="embedded"
       style="padding-top: 56.28517823639775%">
    <div id="nyancat.gif"
         class="gif-container"
         style="display: block;">
      <img id="image-nyancat.gif"
           class="gif"
           data-original="https://i.stack.imgur.com/f7DcY.gif"
           src="https://i.stack.imgur.com/f7DcY.gif">
    </div>
  </div>
</div>

The resulting GIF image is indeed responsive, so it seems that using gatsby-remark-interactive-gifs does produce responsive GIFs.

user_31134850

The issues come because your layout is wrapped in a <table> tag, with an inherit display: table. It's a CSS issue so you will need to change the rules for that table, forcing the wrap of those gifs.

If you are able to change your HTML structure, I would suggest a more flexible and simple structure, such as:

<div className="your-flex-wrapper">
  <img src="gif1"/>
  <img src="gif2"/>
</div>

The wrapper should have a:

.your-flex-wrapper{
   display: flex;
   flex-flow: row wrap;
}

I've applied these changes live to your site (in the th and tr tags) and:

enter image description here

However, it's not semantic to add a display: flex to a table layout so, it will be better to change the structure accordingly.

If you force the width of the .gif to a 100% of the viewport on small screens, they will always be responsive.

user_55853710

I was able to solve my problem with a pretty easy solution. I've just integrated Bootstrap into my Gatsby system and then used some basic bootstrap grid classes to make the .gifs responsive.

The way I solved it:

  1. Firstly, install the bootstrap plugin-

    npm install react-bootstrap bootstrap

  2. Then, import the plugin where necessary (I've imported it in my post's .mdx file where I've defined those .gifs)-

    import 'bootstrap/dist/css/bootstrap.min.css'

  3. Lastly, I've just used the bootstrap way of doing things to make those .gifs responsive (that's how I defined those .gifs in my .mdx file)-

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-6">
      <img src="./neural_net_data_manupulation_2.gif" style="width: 100%;"/>
      </div>
    <div class="col-sm-12 col-md-6 col-lg-6">
      <img src="./neural_net_decision_boundary.gif" style="width: 100%;"/>
      </div>
  </div>
</div>

That's how they look now:

  • Big display (PC)-

enter image description here

  • Small screen (mobile)-

enter image description here

user_76107240
Related