I am creating a website that shows a random picture of a Guinea Pig. I am constently adding pictures, and I'm storing all the photos in an unsplash collection: "unsplash.com/collections/09ARrXAI2Sk/guinea-pig"
I am wondering if I can choose a random image from this collection. This is my HTML code:
<img src="https://source.unsplash.com/collection/09ARrXAI2Sk/1600x900">
Can someone tell me how to do this correctly?
Related
I am looking for some code to help me...
Problem: I want to be able to create a picture gallery in CSS or HTML (Weebly) where by external users can upload a photo (or multiple) and it will then display in the gallery of the website.
I have looked at:
woocommerce product gallery images upload from front-end
and
upload photo for a html project
But they seem to only really focus on creating the gallery. Weebly already has a low code version for a gallery, but I can't find a way of allowing others to be able to upload to it.
Ideal solution: some HTML/CSS which will allow people to upload multiple images (but it will check they are all *.jpg, or *.tiff or *.png) and then add them to a rotating gallery on the page. It will allow me to go in and modify the images/delete images if inappropriate.
Reason: Someone has passed away, and I am looking to create a repository for all of the friends and family to upload all of the photos they have of this person so we can create a database.
Thank you in advance
In my website (news aggregator) i am displaying articles boxes with title and image miniature linking to an external article.
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Article Title</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>
For each article i am displaying a miniature to the og:image of the related external article.
When doing a performance test on my website load, it reveals that some pic are 2 or 3 mb size and since my site display a list of let's say 50 articles it went huge.
My question is : since my users don't need the full image , is there a way to display the og:image as miniature without importing the full thing size ?
Thanks
I'm posting as an answer as requested by OP.
Basically, because the images are external, you can't really control file properties like dimensions, quality, or file size using client-side (frontend) languages such as HTML/CSS/JS.
Option 1: Generate Thumbnails on Your Server
So if you want to reduce something like the file size of one of these external images, your best bet is likely to have some sort of back-end script set up to pull the images in advance. A back-end script (using something like PHP) could pull the images and re-save them on your server, reducing the dimensions, quality, or file format in the process to help reduce the file size.
Then on your aggregated article page, you would use the thumbnail images you generated, rather than the direct images from the external sources.
However, it should be noted this means you need to run this back-end script before users try to load any images/thumbnails, because having it run when they request a page/article/image still means the entire file has to be downloaded before being converted.
Option 2: Lazy load the images
This won't truly reduce the page load, but lazy loading the images can speed up the critical parts of a page loading, only loading those large image files after everything else has loaded.
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
That gives you a basic lazy loading image, which can help make the page appear to load faster, though the actual external article images will still take the same amount of time to load. The browser will just wait and load them last.
Using Jekyll, I was trying to prevent a Google Maps link from
loading each time by replacing it with a "clickable" image, so that the
map would only load "on demand" when clicked; I thought that was smart,
but it doesn't work :-( Would anybody see what's wrong and help me out?
https://maps.google.com/maps?ll=-1.501633,29.631358&z=12&t=m&hl=en-US&gl=RW&mapclient=embed&cid=17550833976507367943
Took a screenshot of the "embedded" map, cropped that, and created a
link to that image (assets/google_maps.png) in the README.md like this:
<img src="/assets/google_maps.png" alt="" width="288" height="184" />
This works fine locally at 127.0.0.1/4000 but having git pushed it, the
image only shows here:
https://github.com/veteranssafaris/veteranssafaris/blob/master/README.md
and not here:
https://veteranssafaris.github.io/veteranssafaris/
and I can't figure out what's wrong.
The image is located here:
https://github.com/veteranssafaris/veteranssafaris/blob/master/assets/google_maps.png
I googled around and had so many unspecific results, and though I read
many of them, I don't manage to understand this.
Can anybody please tell me what I am missing here? Is there a way to
prevent Google maps (or some other such link) to load each time by
linking it to a (low res) clickable image file of itself, to save some
bandwidth/CO2, and only load it on demand?
Thanks a lot!
Your webpage url is: https://veteranssafaris.github.io/veteranssafaris/
So your website is located under veteranssafaris and you have to generate links having that in mind:
<img src="/veteranssafaris/assets/google_maps.png">
In Jekyll, addd the subpath to _config.yml:
baseurl: /veteranssafaris
Then make sure you use that when generating links:
<img src="{{site.baseurl}}/assets/google_maps.png">
t.co of twitter is not fetching images. After redirecting to another link it is unable to fetch the images.
my code is:
<pre>
<img class="imgmyclass" src="https://t.co/onj4Gps4rQ">
</pre>
please help.
Thanks
Because the url does not point to an image.
As far as the image in the link you are trying to extract the image from is concerned, use this:
<img class="imgmyclass" src="https://pbs.twimg.com/media/CZ4p4TCUAAEQKJt.jpg">
Where src tag is used to point to an image, not the url of a page which contains a post and an image associated with it.
If you want to extract the image url, open the html page, right click on the image and hit copy link address. Do not forget to Give proper credits to the owner of the image.
I want to display the image on a jsp. I have the image path in the MySQL table where the image is uploaded or stored. Using that image path how can I display the image on the JSP?. Can anyone show me the code for the same?
You get your jsp to emit an image tag.
For example, if your imagepath column contains /assets/2015/abc123.jpg, you arrange for the web page your jsp is serving to contain a tag like this:
<img src="//static.example.com/assets/2015/abc123.jpg">
Then, when the browser goes to render the page your jsp sent out, it will fetch the image from the path.
Now, I am guessing at the rules you need to follow to turn the path in your column into a valid URL. The business about //static.example.com/ is my guess. But that is the basic idea.
Suppose there is an image stored in database as images/triangle.gif and in your project there is an image name triangle.gif under web/images folder. Then you can simply show the image like this.
<img src="${pageContext.request.contextPath}/images/triangle.gif">