How do I center images in the 1.6 random image module?

[cachedog]

I'd also love to be able to center the title, too. Thanks to anyone who can help!

[anarushka]

Please provide more details, such as your site link and how your rotator is nested within your page.

[cachedog]

The standard Joomla rotator was placed in the template in one of the module positions. It does the same thing no matter where I place it in the site. The template adjusts the width of the module position depending on the user's screen, so if it's "squeezed" on a smaller screen it looks OK. It's on wider or higher resolution screend where it looks bad.

The site is not yet public, but I've attached an image that shows how it presents in the lower right side of the site.

[anarushka]

You can align the image by using align="center" within your img tag. And for the title you can either use margin-left: auto, margin-right: auto or if it is in a <p> then text-align: center. Sorry can't give you more details as I do not have immediate access to the default joomla rotator. Hope it helps.

[cachedog]

Thanks for the info, anarushka, but I'm not understanding where I'd insert those attributes. I can't find any .css or .php files that contol the module, but I hope that's just my lack of experience in figuring out what files control what in Joomla.

[anarushka]

Don't worry, it happens to all when we first start with joomla. When you created your template, you added a css file. You can add all the styling you need using this file. If you need to find out which div, table, p or whatever your rotator is located in, I suggest using Google Chrome. You can just right click on your rotator and select Inspect Element. It will pull up the html and you will see exactly what you need to call in your css. Most of the time each Joomla component, module, plugin has its own classes and ids it calls so it's very easy to style.

[cachedog]

Wow, Chrome is an amazing resource - many thanks! It identified this code for the text:

<h3 class="jsn-moduletitle"><span class="jsn-moduleicon">My Partner</span></h3>

And these lines as controlling how the photo is displayed and it's source file.

<div class="jsn-modulecontent"><div class="random-imagebox-grey">
<div class="random-imagebox-grey">
<img src="/images/dog_rotation/K1.jpg" alt="K1.jpg" width="100" height="172"></div>

I now have some specific lines to look at in template.css and some reading to do on how to add code to get the centering I need for the text and any photo within the module.

Thanks again for the info!

[joshlobley]

In the current version of Joomla I was found the solution to my random image alignment issue.

I had a vertical menu in the left position/block with the joomla stock random image module underneath it. Problem was it was aligned to the left and I wanted it to be center of the block.

To fix the problem I opened default.php in the mod_random_image folder(in the modules folder) and put a div align around the code - see below.

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_random_image
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?><div class="random-image<?php echo $moduleclass_sfx ?>">
<?php if ($link) : ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
	<?php echo JHtml::_('image', $image->folder.'/'.$image->name, $image->name, array('width' => $image->width, 'height' => $image->height)); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</div>

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_random_image
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?><div align="center"><div class="random-image<?php echo $moduleclass_sfx ?>">
<?php if ($link) : ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
	<?php echo JHtml::_('image', $image->folder.'/'.$image->name, $image->name, array('width' => $image->width, 'height' => $image->height)); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</div>
</div>

[tokenring]

In the current version of Joomla I was found the solution to my random image alignment issue.

I had a vertical menu in the left position/block with the joomla stock random image module underneath it. Problem was it was aligned to the left and I wanted it to be center of the block.

To fix the problem I opened default.php in the mod_random_image folder(in the modules folder) and put a div align around the code - see below.

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_random_image
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?><div class="random-image<?php echo $moduleclass_sfx ?>">
<?php if ($link) : ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
	<?php echo JHtml::_('image', $image->folder.'/'.$image->name, $image->name, array('width' => $image->width, 'height' => $image->height)); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</div>

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_random_image
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?><div align="center"><div class="random-image<?php echo $moduleclass_sfx ?>">
<?php if ($link) : ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
	<?php echo JHtml::_('image', $image->folder.'/'.$image->name, $image->name, array('width' => $image->width, 'height' => $image->height)); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</div>
</div>

This is a great way! Thanks as I have been looking for a bit too! ;-)

[muddauber]

I know this is an old thread, but I haven't seen a solution to the misaligned Random Image
that solves the problem of centering images in an article.

I am using 2.5.14 and Random Image module. When I use the stated solution, it
does indeed center the random image. But, it also forced the module on my
sidebar-a (rt_radiance) template off the sidebar and down the page.

Anyway see a solution to the centering issue with Random Image module?