Yesterday, I saw a tweet saying about holderJS library. When I read the usage, it says it will generate the image placeholder completely on client side. So I am wondering why in the life would I need a placeholder library?
What is the scenario in which rather than placing div of some size I would use image placeholder?
Image placeholders are generally meant for a page that is either in the process of dynamically loading a real image or the page is only partially designed and the placeholder image shows how the design will be laid out and how big the image should be even though the real image is not yet available. In this way, the HTML design can be nearly completed even though the final images are not yet available or done.
Wikipedia uses image placeholders when they know they want a particular image in a page, but are in search of an image they can use with the appropriate license.
Image placeholders are traditionally served up by a service on the web that automatically creates the placeholder images based on query parameters in a URL, but the holder.js library creates placeholder images entirely on the client (so no outside services are needed).
You can certainly achieve the same look as a placeholder with just a div with a background color and perhaps even some text in the div. But, when someone wanted to plug the final images into place, they would have the change the div tags to img tags. When using a placeholder image, all the HTML tags can be final and left as they are, only the .src values need to be plugged in to finish the design. So, placeholder images allow you to have a closer to complete version of the HTML even though the images are not yet done. It's a minor different, but one that is appreciated by some designers.
Related
Backstory to the below issue:
I'm using the jQuery plugin Cropit to produce an image which I get in data URL form (the user uploads an image and Cropit allows them to manipulate it, when the user is happy, Cropit exports the final image).
This data URL is attached to the product (this is a Shopify website) via Shopify properties (in a similar way you would attach text for an engraved product) and then when the order is created, I have an app listening for new orders and I pull the data URL from the order.
From testing, I can confirm that the data URL is wrong / corrupted / broken at the time the order is placed and not being broken in transit.
Original Question
I have a bit of a weird situation and I can't find any similar situations online.
I'm being sent an image in data URL format (from Shopify if it's relevant, I have written a private app and their webhook is sending me an image)
The image is in a data URL format that starts with, as an example,
data:image/png;base64,iVBORw0KGgoAAAANSU.....
The problem I am having is sometimes (and it's maybe less than 10% of the time) when I get the image and try to print it, it's missing the bottom chunk of the image. In a PDF, it considers the image corrupt, and in a web browser, it just sees the bottom of the image as transparent, however much is missing.
This is what it looks like in Inspect Element on Google Chrome when you hover over the image URL (image has been purpled out for anonymity)
My question is, does anyone know why?
We can't find a correlation with browser or device type. And I'm not sure if it's because part of the data URL is somehow missing (maybe a character limit, because it's a really long string!) or if it's the type of image. Might possibly be something going wrong in the upload process?
Is anyone able to shed any light? It's such a weird issue I'm not even sure what to google!
And just to confirm, the image absolutely has to be sent in this format for a whole series of reasons, mainly Shopify restrictions so I can't send the image in file format.
I want to present an image to my visitors, and I don't mind if they download it (they can always take a screenshot anyway), but I don't want this image to appear in any search results ever.
While I know that I can politely ask bots not to index my content, I don't trust them. Therefore, I want them to not recognize my image. Two ideas:
Create my image through e.g. PHP's image functions: <img src="image.php">. But I guess Google understands this.
Publish my image as a table, with each cell 1x1 pixels and the background color of that pixel: <td style="width:1px;height:1px;background-color:#36ef2a"></td>.
Better ideas?
Does this include not trusting /robots.txt file in your setup? Not sure if that is what you meant.
What type of images are they? If they are mostly text, and can be represented with drawings, you can try using the HTML5 Canvas Element and/or Inline SVG to present your image.
I'm not sure if you can use background images to help your point inside the CSS.
So I've been creating a custom responsive theme in Wordpress and I've hit a wall when it comes to image management. I'd like to style images in a way that wordpress doesn't seem to inherently support - I'm looking for something like this:
with the images added via the regular wordpress media management pane, and inserted into posts/pages. The images should be out of the flow of the content but accurately placed next to the correct headers/text blocks. Most importantly, the images ought to collapse into a column with the rest of the content at the correct media query breakpoints.
Here's what I've tried, from worst to best:
Hard coded images in template files
Obviously the worst option. Not portable, requires a lot of meddling, and would be almost impossible to align the images with the correct content. Also, no real way of making the images responsive with the content.
Use the default image styling and abandon the idea of pulling the images out of the regular flow
Non optimal, but it would allow anyone to change/edit images easily.
Remove images from the results of the_content(), then place and style them separate.
Portable, but has the same problems as #1 - difficult to align the images with content and keep responsiveness.
Use the featured image on pages that only require one image
Pretty good option for pages that need ONLY one image, but there is no easy way to make the featured image an arbitrary size/aspect ratio.
Use markup in the editor to correctly layout the images
Requires anyone editing the posts/pages to have some knowledge of the underlying theme. This seems to work the best, but it isn't portable (might break stuff on theme change).
While I've had the best results with this option, it seems sort of antithetical to using a cms/wysiwyg editor in the first place.
My question is whether or not the last option really is the best to get the result I want?
In the end, the answer was clearly custom fields, and none of the other options I listed. With the advanced custom fields plugin, it becomes a breeze to do what I wanted. You don't need the plugin, but it makes image management a whole lot easier, as it fully integrates the wordpress media library with the custom field (which you would have to do manually otherwise). With the plugin, custom fields meet all of my needs (responsiveness, portability, and ease of use for the technically challenged).
My site have 2 pages and the 2 pages contain a similar picture. If a user comes to the first page, he downloads the picture and then come to the second page, if I make the website so that the picture is shared between the 2 pages then the user no need to download the picture again?
If I want to put the same picture but different in size on the webpage, is it better to make 2 pictures by using image software editor or using CSS to change the width and the height of the picture?
you have answered your question.
if the image is from the same source, and if you have configured the caching on webserver correctly (and if the client has enabled cache), then there are no re-requests sent to view the same resource.
you dont need to create multiple images for different sizes, use html image attributes to show it in the grid dimensions you wish to.
Exception: if the original image is quite large, and you are not sure if the user will want to view the image, then create smaller image for faster loading. Thumbnails on a photo album is a good example for that. There is a program called re-sizer which accepts a folder and create a new set of images with the required dimensions
Resources below
Image Resizer
HTTP Compression
im building a webshop in Drupal and i was wondering if you could help me with the following problem:
I got one big image frame (500x500) and 5 little image thumbnails(95x95) underneath the big one.
How can i realise that if the visitor clicks on the thumbnail, the big image frame gets filled with that specific image?
jQuery is the right direction, but the strength of Drupal is based on doing things "the drupal way", which means, I guess in your case, to use Views as the origin for the thumbnails using imagecache + lightbox, and somehow change the main "frame".
I used jcarousel in some cases (for different but similar uses) and it works nice. I guess it is possible to trick it to do what you need, or - better - to find an existing module that do what you want.
I know, many Drupal buzzwords, and a stiff curve to overcome, but this is the right direction in case you want to base your site on Drupal.
If you don't need all of these, and want a static page+jquery, Drupal might be an overkill altogether.
If you use Views, Imagecache, and the Lightbox2 module, you can create image galleries out the arse and tell it to link the field to its large size and use Lightbox2 as the method. This is how I do most of my galleries.
Drupal uses jQuery so you can write a simple jQuery script to handle this (not sure if there's already a plugin to do that). Just add all the img tags (make sure all of them except the first one are hidden[display=none]). Then when a thumbnail is clicked/hovered do a $(big_img_holder).replace() with the tag for the image to be shown. Tell me if you want to see some code and I'll try to show you.
You can see this plugin as an exapmle. Just replace the numbers on the right with thumbnails and you're ready to go ;-)