Gallery of logos with links

[twtonicr]

Hi, First post. I'm new to Joomla.

I'm looking for something, a template or extension, to make an easy-to-manage table / grid / gallery of links which is responsive. So each square contains a company logo with some short text beneath, and a decent amount of white space around the logo so it's easy on the eye.

On a large device, the page would start out being 5 columns wide by unlimited rows deep. If the page is resized, or viewed on a phone, the page would re-organise itself for a better fit.

Each square can shift around other sqaures to make the fit work (but the square's content should remain the same).
Unlike tables, it doesn't matter if rows break.
Unlike photo galleries, it's more about the text than about the image.
Product systems come with too much other stuff we don't need.

Looking for this to be a CMS solution that non-technical content writers can update easily with new entries.
I'm finding searching for this very hard, as the terms seem too generic.

Any advice greatly appreciated. Though not "learn to code CSS" please, the project is definitely to find a CMS type plugin.

[waarnemer]

This could be done by creating yourself an override to existing module or component.

What i did on https://cadet.nl/nl when you scroll down is a module I created to have tiles with the intro image and the title.
Each set of tiles is linked to a category (or more categories)..
This was a created module as I have some configuration on this that is custom.. but similar can be done by just an override for an existing article module. Like Articles_latest.

Your authors can then add content just like any article.

[Jaydot]

Core Joomla's "category blog" menu-item, using Joomla's default template Protostar, can create a responsive grid of articles or images (with or without additional text).
I made this page https://buurtbushtov.nl/sponsors that way. Each logo is simply an image in an article (so it did require knowing how to create the images with an image editor). There was no CSS involved.

[twtonicr]

Very helpful, thank you guys. Also, I've found searching on "sponsor" to be very useful! So thank you also for that hint.

[annahersh]

I'm looking for something, a template or extension, to make an easy-to-manage table / grid / gallery of links which is responsive. So each square contains a company logo with some short text beneath, and a decent amount of white space around the logo so it's easy on the eye.

You can use the core Joomla banner component along with the mod_banners module, just with a custom display template which can be selected in the module's Layout field.

Just create a category in the banner component, add banner entries, publish the module

Result

images-grid.jpg

Mobile view

mobile-form.jpg

The custom display file

Code: Select all

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

defined('_JEXEC') or die;

JLoader::register('BannerHelper', JPATH_ROOT . '/components/com_banners/helpers/banner.php');

$pretext = ( $headerText ? '<div class="bannerheader">'.$headerText.'</div>':'');
$posttext = ( $footerText ? '<div class="bannerfooter">'.$footerText.'</div>':'');
$bid = 'bannermodule-'.$module->id;

// CSS
JFactory::getDocument()->addStyleDeclaration('
#'.$bid.'.bannergroup {position: relative;}
#'.$bid.'.bannergroup .banneritem {box-sizing: border-box; float: left; width: 25%;}
#'.$bid.'.bannergroup .banneritem .banner-inner {margin: 8px;}
@media (min-width: 300px) and (max-width: 1024px) {
#'.$bid.'.bannergroup .banneritem {float: none; margin: 0; margin-bottom: 20px; width: auto;}
}

');
	
?>

<div id="<?php echo $bid; ?>" class="bannergroup<?php echo $moduleclass_sfx; ?>">

<?php 
echo $pretext;

// output banner loop
$i=0;
foreach($list as $item) 
{
	$link		= JRoute::_('index.php?option=com_banners&task=click&id='.$item->id);
	$imageurl	= $item->params->get('imageurl');
	$width		= (!is_null($item->params->get('width')) ? ' width="'.$item->params->get('width').'"':'');
	$height		= (!is_null($item->params->get('height')) ? ' height="'.$item->params->get('height').'"':'');
	$baseurl	= strpos($imageurl, 'http') === 0 ? '' : JUri::base();
	$alt		= ( !is_null($item->params->get('alt')) ? $item->params->get('alt') : $item->name );
	$alt		= ' alt="'.htmlspecialchars($alt, ENT_QUOTES, 'UTF-8').'"';
	$target		= $params->get('target', 1);
	$titleatt	= ' title="'.htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8').'"';
	
	// text
	$text='';
	if( !empty($item->description) ) 
	{
		$text = '
		<div class="bannertext">
			<div class="textbox">
				<h2 class="bannertitle">'.$item->name.'</h2>
				'.$item->description.'
			</div>
		</div>
		';
	}
	
	// banner
	if( $item->type == 1 ) {
		$bannerData = str_replace(['{CLICKURL}', '{NAME}'], [$link, $item->name], $item->custombannercode);
	}
	else
	{
		if( BannerHelper::isImage($imageurl) ) 
		{
			$image = '<img src="'.$baseurl.$imageurl.'"'.$alt.$width.$height.' />';
			if( $item->clickurl ) 
			{
				$linktarget='';
				if( $target == 1 ) {
					$linktarget = ' target="_blank" rel="noopener noreferrer"';
				}else 
				if( $target == 2 ) {
					$linktarget = ' onclick="window.open(this.href, \"\",\"toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550\");return false"';
				}
				
				$bannerData = '<a href="'.$link.'"'.$titleatt.$linktarget.'>'.$image.'</a>';
			}else{
				$bannerData = $image;
			}
		}
	}
	$i++;
	
	// HTML output
	?>
	
	<div class="banneritem">
		<div class="banner-inner">
		<?php echo $text.$bannerData; ?>
		</div>
		<div class="clr"></div>
	</div>
	
	<?php 
} // end loop

echo $posttext;
?>

</div>

Here's an installer for the file. Just use the Joomla installation as normal.

bannertpl.zip