Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2010-06-11 13:08:11
- ptreble
- New Member
- Registered: 2010-06-11
- Posts: 7
Custom image ordering
Not sure if this has been answered or not so sorry if it has!
I installed the wonderful plugin smd_slimbox on a site for a photographer, so the homepage pulls in a gallery of 21 images from a ‘mainportfolio’ image category.
What Textpattern doesn’t seem to allow is custom ordering of the images? My client would like to be able to order the images with the Textpattern Images admin. Is this possible?
Thanks. Phil
Offline
Re: Custom image ordering
ptreble wrote:
My client would like to be able to order the images with the Textpattern Images admin
You could try cno_image_order.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#3 2010-06-11 13:18:53
- ptreble
- New Member
- Registered: 2010-06-11
- Posts: 7
Re: Custom image ordering
Thanks Bloke — I tried that but it didn’t seem to work very well. When I used the drag n drop, the lists of images were going all over the place and in some instances I couldn’t move a photo from the beginning to the end. It’s the right sort of idea (excuse pun) but needs to be stable. I’m using Safari 5.0 on Mac. Maybe I’ll try it in Firefox…
Offline
Re: Custom image ordering
I’ve never tried it before but I just installed it and you’re right — the categories and stuff jump around all over the shop as you drag images about. Not very friendly.
There is one actual bug I know of if you’re using jQuery > 1.3 (just remove the @ symbol on line 410 of the plugin) but I don’t think it affects the general operation.
Shame really. I don’t know of any other plugins that do anything similar.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#5 2010-06-11 13:33:52
- ptreble
- New Member
- Registered: 2010-06-11
- Posts: 7
Re: Custom image ordering
It actually works better if you edit the CSS in the plugin to give both #navigation ul, and #navigation li — width: 700px;
This then displays the image list vertically and it doesn’t jump around so much. I might go further with the CSS as this is what I expect is causing the problems.
Offline
Re: Custom image ordering
ptreble wrote:
It actually works better if you edit the CSS in the plugin to give both #navigation ul, and #navigation li — width: 700px;
Good find. It’s still not perfect, as you say. But heaps better already.
Like, sometimes the image doesn’t ‘open up’ a space for you to drop it between certain other images, but other times it does. Can’t see why off the top of my head. Also, displaying the categories vertically means you can’t drag very far — I can’t get it to scroll the page down to other categories off-screen, so I suspect there’s going to have to be further CSS edits to float the images to try and cram as much into one screen as possible!
If you get it working to a reasonable degree, please consider sharing your findings on the plugin’s support thread. I’d be interested for one, ta.
Last edited by Bloke (2010-06-11 13:44:20)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#7 2010-06-19 06:03:48
- ptreble
- New Member
- Registered: 2010-06-11
- Posts: 7
Re: Custom image ordering
I’ve made some progress… made some changes in the CSS for the Plugin. Probably best to replace the whole chunk of CSS rather than do it line for line. Should have made a note of every change really.
CSS starts on line 85. Replace the whole <style> tag with:
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 0 auto;
}
#navigation {
overflow: hidden;
font-size: 9px;
}
ul#navigation li ul li {
float:left;
margin: 0 10px 10px 0;
cursor: pointer;
}
ul#navigation ul {
clear:left;
width: 771px;
}
#navigation li,
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation .category {
float: left;
border-bottom: 1px solid #DDD;
margin-right: 10px;
margin-bottom: 30px;
width: 771px;
}
#navigation .category span {
font-weight: bold;
letter-spacing: 0.1em;
display: block;
background: #FFFF99;
text-transform: uppercase;
padding: 3px;
border-bottom: 5px solid #fff;
}
#navigation .category span a {
display: block;
text-decoration: underline;
}
#navigation .category span a:hover {
text-decoration: none;
cursor: pointer; }
#navigation .category li span {
text-decoration: none;
font-weight: normal;
letter-spacing: normal;
background: #eee;
text-transform: none;
border-bottom: 2px solid #fff;
cursor: move;
}
#wrapper #navigation .drop_area {
background: #FFCC33;
text-transform: uppercase;
}
.toggler {
cursor: pointer;
}
#dragHelper {
color: #000;
padding: 2px;
display: block;
background: #FFF;
font-size: 10px;
border: 2px dashed #ffdf80;
}
.update {
display: block;
text-align: center;
width: 771px;
background: #80f769;
border-bottom: 2px solid #67c755;
border-top: 2px solid #67c755;
margin-bottom: 10px;
padding: 5px 0;
}
#sortHelper {
background: #CCC;
z-index: 99;
float: left;
}
</style>Code display -Gocom
Last edited by Gocom (2010-06-19 10:12:10)
Offline
Pages: 1