override the hero image background on this page

this is just cos im lazy and want to override the image here ^^^

Making an image responsive using css using background cover

the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..

Locate a DIV and CLASS and create an IMAGE element using JAVASCRIPT

I had this weird request the other day, well today to replace an image thumbnail that was generated by an aspx script, but the link was from youtube and the list was not auto loading the thumbnail.&nb..

HTML how to add an IMAGE! Quick HTML Tutorial

Just doing a bit of a series on HTML basics, i will list them here as i add them. We upload an image to imgur, and i show how to get the image link and insert it into html to show it! Super basic a..

nice and easy fancybox installation for image lightboxes

make an image or element grayscale switch on mouse over

mouse over the image to see the effect also used: transitions random image

CSS Object Fit for Image fill rather than using background image on a div

CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.  Object Fit You can use: object-fit: With the following ..

use an image in your list items ol ul li

replacing the default ul li list with an image prefix

error Warning: getimagesize(uploads/583517f49099a.jpg): failed to open stream: No such file or directory in SimpleImage.php on line 1198

i think this error is just caused by a missing file. But there should be some kind of error checking here to not crash the whole site just due to a missing image file. this error is quite hard to fin..

can you set all image heights to match with css no stretching

Short Answer: Yes with object-fit: cover; on the css of the image properties.  object-fit: cover; You might also need:  object-position: right bottom; ..

Video Placeholder Image HTML

a quick image embed for a common video placeholder image size made by this amazing placeholder site

Map Image with Easy Dots and Titles using only CSS

I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..

using figcaption and figure for your images

So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..

Auto Changing Image URL

Here is a picsum url that you can use to generate image sizes, just change the numbers in the url to change its generated size.  Some examples of the sizes you can use are below. 

A short unsplash image url

You will notice that if you copy the image source from unsplash you will end up with something like this: https://images.unsplash.com/photo-1582639590011-f5a8416d1101?ixlib=rb-1.2.1&ixid=MnwxMjA3..

center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

add new random image with button

this appends a new random image from picsum.photos to the div with the id app

Changing the default hero image based on the category name [not yet done]

This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..

stackable bio or biography list with portrait image title and text

a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout.  As its in foundation here is ..

get and show the featured image on a wordpress page template

this will extract the featured image on wordpress page if you are using custom page templates. 

landscape image document placeholder

A nice landscape image of a blank presentation format, in landscape mode with drop shadow.

ken burns slow image zoom

No i had never heard of Ken Burns either, but hey i like the zoom effects.  Slow Zooom...

test image url that always changes unsplash placeholder

good if you are doing a test site and need some changing images for test placeholders, and they are nice looking images as well. you can just use this image tag link and specify the size required.&nb..

using filter grayscale to make an image dark

lets make this image grayscale using a css filter

extract youtube image from video url

showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..

make your images look non squished when not using image backgrounds v2

this is a working version of this post, for some reason that image was deleted I think due to a content upgrade.  Basically this uses the object-fit: cover; to make images not stretch when they ..

fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

Remove background image php with image magic

untested research on removing background and making it transparent with php

a page with two images

a page with two images for testing

python extract images into an array from a url

this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..

adding a background image to the titles of the dark mode card on this page

Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..

blur the background image while keeping the foreground normal

this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry

background image greyscale filter while foreground is still in colour

i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue

adding background blur to an image using css fill screen

I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos.  Its basicall..

Aligning Images in TinyMCE or Floating them left and right (code)

Here is the code for this page Aligning Images in TinyMCE or Floating them left and right  

change images to upload file also to imgur [reported]

may also create a seperate db to store imgur image links? can update the source_link in the current images to link to the imgur version. I remember i did this a while ago but cant remember the code ..

make an image white with css using filter brightness and invert

If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..

background image on 3 boxes not scaling correctly fix

So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix?  Pixels rather than Perce..

stretching an image to fit in a banner image with gimp

sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..

simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

get the dimensions of an image with javascript

this will show the height and width of an image using javascript

Making Images Retina Display Friendly

Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..

Making an image responsive using css

the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..

image Checkbox Replacement for Forms

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..

convert all images into base64 encoded

if you have a bunch of html with inline image links this will convert them into base64 images inline. <?php $html = "my html string with multiple image tags..."; $dom = new DOMD..

wordpress show posts loop with feature image thumbnail

this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..

copy image to data uri using chrome base64 encode

Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome. Found this one useful if you want to convert an image to base64 encode and link it directly in css or ht..

use an image to replace bullet in ul list

How to replace the default bullet with an image in a ul tag .widget ul, .page-content ul { list-style-image: url('images/favicon.png'); }

darken background image using css

darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..

make your images look non squished when not using image backgrounds

Update: Fixed the code, you can see it here.  i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..

set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..