I'm trying to make a Pinterest-like gallery for my portfolio. Nothing too fancy, just displaying images that are found in a folder by some simple PHP. I will attach a lightbox (or something like it) later.
For now, I have trouble with letting the images "float" upwards against the other pictures. In some magical way, the two images in the top right do it, but the other ones do not.
You can see it live here.
Here is a JSFiddle, but it doesn't show the images.
Is there some easy way to do it? Or do I really need to start using some kind of jQuery-plugin for this?
Thanks!
http://masonry.desandro.com/
Masonry is a good grid arranging JQuery plugin. Probably one the best out there.
I personally have not used it however friends of mine have with good results saying that:
It is customisable
It is quite lightweight for what it does
It is fast
Unfortunately it is not exactly the fastest thing in the known universe since it uses JQuery (which is already a relatively slow Library, or framework as its starting to get) and puts a CPU intensive calculation on top. As such it is not as fast as a CSS hack but whether Masonry is the best choice or not depends on exactly what you need it for which has been left out in this question.
If you are building a simple portfolio type thing then a CSS hack is the best method but if your building something further then this might be the one your looking for.
Unfortunately due to patchy standards across browsers like IE you will find producing this layout without considerable resources placed client side (such as image resizing for very large images that could have been cropped server side) difficult.
o.v. and ThinkingStiff do have answers and if you were to standard resize every image that comes into your site to a particular size and use caching method available for the layout you could easily get away with a CSS hack for something simple like a photo page or a portfolio.
You can do this with CSS3 column-count, assuming you at least have a single containing element. This method has the advantage of changing layout easily (for a mobile device, for example) by simply adding a class.
Output:
Demo: http://jsfiddle.net/ThinkingStiff/rS95S/
CSS:
#container {
column-count: 3;
column-fill: balance;
column-gap: 10px;
width: 330px;
}
.image {
display: block;
margin-bottom: 10px;
width: 100px;
}
HTML:
<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>
jQuery Masonry from Sammaye's answer would work - the trick is getting it to work before the content has been appended to DOM in the original order (this would be fairly trivial on an ajax website)
There is however one reason why Masonry plugin would be overkill - it's the variable content width. Neither on pinterest nor in the portfolio mockup would this be needed - at the same time you end up with processing overhead on the client-side, and flash of incorrectly positioned content.
Just using container <div> columns would be sufficient in this scenario:
.column {width:33.3%;float:left;/*should be clearfix instead*/}
.column .content {width:95%;margin:2.5%;float:left;}
Content can then be applied to correct columns either server-side (getting image height&width is trivial, just balance how dynamic it has to be) or on the client-side w/ajax before appending content
Fiddled
Related
I know there are similar questions, all of them are old, and I was wondering maybe there are newer techniques.
I have the following HTML:
<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>
What I need is the figure container keeping the room for the img while it's not loaded yet. Without the container keeping the space I end up with twitching content which feels awful.
So far I've came up with the following SASS mixin:
#mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) {
.#{$image-wrapper-class} {
position: relative;
padding-bottom: percentage($y/$x);
}
.#{$image-class} {
position: absolute;
}
}
Being applied like #include image-placeholder(1170, 405, main-slider__slide, main-slider__image); it generates CSS like
.main-slider__slide {
position: relative;
padding-bottom: 34.61538%;
}
.main-slider__image {
position: absolute;
}
The problem is that I have to hardcore the size of my images in the styles and have a separate class for every image of with certain dimensions. Do you guys know better solutions where one general placeholder class would resolve the problem?
As I wrote into comment above - I doubt that there is general solution that will allow you to obtain information about not-yet-loaded element.
However it may be possible to mimic such behavior.
One thing that came in mind is to have tiny resized version of the image to be loaded to be inlined into document and then replaced by actual image upon page load. E.g. your 1170x405 image can be squeezed by 20x factor to 50x20 that will give you ~1kb of image size in jpeg. This image may be stored as <img src="data:" class="image-placeholder"> directly into document and act as a temporary replacement for your actual image. You can scale it to original size using CSS and load original image either by JavaScript or by allowing browser to load it without displaying or by putting it immediately over placeholder. It can be also useful to apply filter: blur(10px) or something like this to image placeholder so it will not look ugly. Actually you can even animate this filter value to provide pleasant visual transition from scaled down placeholder towards original image.
I've used such approach into one of my projects and it was working well.
Hope it will help you.
I have been working on my site for my store and have multiple pages with products arranged in a table. First column is a photo of the item followed by columns with item #, description, price, etc.. Currently I am writing code for each image resize "img height:, img width:" Is there code that would automatically do this for each image? I am trying to keep the width the same on all photos to keep the column the same but the height is usually different for each photo. I am just trying to keep them proportional. Just trying to figure out a way of doing this easier. I've tried many design-your-site websites but none offer subpages of subpages. Wesbite is www.fredstrainshop.com. "lionel.html" link gives a good example of what I'm trying to do. Thanks for the help.
You can create a class for each image and specify the width and height. In case you want to change height of some specific elements use id.
HTML-
<body>
<img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
<img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
</body>
CSS-
.train
{
border: 1px solid black;
width: 100px;
}
See this for inspiration - https://jsfiddle.net/0w0vkzst/
On another note, I just visited your website, please consider using classes and ids for arriving at a more modular design. You might want to brush your html skills, for that codecademy and w3schools are great sites.
I used this html line
style="width:100%;height:100%;"
The line won't work in my case because the scrollpane works a little bit differently.
But if I add this line:
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
it works
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />
I understand that <frameset> and <frame> tag are becoming deprecated. Is there a way to emulate resizable frames? What I want is a narrow separator separating the area either horizontally or vertically, which is movable by the user so that when one side of it becomes smaller, the other side becomes larger, and vice versa. I do not want to fill in each frame with an html page like the conventional frame, but instead with some DOM materials.
I know that CSS3 has resize attribute, but that controls only the size of itself. I am not sure if this is to be used for the solution.
I don't particularly prefer using JavaScript, but I am not excluding the possibility of using it if necessary.
Do not use frameset, please. I don't think jQuery resize will help you much, either.
The best way to do this is by using a "splitter". There are several plugins for jquery that will do this in many different way and they all are actually quite simple.
I have previously used this one: http://methvin.com/splitter/
You can find a nice demo here: http://methvin.com/splitter/3psplitter.html
From my point of view jQuery Resizable or such js things is your solution. Go for it's demos.
In case of using jQuery you'll have extra possibilities:
Maximum / minimum size
Constrain resize area
Delay start
Snap to grid
Here is a sample code for jQuery Resizable default functionality:
<style>
#resizable {
width: 150px;
height: 150px;
display: block;
border: 1px solid gray;
text-align: center;
}
</style>
<script>
$(function() {
$("#resizable").resizable();
});
</script>
<div id="resizable">
<h3>Resizable</h3>
</div>
You may like this link for YUI
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html
Example:
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html
Janus Troelsen's solution above is great if you don't mind tables.
I also found this solution by SoonDead without tables, which worked great with Chrome and FF, but had to spend a nasty amount of time for IE8. It's on StackOverflow as "Emulate Frameset Separator Behavior"
I would look into Javascript and drag and drop support.
In fact, an emulated frameset could be just two divs and a handle between them which can be grabbed to resize. JQuery has samples to demonstrate how to resize an element: http://jqueryui.com/demos/resizable/ I don't think it would be very difficult to expand that concept to fit.
Then I would load the documents via AJAX, and this could probably replace frames completely.