Gallery of logos with links

Everything to do with Joomla! 3.x templates and templating.
Post Reply
twtonicr
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Nov 30, 2020 2:41 pm

Gallery of logos with links

Post by twtonicr » Mon Nov 30, 2020 2:55 pm

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. :D

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2903
Joined: Sun May 04, 2008 12:37 pm

Re: Gallery of logos with links

Post by waarnemer » Mon Nov 30, 2020 3:58 pm

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.

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 381
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Gallery of logos with links

Post by Jaydot » Mon Nov 30, 2020 4:39 pm

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.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

twtonicr
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Nov 30, 2020 2:41 pm

Re: Gallery of logos with links

Post by twtonicr » Mon Nov 30, 2020 6:51 pm

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

annahersh
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: Gallery of logos with links

Post by annahersh » Tue Dec 01, 2020 4:51 am

twtonicr wrote:
Mon Nov 30, 2020 2:55 pm
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
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 3.x”