My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 25: SAMPLE Customized look to center images inside submodal and rounded boxes.
1 person starred this issue and may be notified of changes. Back to list
Status:  WontFix
Owner:  ----
Closed:  Aug 2008


 
Reported by edmundo...@gmail.com, Feb 24, 2008
This is modification of how images a placed inside the submodal or their
own rounded box in the list to stay centered. It was made inside /app and
/public and the admin interface was not touched.

The size of small pictures was changed, to fit the rounded boxes of list
view, and if smaller they are centered (so, they don't appear cropped any
more). The submodal layout that shows the images was changed too to center
them.

The CSS is based on http://brunildo.org/test/img_center.html

Tested on Firefox 2.0.0.11 (Linux), IE 6.0 (Inside Wine) and Opera 9.25 (Linux)

Regards
center_images.tar.gz
9.2 KB   Download
Feb 24, 2008
#2 edmundo...@gmail.com
Sorry, forgot to erase .svn directories.

Here it goes again.
center_images_fixed.tar.gz
4.4 KB   Download
Mar 13, 2008
#3 johnd...@gmail.com
Make sure that all previous patches have being incorporated, if you have already
incorporated newer patches (as I did), ie the 'For Sale' and 'New' icons patch, you
may overwrite by accident.
Mar 13, 2008
#4 edmundo...@gmail.com
Hmm yes. This sample I made in /app as its a modification of the view that I don't
have sure if anyone will want it, it could be done in substruct directly if people
want, the patches I have done /vendor/plugins/substruct/app.

Using this it breaks again the icons.

I fixed other things in /vendor/... that are not here, maybe I upload it again updated.
Apr 9, 2008
Project Member #6 subim...@gmail.com
Edmundo can I get an updated one to check it out?

I haven't seen it yet, but with the "centering inside submodal" i'd ultimately like to add code to submodal that 
resizes based on the picture within. Sort of like lightbox does...
Apr 10, 2008
#7 edmundo...@gmail.com
Its supposed to make better two things, centering images inside submodal windows (if
you can make it autosize and center in the screen I think its a better approach, and
you can preserve only part of the changes in these patch to be able to apply styles
inside the submodal).
And centering images inside its own area, this can be applied anywhere an image is
being shown, images must have its size compatible with the area it will be placed (if
bigger its cropped) or if smaller its centered in turn of laying in the corner.

Some browsers (mozilla) make it very easy to do it, but this patch includes CSS hacks
to work with IE (always IE :P)

I will update it.
In the mean time, you can check this out, the CSS code is not mine anyway, it was got
from here.

http://brunildo.org/test/img_center.html

(The index with other samples)
http://brunildo.org/test/
Apr 10, 2008
#8 edmundo...@gmail.com
Screenshots


list_before.jpg
46.9 KB   View   Download
list_after.jpg
37.4 KB   View   Download
item1_before.jpg
69.6 KB   View   Download
item1_after.jpg
58.8 KB   View   Download
item2_before.jpg
69.4 KB   View   Download
item2_after.jpg
61.4 KB   View   Download
item3_before_highlighted.jpg
70.6 KB   View   Download
item3_after.jpg
62.1 KB   View   Download
modal_before.jpg
49.8 KB   View   Download
modal_after_original_small.jpg
38.5 KB   View   Download
modal_after_original_big.jpg
42.6 KB   View   Download
Apr 10, 2008
#9 edmundo...@gmail.com
Here comes the patch

I added some more alignements that wasn't in the previous sample.

WARNING: It changes the default sizes of the pictures, so probably in a deployed
system it will reference non existant images and will continue to present a strange
look of the images until these images are erased and re-added. In a new system its fine.

I am accepting suggestions about how to deal with that.
center_images_v3.patch
8.1 KB   View   Download
Apr 13, 2008
#10 edmundo...@gmail.com
Follows a migration to correct all the images. It erases and reupload all the images
in their original order.

001_update_images.rb
2.6 KB   View   Download
Apr 27, 2008
#11 apple...@gmail.com
The center_images_v3.patch removes the link attribute of the image when listing the
product.  This patch will add that link back or you can just manually do it yourself
by looking at the diff file.
 
add_link_to_image.patch
500 bytes   View   Download
Apr 27, 2008
#12 edmundo...@gmail.com
Ah, ok. I forgot to put the link back. But put it around the "wraptocenter" div or
with narrow images it will not get the whole space.
center_images_v4.patch
8.2 KB   View   Download
Aug 15, 2008
Project Member #13 subim...@gmail.com
(No comment was entered for this change.)
Status: Accepted
Labels: -Priority-Medium Priority-Low
Aug 23, 2008
Project Member #14 subim...@gmail.com
I'm closing this out as I think it should be a SubModal-only enhancement.

If you want to file a patch / issue for that, visit http://submodal.googlecode.com
Status: WontFix
Aug 24, 2008
#15 edmundo...@gmail.com
This is not just that, but the rest is a layout fix about the cropped images, have
you looked the screenshots above? 
Aug 24, 2008
#16 edmundo...@gmail.com
Another thing, if you want that, I don't suggest to aplly it as is I have done
something similar in my layout and theres one more problem that IE has when applying
links to whole divs (the image don't stay clickable), is something about that
hasLayout property crap that only IE has. It can be addressed using CSS, so take a
look at the screenshots and if you wnat it, it needs to be redone.

Regards. 

Powered by Google Project Hosting