I have a Gatsby portfolio with a ton of largeish jpgs/gifs/mp4s, using react hook masonry. Because it's loading in columns there's an undesirable stuttering loading in effect, where the images sort of bump in and push each other down.
I want the jpgs/gifs/mp4s to fade in as they load rather than jump in and push the content around, but I'm not sure how to do that, think I'd need to program the aspect ratio in somehow. Note that I can't use Gatsby Image to calculate the aspect every time because I'm also using gifs and mp4s which are incompatible with Gatsby Image.
Here's how I'm using graphql to call the images from Gatsby, and I'm using Netlify CMS to host the media. Gatsby Image has an aspect ratio feature for jpgs only, but the documentation is sparse. Another thought I had is maybe I need to make a field in Netlify CMS that takes the aspect ratio, but that seems clunky.
if anyone has any tips I'd really appreciate it, thanks!
You should use gatsby-image to optimize your images. It has a lazy-load feature, so the pictures won't start loading just when they appear on the screen etc.
The aspect ratio thing you mentioned is also a feature of the gatsby-image plguin.
But anyway, the pictures push each other because they come in different size. You should use gatsby-image to "crop" the images or resize them.
Or you can put them in a container div which has fixed size in a given aspect ratio. Then you can simply put the images inside with a 100% width and auto height and object-fit property.
Related
I use react-native-remote-svg package to show my svg images. The problem is I don't know how to greyscale them. I already tried
https://developer.aliyun.com/mirror/npm/package/react-native-color-matrix-image-filters
but the filter make no changes on svg images.
I also tried https://github.com/gre/react-native-view-shot to change images to png and then apply the filter, still I was facing issues. The shot some times showed images correctly, and other times I all got was blank.
Note: I am trying to apply greyscale to images, not icons. So I probably can not change it to font either.
Any help would be appreciated.
I'm trying to do what I thought would be a super simple thing. I have users uploading images to my site, they can upload any images. I'm using a react carousel to render them. I noticed whilst testing that obviously images different sizes and this makes the carousel a bit weird when rendering them as it can jump between rectangles and squares. so I figured the best way would be resize all the images to the correct size. however, I'm having issues with this.
I've seen lots of answers online like so: resize image before upload using javascript
but I don't want to copy 50~ lines of code and just use if I don't know what it's doing. I searched for packages and found this: https://www.npmjs.com/package/jimp which looks perfect but I got some errors with this I couldn't figure out.
all I want when uploading them is to simply check if width != height and then resize to say 300x300. I am using firebase and I am using their resize image tool. again it's really good but you specify dimensions but I think it treats them as maximum rather than actual. obviously I don't want to lose image quality too and stretch the image. so I'm wondering the best way to achieve this.
I have a GIF that I will use in a React web app I am building. I want to be able to step through the animation based on the scroll position of the site.
I.e. when I have scrolled through 50% of the page, then I want the gif to display the image at its 50% position.
The gif will be in a div, position:fixed. So it will always live in the top corner of the browser.
The web app is a react app so if it's possible that there's a react library that implements this then that would be great.
Thanks!
There appears to be at least one ready made React implementation for dealing with the interaction with/playing of the GIF that may be able to assist you in your project.
React Gif Player is a React component which creates a GIF player similar to Facebook's implementation. It also comes with a pause function (and an example), which you may be able to use to programatically pause the GIF at corresponding points based on your scroll position.
Gif Frames is a pure JavaScript tool for extracting GIF frames and saving to file. You may be able to create individual frames and correspond frames with certain points of the scroll.
I'm not aware of a gif player that implements exactly what you were hoping for, although others may be able to assist in this regard. If not, you may have to use a combination of, or do a full implementation yourself.
Hopefully this helps.
Seems like the answer to how to position components in Sencha Touch / Ext JS, especially with percentage or proportionally is pretty much to use some type of container with a layout type.
This seems like a step backwards to me - similar to what HTML Tables were for web page layouts. Create a containing structure that controls the layout and in each "cell" you have some content.
Specifically, if you have a component that you don't want SIZED based on these rules, only positioned - that is essentially what all the Sencha Touch / Ext JS approaches seem to be.
Layout type hbox, vbox, columns, flex layout, anchor. They all create containers around your components, instead of just directly positioning your components.
Am I missing something integral, or is this really the way it is?
Besides from the obvious problem of over-nesting, it seems like a more complicated approach, and creates a dependency between each component and the other components on the page.
I would like to have a way to say "this component is 30% from the top and 20% from the side", potentially also sizing the components using percentage - but not always.
The percentage / proportion approach is a must if you're developing for multiple devices.
If you are just getting started with Sencha Touch, it is easy to get caught up in the huge amounts of markup it creates. The key to developing in Sencha Touch is to let it do its thing and allow yourself to do things the 'Sencha Touch Way'.
Also, feel free to add classes to the components you are creating. You can manipulate these with CSS almost like a normal website.
Go through the docs. The frameworks have been around for a while, so, your issues with it have probably already been addressed.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.