I'm transitioning from WordPress to Gatsby. How should I add multiple images from the file system throughout a one-off page (ex. homepage)?
I like the advantages of the gatsby-image plugin component, but is a graphql query required for each image? The example here only shows one image. In a page with dozens of images a graphql query for each one seems verbose compared to a simple html image tag.
Is a different image component or import technique better in this circumstance?
Thanks!
I ended up using inline require to add images.
<img src={require('../assets/logo.png')} />
Related
I have a page with hundreds of images that I want to show only on hover over text.
I did it using CSS, but the page loads very slowly because it has over 700 images.
How can I twist it to load images only at the time of hovering instead of when I load the page?
The page is http://play-well.ro/comp
Thanks!
You should use sprites to merge small images into a single file (this way you will avoid multiple HTTP requests to fetch the images)
and you should also consider paginating the contents of the page itself to improve the performance in general
I have a simple EmberJS app. There are a bunch of images stored in app/images. I can load an image from this folder in any template if I hardcode a path: <img src="images/MYIMAGE.png"/>. These images are associated with records though, and I have paths to them stored as attributes of the records. The path is a computed property from the filename persistent attribute. When I attempt to load the image through an Emblem template with img src="{{path}}", the image does not load. Ember is trying to fetch the image from this url:
http://localhost:9000/images/%3Cscript%20id='metamorph-71-start'%20type='text/x-placeholder'%3E%3C/script%3E%3Cscript%20id='metamorph-71-end'%20type='text/x-placeholder'%3E%3C/script%3E
If it makes a difference, I scaffolded the app with Yeoman and I have Grunt running a ton of preprocessors on my code (the standard ones that come with the Yeoman Ember generator). I thought maybe the images were being renamed, but the fact that I can retrieve them with a hardcoded path suggests otherwise. What's going on?
You need to use {{bind-attr}} for dynamic attributes like that.
<img {{bind-attr src=path}}>
See http://emberjs.com/guides/templates/binding-element-attributes/
i need to display an image on a page which i developed from content/pages. But i dont know how i can display image and pass dynamic data to this page.
Well! after waiting for people to answer i did some research and found that this work is done through tags and involves the use of partials.
I have a developed PHP code to dynamically load files contained in a directory into a gallery / slideshow. I have many (40 - 50) of these gallery web pages which display images grouped by content. With hundreds of images, the dynamic gallery code allows me to add images to a directory without having to write code to each web page each time.
However I've realized that these files will be invisible to search engines since there isn't any HTML code to index on (e.g. the 'alt' tag). Does anyone have any suggestions on how to get these images indexed? Two ideas I've had:
1) Write a program to automatically generate a single web page for every jpeg file which will display the image when found with the search engine and contain a link to the gallery page where the user can see more content. The benefit to this method is not having to modify my live web pages. The downside is hundreds of additional files only to be found by a search engine.
2) Write a program to generate hidden links that can be pasted into my gallery html page - using the alt tag. The benefit to this method is that users would find my main gallery page with a search. The downside is having to cut and paste code to my live gallery web pages - defeating somewhat the purpose of a dynamic gallery.
I'm new at this, so any suggestions would be appreciated.
If I understand you correctly:
I would have one page that just lists thumbnails of pages, and then one page for each of the images, that shows a bigger version of each image, and all the meta-data you have. The best would be if you added a short unique snippet of text to each image, describing what in it.
I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:
Imagine you have 1000 thumbnail images on a single HTML page.
The image size is about 5-10 kb.
Is there a way to load all images in a single request? Somehow zip all images into a single file…
Or do you have any other suggestions in the subject?
Other options I already know of:
CSS sprites
Lazy load
Set Expire headers
Downloads images across different hostnames
There are only two other options I can think of given your situation:
Use the "data:" protocol and echo a base64 encoded version of your thumbnails directly into the HTML page. I would not recommend this since you cannot then cache those images on the users browser.
Use HTML5's Web Storage to store all the images as records with the base64 encoded image data stored as BLOBs in a column. Once the database has downloaded to the users machine, use Javascript to loop through all the records and create the thumbnails on the page dynamically using something like jQuery. With this option you would need to wait till the entire database was done downloading on the end users browser, and they will need a fairly modern browser.
I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.
If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.
This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.
See one tutorial at http://css-tricks.com/css-sprites
It sounds like you want something like SPDY's server push. When the client requests the HTML page (or the first image), SPDY allows the server to push the other resources without waiting for more requests.
Of course, this is still experimental.
You could try the montage command of imagemagick to create a single image.