Thumbrow

[libeco]

I've been using pixelpost for some time now and decided it was time for a new design. Now I ran into a few problems when running pixelpost locally.

First of all I can't find a way of resizing images that are online already, I have over 250 online so I won't do that by hand. Ideally I would show an image of 600px wide and when clicking it it would show a page with the full size image, is this possible?

Second problem I'm having is the thumbnailrow. Is there any way I can edit it through css? I made my own custom borders for the thumbs, but how can I add those to the thumbnails?

I know I can use .thumbnails {, but that way it's not possible to use an image as border, or is it through some css-trick?

Thnx in advance!

[Dkozikowski]

I've been using pixelpost for some time now and decided it was time for a new design. Now I ran into a few problems when running pixelpost locally.

First of all I can't find a way of resizing images that are online already, I have over 250 online so I won't do that by hand. Ideally I would show an image of 600px wide and when clicking it it would show a page with the full size image, is this possible?

My auto-resize addon is capable of resizing the image upon upload and storing the fullsize image as well. Unfortunately, there is a bug when editing images that has not been resolved in the current version. I have a fixed version but it is dependent on the next release of Pixelpost (v1.7). As soon as Pixelpost v1.7 is available to the pubic, i'll release my updated addon.


Second problem I'm having is the thumbnailrow. Is there any way I can edit it through css? I made my own custom borders for the thumbs, but how can I add those to the thumbnails?

I know I can use .thumbnails {, but that way it's not possible to use an image as border, or is it through some css-trick?

Thnx in advance!

What exactly do you wish to do? I'm not following.

[libeco]

I have set the thumbnails to be 120x110px, however, I want a border which I made in photoshop around the thumbnail so that the total size will be 150x140px. I want the border to change when hovering over the thumbnail. So basically, what I can do now is make a border with a solid color through css, and let it change color when hovered, but I want an image.

THNX!

*edit*
Here's two images to clarify;
http://www.libeco.nl/border.jpg
^ normal border with image

http://www.libeco.nl/border_hover.jpg
^ hovered border with image

[GeoS]

You can set it with CSS as background for some tags (like table cell - <td>, <div> tag) and adding :hover state you can replace it with the other background image.

Saying it more clearly:
1) <div class="thumb_with_hover_eff"><img src="my_thumbnail.jpg"></div>
2) In CSS you are coding background and the rest of properties for class thumb_with_hover_eff in both states - normal and hover.
.thumb_with_hover_eff:hover
{ background: url("hover.jpg") no-repeat; ... }

.thumb_with_hover_eff
{ background: url("normal.jpg") no-repeat; ... }

[libeco]

Will this work with all browsers? I think pseudoclasses for anything different than links won't work in IE (from what I can remember?)?

And will I change this in the code or in the template since I have 5 thumbs in a row, will this background repeat it self 5 times or will I just have 1 background?

THNX

[GeoS]

Try and you will see. There was only proof of concept from my side.

[libeco]

OK, I tried it in Maxthon 2.0.4.5799 and Firefox 2.0.0.7 and in both the :hover worked, so I guess I was wrong. However, I can't use it for this purpose since the <IMAGE_THUMBNAIL_ROW> is seen as one block, so I can't change the background on hover per thumbnail, only on the complete block. Perhaps something for the next version?

THNX for your help but I guess what I'm trying won't work with pixelpost 1.6.

*edit*
Added a reply to the PP 1.7 requests here: http://www.pixelpost.org/forum/showthread.php?p=50518#post50518

[libeco]

I just thought I had a brilliant idea by using this:

div#wrapper div#layout_container div#main div#footer {
width: 800px;
height: 140px;
background: url(images/footer.jpg) no-repeat;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row {
width: 750px;
height: 140px;
float: left;
margin: 0 25px; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a {
width: 150px;
height: 140px;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a:hover {
width: 150px;
height: 140px;
text-decoration: none;
background: url(images/footer_nav_bg_hover.jpg) no-repeat;
display: block;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a img.thumbnails {
width: 120px;
height: 110px;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 14px; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a img.current-thumbnail {
width: 120px;
height: 110px;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 14px; padding: 0; border: 0;
}

But it seems like all five images are not displayed next to eachother, but below eachother. Any thoughts?

THNX!

[libeco]

It turned out to be a brilliant idea afterall! Just had to add float: left and it works! Man I'm so happy!

Full code:
div#wrapper div#layout_container div#main div#footer {
width: 800px;
height: 140px;
background: url(images/footer.jpg) no-repeat;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row {
width: 750px;
height: 140px;
float: left;
margin: 0 25px; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a {
width: 150px;
height: 140px;
float: left;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a:hover {
width: 150px;
height: 140px;
float: left;
text-decoration: none;
background: url(images/footer_nav_bg_hover.jpg) no-repeat;
display: block;
margin: 0; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a img.thumbnails {
width: 120px;
height: 110px;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 14px; padding: 0; border: 0;
}
div#wrapper div#layout_container div#main div#footer div#thmb_row a img.current-thumbnail {
width: 120px;
height: 110px;
text-decoration: none;
background: url(images/footer_nav_bg.jpg) no-repeat;
display: block;
margin: 14px; padding: 0; border: 0;
}

[GeoS]

So I sugest to update another thread where you said it is impossible and that it was a reason why you cant use Pixelpost :P
As you can see - all is possible. CSS is really powerful tool. If some element is not "classed" or doesnt have ID it doesnt mean it is inaccessible for CSS definitions :P

PS Any link to see is live?

[libeco]

Sorry, I will update that thread! CSS is absolutely fantastic, I recently started learning using it the right way at school and love it!

The new template is not online yet, but you can find my site at http://www.libeco.nl

THNX for your help again!

[libeco]

I just decided to let the new design go live, check it out at http://www.libeco.nl

Please tell me what you think of it. thnx!

[Dkozikowski]

One word comes to mind, Fresh :)