Vertical image changes module height

Free responsive Joomla 2.5 and 3.x module to present your content with easy and intuitive way.
Rate this topic: Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.Evaluations: 0, 0.00 on the average.
GK User
Sat Jul 07, 2012 11:25 am
Hi,
I am using News Show pro GK4 on the World News template but when I use vertical images it chages the hight of the module. How can I make the GK4 "eat" the link and text from the bottum and leave a beautiful and full image in the top?

http://fritidsmagasinet.dk/
User avatar
Expert Boarder

GK User
Sun Jul 08, 2012 6:45 am
Hi,
How do I make text float around a horizontal image. A vertical looks fine, but in the few instances where the first image is a horizontal it would be great to have the text to the right and under the images. To fill the space.

Image

Image
User avatar
Expert Boarder

GK User
Sun Jul 08, 2012 8:04 am
In your vertical modules add " vertical" empty space in front and without quotes in module settings module class. Then add below css to your override.css. Make sure CSS override is enabled.
Code: Select all
.vertical .nspArt p.nspText { float:right!important; width:55%;}


See you around...
User avatar
Platinum Boarder

GK User
Sun Jul 08, 2012 8:14 am
Hi,
The module is News Pro GK4 - put in the place where Main NSP was.
I am struggling with how to handle the two image types in all the modules on the frontpage. I guess it is not possible to crop each article image individually for the thumbnails. One vertical image might have the important part of the meaning in top of the image another in the middle or elsewhere. This means that a crop function should be individually set for each articles first image. Or it should be resized as in this one, but that gives some problems with the text.

What would you suggest as the best way to make the site look great?

I do not have modules with only vertical images or hirizontally. It depends on which type of images that comes together with the article. So it varies from each article.
User avatar
Expert Boarder

GK User
Sun Jul 08, 2012 8:25 am
I have edited my previous reply as I have joined 2 of your topics together as they are related. Did you try what i suggested below? Let me know.

See you around...
User avatar
Platinum Boarder

GK User
Sun Jul 08, 2012 8:42 am
Dear Norman,
No, I did not try it as I am not sure exactly where and how to add what your're writing.

You are aware that some of the articles have horzontally placed images. Tomorrow there might be a vertical image in the article in the same module?

I am wondering a great deal whether it is best to let text float or to crop. But both must be done according to the current articles image type.

Best
Louis



normanUK wrote:I have edited my previous reply as I have joined 2 of your topics together as they are related. Did you try what i suggested below? Let me know.

See you around...
User avatar
Expert Boarder

GK User
Sun Jul 08, 2012 8:49 am
I am afraid to say you can do that in module level such as 1 module showing vertical and one module showing horizontal but you cannot have bot and expect a better result.

As suggested to you before you have to make your mind up on your chosen image size and use a default setting for all your modules. This will be an easier option for you.

There is no easy way to distinguish between different image articles per article.

See you around...
User avatar
Platinum Boarder

GK User
Sun Jul 08, 2012 9:20 am
Hi,
The problem is that I do not know whether the press release I get are with a vertical or a horzontal image.
But it is possible to make text float when having a vertical image?

If so - can you tell me what to do? Step by step.

It is simply out of my hands to determin what type the next image is.

If I crop it I should be able to do that in thumbnail view individually also.
User avatar
Expert Boarder

GK User
Mon Jul 09, 2012 9:45 am
Hi,

With the vertical image everything is ok.
Then I tried to create a crop of a vertical image and inserted that. But it doesn't look good.
So I unpublished it - it is still in the article list.
What is wrong here.
Image
http://tinypic.com/r/2wf45t2/6

Image

http://tinypic.com/r/2nsou3n/6
User avatar
Expert Boarder

GK User
Tue Jul 10, 2012 1:55 am
Regarding why image is still there might be because of cache in joomla or module cache. So clear your cache first.

Regarding empty space at top we have already changed that ?

Regarding empty space in bottom of the module you can use following css override to force modules in TOP positions to use height fixed height value.

Code: Select all
#gkTop1 .box {height: 298px;}


See you around...
User avatar
Platinum Boarder

GK User
Tue Jul 10, 2012 7:05 am
Great!
Before
Image

http://tinypic.com/r/j5zf2o/6

After
Image

http://tinypic.com/r/33ku0yo/6

1. Where could I change the position in top - the Danish character problem å
2. Was it possible to let text float when image is not taking the space in the module - that is - when the image is a vertical image. I did not quite understand your answer on this one.

After this success I am eager to make a few changes on the site, so I will post my questions on this later.
I hope this will go as smooth as this one. Thanks.
User avatar
Expert Boarder

GK User
Tue Jul 10, 2012 12:57 pm
Hi Norman,

It is the same in Hus & have module in the middle - just tell me where to fix it. I will then try to do it in the top module and here. I do not know if it is a problem in Go' fritid to the left as well.

Image

http://tinypic.com/r/2r1zccm/6

This tinypic.com is absolutely great!
User avatar
Expert Boarder

GK User
Tue Jul 10, 2012 1:16 pm
I am not 100% sure what you want to do with titles. Move it up or down? Let me know, see you around...
User avatar
Platinum Boarder

GK User
Tue Jul 10, 2012 8:04 pm
Hi Norman,

I would like to move the title a little down due to the fact that the Danish special character å is a little too large the 0 over the a = å is not shown. Only half of it.

Best
Louis
User avatar
Expert Boarder

GK User
Tue Jul 10, 2012 9:52 pm
Add following css code into your override.css.

Code: Select all
.nspArts, .nspLinksWrap { padding-top: 2px;}


See you around...
User avatar
Platinum Boarder

GK User
Thu Jul 12, 2012 8:06 am
Hi,
That fixed it (3px)
Thank you.
Best
Louis
User avatar
Expert Boarder

GK User
Thu Jul 19, 2012 8:21 am
No problem at all, see you around...
User avatar
Platinum Boarder


cron