I am attempting to create a website that will host my art, blogs, articles, and other media. I want the art (for the art) and the thumbnail (for the articles, etc.) to show at their relative shape. I can do that part by simply linking the images to a new page (either the art piece or the article).
What I am having trouble with, however, is fitting each inequilateral shape together relative to their size and where they are inserted on the main page of my HTML file. The included link is a website that I'll use as an example, and a picture is included for those on phones.
Website I'm basing off of: http://www.kogashuku.com/
Picture for mobile devices
If I understand what you're going for, you can use Masonry.js for that.
You will have an easier time, and achieve a better result, if you leverage a polished, 3rd-party solution to help you.
Related
How do I make collection images bigger on my website? I use Shopify eCommerce. Individual images are good. they appear big and resolution is decent as well. however in category pages images are a bit smaller.
I'm not really good at HTML. but I'm trying to figure it out for days now.
You can use element inspector in browser to find images and their classes on collection page. And when you will find out the needed classes, you can update css styles for it to make images bigger. If you provide us with a link to your store, I will give you more precise guideline.
I have been working hard on assembling photos into a travel blog. Currently I am reading about how to make full page image carousels. The specific problem I have is this: I want to have an image carousel of 100 pictures. At different points in the blog I want the user to be able to enter the same carousel at different images in the sequence. Currently I have to duplicate the code for the 100 images at each point in the blog. I am trying to figure out how to refer to the same html from different parts of the web page. Here is an example:
https://bwanaaa.github.io/flicktest/
The first image is a full bleed cover. The next two galleries are the same gallery but different starting points. I had to list all 10 images in the html TWICE to achieve this. You can imagine how verbose the html gets if i have 50 images with 10 entry points.
Here is a codepen to experiment with:
http://codepen.io/littleredbowtie/pen/yNdOMQ
Is there a way to have a 'subroutine' in html?
This can't be resolved through HTML alone. You'll have to implement further JS functionality, or find a different plugin.
Here is a plugin that is closer to what you're looking for:
https://github.com/stylehatch/photoset-grid
Demo:
http://stylehatch.github.io/photoset-grid/
it makes a grid of photos, then you also add the lightbox functionality, whatever photo they click on, it will go to that photo in the photoset, and also have navigation icons comparable to a carousel.
I'm looking into creating a website that allows people to create their own designs for a certain product. This product can have straight lines, curves, squares, and various shapes. I would not only like these people to be able to free hand draw their own artwork, but also be able to drag and drop (or just click in an area) certain stock images onto the template. I started this project using HTML/Canvas, and have implemented the drawing of freehand/shapes/lines, but I've read a few places that say I should be using SVG for the images.
Reading that I should use SVG for images made me think that since I'm a novice on HTML and website design in general, that I should possibly be doing this differently. So I was wondering how some people would implement this. For a good concept, think of a web site that people can design their own T-Shirts. You just draw on a square canvas, circles/squares/lines/free hand, but can also stick stock photos on there. Thanks, and I'm not looking for code, just to know if I should be using a mix of HTML/SVG/Canvas, or something completely different that I don't know about.
to summarize....
svg, or canvas.......or both, or something else completely.
Okay this is how i imagine you want it to work:
Your customers select a tshirt size and style.
An embedded application within your website allows the users to draw
a nice design they want or import an image
A price is calculated based on the size of the tshirt and the size
of the print
Upon succesful payment, you receive on your backend an image of the
print, the order details and you feed that image into your T-shirt
printing thingy, you print it and you post it.
If this is right you should consider this: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
You will probably want to remove some unnecessary tools from it and fire it up with different configurations based on what kind of tshirt the customer selected. One example is the t-shirt size. If a customer selects a small t-shirt you fire up a smaller drawing size. The list goes on.
You need to have some good JS skills however to be able to play around with SVG-edit because it is massive but from what i feel it fits perfectly to your purposes.
If you want to see the differences between SVG and Canvas read this: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. Its pretty straightforward.
Now why did i suggest using SVG-edit? I don't know if there is any other application implemented using canvas that has so many tools and works so nice as SVG-edit.
It has everything you need, including a '''SAVE as PNG'' function which will serve your purposes in case your t-shirt printer doesn't print SVG images.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
My questions:
Is this a good idea?
If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images?
Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
Why?
Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
You can add other UI or layout images to your sprite
Optimize the resulting PNG:
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
When not to use sprites:
When part of the images in the sprite change frequently
In this specific case: when the majority of users would need less than the (about) 10% of the images
I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.
Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.