I would recommend using photopress and then doing this:
1) add this code to your CSS file:
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
2) Now, whenever you add the image code into your post from Photopress, add within the img tag either class="alignleft" or class="alignright". This should wrap the images correctly.
BTW, I lifted that CSS straight out of the default Kubrick template, so I take no credit for that whatsoever. Hope that helps!
What you can do, and something I did myself, was to create a class in the css such as:
img.left or img.right or img.centre
If you use the IImage Gallery, that covers most of the basics for what you want in a plugin for images. Next, use the plugin to browse the image you want and select it, it will then add the code for you. Where you see see img src= before the source or after enter class=”left” or class=”right” or class=”centre” as you’ve styled in your style.css. This will align the img as required. It’s only one part of the process you have to do, and I’m sure that will fit your requirements.
The reason is this – the plugin is insert the image code, but it doesn’t know what your stylesheet looks like, it doesn’t know how an image aligned to the left will look like and perhaps it will break the text. All it can do is say, I have an image, and it must go here. You would then say, I want the image specifically here.
an example I’m using in a wip is:
img.left {
margin-right: 6px;
margin-bottom: 0px;
margin-top: 5px;
float: left;
padding: 0px;
border: 3px solid #fff;
}
I’ve left the img tag itself alone, because I want all imgs to default to whatever they are before I apply any changes.
Maybe that helps, or maybe I’ve confused you?
WOW, Jinsan, we posted almost the exact same answer at the exact same time! great minds 🙂
Thread Starter
Brooks
(@brooks)
Thanks folks. You did solve the main issues I had. Please go to my blog and see my test posts.
One major problem I’m having is with the weirdness that happens if you click on the pictures though. It completely destroys the page that the main image is on when you click on it. Please take a look and tell me if you think it’s a simple fix or not.
Is there a simple way to make the full size image show in a pop-up window when you click on a thumbnail? That would be WAY better for me. If you have any ideas, that would be cool.
Don’t you need to add the clear:left component too?
Thread Starter
Brooks
(@brooks)
Sorry Clark. I’m not sure what “clear:left” does.
Perfect! Exactly what i’ve been looking for! Thanks guys…. as for the clear:left thing, I haven’t needed any more than what was posted above, no idea what clear does either.
Can you explain using Clear in relation to this post, ie: images left/right? I think this is what I need, and I’m confused as to how to use it. Does it need to go in the style sheet, or somewhere after the post?
Thank you .. I did search on this to find the answer, but couldn’t.
jo read the post above yours:
Clear left, right or both
You may use clear: left;, clear: right;, or clear: both;. When using clear: left; the element will stay clear of the other elements left of it putting it below the others. When clearing both, it makes the element go below all elements above it.
that pretty much explains it. the value is clear: then left, right or both. It goes into your css. What you can do is add it as a class in your css and call that within a div. Use it any floated element as clear: both or whatever variation you need
Hey Brooks,
the Iimage Browser will do this for you easily.
http://fredfred.net/skriker/index.php/iimage-browser
Check it out, and look at the personalized code part, the developer Martin Chupá calls them – patterns used in the Iimage gallery, which I don’t use, but I use the patterns, or personalized code.
It still needs the align options but you can include that in your personalization.
I am trying to use the custom patterns for IImage Gallery to show images on templated pages, instead of blank (image) pages. But I can’t get it. I only have like half the code. My image page doesn’t recognize the variables, but I have it up til then. I can get as far as linking TO the page.
If I could get this last and very important step, it would be MY perfect image plugin.
Help?
I developed a plugin, which lets you upload images from the post form (I know, nearly obsolete in 2.01). The image gets automatically resized twice (thumbnail and image), which can be set up detailed in admin panel. It automatically puts the image into the posts using a pre-defined html template (default template is pre-installed) -> Image top left, floating, small frame around, textual description below, onclick-Javascript to open the full sized image.
So the only thing you need to do:
1. Install plugin
2. Set up final image and thumbnail size
3. Start/edit a post
4. Chose a local image for the post (gets uploaded then)
5. Submit
Some more features:
* Resizing like “Fit-best-in-a-bounding-box”, Relative-Size, Absolute-Size, No-Resize…
* Images files get maintained automatically (get deleted, when post gets deleted and get replaced, when new image for that post was uploaded)
* HTML-Template to give extreme control
and so on.
I’d really like to know what you think about the plugin.
http://www.wp-plugins.net/index.php?filter=sticky+image&filter_search=Go…
