Article image position

Hello Gavick team,

I have serached the forum but couldn't find the solution for my problem.

The thing is that i wont to move the main article image to the left by default and make a smaller picture,and the world news template puts a big image above the text aligned center.

So is there an easy way to do this,am i missing something?

Thanks

Is this possible to manage somewhere in the k2 option,or i need to play with css?

I am sorry to say what you want is not clear from your explanation. Perhaps try to create a screenshot of how you want it to look so we can suggest whether it is possible or not with css.

See you around...

Ok,i wont to make the article layout look like in the atachment.Is it possible?

Add following css code in "templates/gk_twn2/css/override.css" file. Enable Css override feature from template settings > Advanced Features > Css Override "On".

Code: Select all

.itemImageBlock { float:left; margin-right:10px; }
.span.itemImage img { width:300px!important; }
.itemIntroText { margin-top:-10px; }


Above tested in "Article View" page. You don't have to change image size as it gets limited to 300px in article view, if you click on image it will display original size of the image.

See you around...

It looks like it works,i have to do a little more testing...But i see the same problem in CATEGORY view,can you help me with a css code too,i tried something of my one but it doesn't work.

You first css helped in one article i'm testing,so thanks for the help.

Please add following css overrides.

Code: Select all

/* K2 Category Leading Group */
.groupLeading span.catItemImage img { width:300px!important; }
.groupLeading .catItemImageBlock { float:left; margin-right: 10px; }
/* K2 Category Primary Group */
.groupPrimary span.catItemImage img { width:200px!important; }
.groupPrimary .catItemImageBlock { float:left; margin-right: 10px; }


For Primary group as it is sharing 2 articles in same column there might not be enough space for article text next to image so perhaps you can use below instead.

Code: Select all

/* K2 Category Primary Group */
.groupPrimary span.catItemImage img { width:300px!important; }
.groupPrimary .catItemImageBlock { float:none; margin-right: 10px; }


If you want to bring titles on top of image follow below changes.

Find File: \templates\gk_twn2\html\com_k2\templates\default\category_item.php
Find Lines: 33 to 68
Line 33:

Code: Select all

        <?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>


Line 68:

Code: Select all

      <!-- Plugins: AfterDisplayTitle -->


Replace from 33 to 68 with below code.

Code: Select all

     <div class="catItemHeader">
            <?php if($this->item->params->get('catItemTitle')): ?>
            <!-- Item title -->
            <h3 class="catItemTitle">
                  <?php if ($this->item->params->get('catItemTitleLinked')): ?>
                  <a href="<?php echo $this->item->link; ?>">
                  <?php echo $this->item->title; ?>
                  </a>
                  <?php else: ?>
                  <?php echo $this->item->title; ?>
                  <?php endif; ?>
                  <?php if($this->item->params->get('catItemFeaturedNotice') && $this->item->featured): ?>
                  <!-- Featured flag -->
                  <span>
                  <sup>
                  <?php echo JText::_('K2_FEATURED'); ?>
                  </sup>
                  </span>
                  <?php endif; ?>
            </h3>
            <?php endif; ?>
         <?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
            <!-- Item Image -->
            <div class="catItemImageBlock">
                  <span class="catItemImage">
                  <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
             <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
                </a>
                  </span>
                  <div class="clr"></div>
            </div>
            <?php endif; ?>         
      </div>
      <!-- Plugins: AfterDisplayTitle -->


See you around...

Men u rock.Thanx 100 times for this quick suport!

No problem at all...

See you around...

Dear Norman,

One more question.
How to make this look good.It+s a k2 module too,i dont know was this included in the tutorials before,becouse it's not aligned like it should be,i hope you get me.

Thank You

is this News Pro Show GK4 ? if it is send me an email at normanuk [at] live[dot]co[dot]uk , i ll send you modded module which you can upload config files for modules so saves you time configuring module itself. I knew it would be useful to users and count yourself lucky to be the first test subject

Just show me which module it is from our demo page from below link.

Code: Select all

http://demo.gavick.com/joomla16/jul2011/


See below link for more information on modded module.

Code: Select all

https://www.gavick.com/support/forums/13/13877.html


See you around...

It is the Other News module on your link just it look good at your side (News Show Pro GK4)

I send u the e-mail...hope it works,

Tnk U

I have sent the files to your email.

Usage is as follows. For example we are using News Show Pro.
1. Create a new News Show Pro GK4 Module in any position you like.
2. Give your module name and set its position.
3. Save & Close module settings.
4. If you haven't uploaded config files yet please do so . correct place is "/modules/mod_news_pro_gk4/config/"
5. Find your module from Module List and click to edit its settings.
6. On right you will see a dialog box with names of config files. Choose one and click on load.
7. DO NOT click on save&close or save or apply, simply close or cancel and come out of settings page.
8. Go to front end, refresh and check to see its working.

Note: On step 6 when you load a setting it already updates in database so don't click on save or apply otherwise you will overwrite on top of it.
When you save your own config it simply saves them in same folder in step 4.

What this mod doesn't do:
It doesn't change modules name.
It doesn't change modules position.
Basically it doesn't change anything on left side of module settings page. It only changes right hand side settings which is the important part.

See you around...

Thanks for your help,i managed to do all like i wonted,and it works like you written.If somebody need the config file that Norman sent me,to have the adjustment for gk pro news , i can upload it.

Greetings,

I am glad it is working , this simplifies module settings and saves time to both support members as well as users. However others cannot try it at the moment as no one else has the same version

By the way you can also create your own config files by saving your settings.

See you around...

art1.jpg

Norman,how can i fix this.I would like to remove a little space under the picture description.I think it is not something dificult but i still dont no css.Than You

Please use following css code.

Code: Select all

.userItemImageBlock, .itemImageBlock ( margin: 0 ; }


See you around...

Please use following css code.

Code: Select all

.userItemImageBlock, .itemImageBlock ( margin: 0 ; }


See you around...

But i need to keep the margin right,just remove the margin down the picture ??

I couldn't find a link to your website so i believe i tested the code in default template , if you have a margin right of course keep that and set the margin down to "0".

See you around...

Norman,i don't know if this is the right place for the question but i will ask you,as this are the last things that i should solve.

1.Is there a posibility to restrict the image that i upload in k2 to dimensions 400x300 px. The width is not the problem,but the heigt is not beeing limited in k2.

2.Is it possible to limit the number of shown news pages in the category view to 5.

Thank you,and i hope this can be solved here...

Greetings,

And Norman,
My template is not working in Internet Explorer,is there a fix for that? The domain is www.abc.ba

Hi, try to install the upgrade of the module. I think you'll solve it.

Hi, normanUK how can I increase the dimensions of the image in the article?

Inreasing the width here i made the leading image bigger.

Code: Select all

/* K2 Category Leading Group */
.groupLeading span.catItemImage img { width:500px!important; }
.groupLeading .catItemImageBlock { float:left; margin-right: 10px; }

I tried to increase this width

Code: Select all

.span.itemImage img { width:500px!important; }

but it doesn't change.

where can i find the right code?

I find the solution:

add this cone in override.css

Code: Select all

.itemImage img { width:400px!important; }

set width for the dimensions of the image in the article.

Alesandrojo do you know to limit the heigt of the uploaded picture in k2?

I have the same problem but code provided is not working in sporter template, although css overide is on...
May you please help ? I want same as initial question of this topics in sporter (smaller picture size in article with text left to the picture in articles).