HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Gallery thumbnail image distortion

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#63655 (In Topic #13766)
Avatar

Community saint

In the 5.xx version, the galleries thumbnail page displays differently than previous versions. Now it is much more 'put together' than before. However as good as it is now I am finding that all images that are not square or almost square are displayed with image distortion due to differences in the height to witdh ratios. While I appreciate the uniform-like display I am a bit disturbed that some images are really distorted.

I am thinking that I would like to display the images with their true Height to width ratios. I tried a few things but I got a messed up display and I am going to keep trying. If someone has had success at doing this or has a suggestion to how to achieve it I would be interested to know your method. Thanks.

Take a look at an example


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63656
Avatar

I think you've actually put this in. The default CSS is:

Code

.gallery_regular_thumb a img {
   width: 150px;
   display: block;
}
But you have a height in there too, which would force it.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#63665
Avatar

Community saint

Chris Graham said

But you have a height in there too, which would force it.
When I take the height out it shows up like this.

I think I need to put a box somewhere in the CSS code that has height and width dimension and allow the image (with correct height to width ratios) to float within the box and that will probable make the comment counter show up at the bottom also.

Not sure which div to add it to.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63667
Avatar

You're right. Put such a div just around the img tag.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#63694
Avatar

Community saint

I think I am lost here.
I should be able to do it in the CSS code only?
Is this what I would be editing?

Code

.gallery_regular_thumb a img { height:138px; width:138px; display: block; margin-left: auto; margin-right: auto }
In one of my experiments I took out the height dimension. and tried playing with "gallery_media_expose" like this

Code

.gallery_media_expose { overflow: hidden; outline: 0; float: {!en_left}; margin: 4px 4px 10px 0; background-color: #ff0000; background-position:top left; height:145px; width:140px; }
It kept the thumbnails from being jumbled but it did not move the comment text to the bottom. Could expand your comment and direction

Chris Graham said

You're right. Put such a div just around the img tag.
Thanks.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63702
Avatar

You probably need to add a new div into the template involved.

Some people preach that CSS can change layout without changing markup, but they're wrong. In the real world things like tag order and how many tags you have heavily determine what CSS can do.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#63730
Avatar

Community saint

You think that template is the "GALLERY_IMAGE.tpl"?
It has the "gallery_regular_thumb" reference in it.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63731
Avatar

sounds right


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#63732
Avatar

Community saint

friendly said

You think that template is the "GALLERY_IMAGE.tpl"?
It has the "gallery_regular_thumb" reference in it.

Just took a look. It appears you cracked it. Congrats!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#63733
Avatar

Community saint

Found it, perhaps cracked it, lets see if anything viable hatches! I feel I am still tripping over myself in the dark here.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63745
Avatar

Community saint

After trying some things on the template without any success I have come back to the CSS code to try again to accomplish my goal of having the images line up in an orderly fashion and at the same time not be stretched and distorted but retaining the images true height to width ratio.

I have been able to create a box around the image which you can see here. If you look you will see the blue border around each thumbnail image. I am happy with all this except for two things:
  1. The comment text rides under the bottom of each image which can look a bit ragged since the height of the images varies so much. I would like to show the comment text in a uniform plane at the bottom of the blue box - either inside or outside the box.
  2. The height of some of the pictures blocks out the comment text.
As a side note I have been able to control the width of some of my odd width images which are very narrow and dont fit the width of the thumbnail space by using "width:auto". This has proved preferable instead of specifying a pixel dimension which would stretch and distort the thumbnails image.

So, my question is; What is the best way to address the comment text problem?

…and is there a way to control the height of those 'runaway' thumbnails which because of their extra tall proportion don't allow the comment text to show. Trying to solve this previously I make the blue box height bigger to see if the comment text shows up and it does but the box height gets to be up to 300px to accommodate some of the tall images.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63771
Avatar

Community saint

friendly said

  1. The comment text rides under the bottom of each image which can look a bit ragged since the height of the images varies so much. I would like to show the comment text in a uniform plane at the bottom of the blue box - either inside or outside the box.
  2. The height of some of the pictures blocks out the comment text.
I have solved the item #2 but still need to force the comments text to the bottom.

Any ideas here? If I add a height to the CSS it will do it but at the expense of the image quality since it stretches that also. Is there a way the exclude the image from the height attribute?


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#63773
Avatar

Community saint

friendly said

Any ideas here? If I add a height to the CSS it will do it but at the expense of the image quality since it stretches that also. Is there a way the exclude the image from the height attribute?
Just a thought:
Right now your comment <div class="gmeta"> is outsite the div class="gallery_regular_thumb"

Maybe if you could create a div for the comments with a max height in the css and insert the gallery thumb div in it.

Jean
Back to the top
 
Posted
Rating:
#63777
Avatar

Community saint

Interesting thought, Jean.

Friendly should give it a try.

I played around in Firebug too, and came up with a 'quick&dirty'. See attachment …



Once again, shooting in the dark!


Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: