Hello, I currently have a webpage running K2. I am building a mobile counterpart using the appphone template as my bas since it supports K2. However I'm trying to find out where i can change what dictates which image size K2 uses (S, M, L, XL, etc.) My full site and the mobile site currently use the same one, and it doesn't work too well. When its fine on the full site, its too big for mobile, if i reduced the parameters of the size. Its too small for my full site. I tried setting it to auto. but while it looks fine on my full site. The mobile version ends up being to small. So if i can change which size parameter one or the other uses i figure that should solve my problems. Can anyone help me out. Thanks in advance.

Try to control the size that loads in each case through the files with an if statement. For example, open the item.php of your override folder and locate the itemImage block. You can make an if statement and load specific size for the mobile ignoring in that case the parameter set in the category. The parameter will suffice for the full site, while the other case will suffice for the mobile site.

Thanks, could you give me an example of an if statement that might work, im not that great with coding. I do OK modifying though.

Yiota Ziaggou said:
Try to control the size that loads in each case through the files with an if statement. For example, open the item.php of your override folder and locate the itemImage block. You can make an if statement and load specific size for the mobile ignoring in that case the parameter set in the category. The parameter will suffice for the full site, while the other case will suffice for the mobile site.

I don't know how exactly you target the mobile version, but your if statement should look like this:

 

if ($mobile==true) {

 

<?php if($this->item->params->get('itemImage') && !empty($this->item->imageMedium)): ?>                    <!-- Item Image -->                    <div class="itemImageBlock">                         <span class="itemImage">                             <a class="modal" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('Click to preview image'); ?>">                                 <img src="<?php echo $this->item->imageMedium; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" />                             </a>                         </span>                        <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>                        <!-- Image caption -->                        <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>                        <?php endif; ?>                        <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>                        <!-- Image credits -->                        <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>                        <?php endif; ?>                        <div class="clr"></div>                    </div>          <?php endif; ?>

} else {

 

<?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>                    <!-- Item Image -->                    <div class="itemImageBlock"> <span class="itemImage"> <a class="modal" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('Click to preview image'); ?>"> <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" /> </a> </span>                        <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>                        <!-- Image caption -->                        <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>                        <?php endif; ?>                        <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>                        <!-- Image credits -->                        <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>                        <?php endif; ?>                        <div class="clr"></div>                    </div>                    <?php endif; ?>

}

 

You can change the imageMedium in any available K2 dimension you would like for the mobile (i.e., imageSmall, imageXSmall, etc.)

Thanks a lot. I tried adding this but it didnt work, on top of that the if ($mobile==true) { test showed up on the page. Not sure whats wrong here.

This is an example of what your if should look like. You have to check your template files and locate how you target the mobile version of your site and use that condition in your item.php file.

Yes I tired how my template targets mobile and tried to apply with no results. I'm still getting the same size. It beasr worth mentioning that i dont thing i need the if statement to target mobile. I have a different template assigned for the desktop version than the mobile version. when i change the sizes on my templates item.php file, i see no changes on the site.

Do you have different K2 overrides in the between the 2 templates?

the only thing i see called override is an override.css in each

If you open item.php and you replace the default image block with the following, you don't see anything changed in your site ?

 

<?php if($this->item->params->get('itemImage') && !empty($this->item->imageMedium)): ?>                    <!-- Item Image -->                    <div class="itemImageBlock">                         <span class="itemImage">                             <a class="modal" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('Click to preview image'); ?>">                                 <img src="<?php echo $this->item->imageMedium; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" />                             </a>                         </span>                        <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>                        <!-- Image caption -->                        <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>                        <?php endif; ?>                        <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>                        <!-- Image credits -->                        <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>                        <?php endif; ?>                        <div class="clr"></div>                    </div>          <?php endif; ?>