Verslag JUG 's-Hertogenbosch 4 juni 2019

Vier Joomla gebruikers luisteren aandachtig naar de presentatie over Akeeba Backup.

Gepubliceerd: 4 juni 2019. | Door: Hans Kuijpers . | Categorie: 's-Hertogenbosch.

Dinsdagavond 4 juni. Na een gezellig hapje eten aan de slag met de Joomla Gebruikersgroep 's-Hertogenbosch. Het woord aan Hans Kuijpers met een presentatie over Template Overrides, Alternate Layouts en JLayouts.

Template Overrides, Alternate Layouts en JLayouts

Vrijdag 17 mei, tijdens de JoomlaDagen 2019, verzorgde Hans Kuijpers een workshop over template overrides, alternate layouts en jlayouts. Deze workshop van 2x 75 minuten met vele hands-on opdrachten wordt tijdens deze JUG073 herhaald zonder de hands-on opdrachten.

JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts from Hans Kuijpers

Opmerking van een van de deelnemers van de workshop was dat de getoonde code helaas niet eenvoudig te kopieren en plakken is. De code wordt in de PDF output namelijk afgebroken. Hierdoor ontstaan fouten. Hans zal de slides uitbreiden met linkjes naar gist.github.com, alwaar voor elke oefening de code verwerkt gaat worden.

Dr. Joomla

Vraag: bij een aantal klanten verschijnt op de geïmplementeerde Google Maps een foutmelding. Waarom is dat en waarom zie je dat niet bij alle klanten terug.

Antwoord: Sinds augustus 2018 is het verdienmodel van Google Maps gewijzigd en moet je je creditcard gegevens bij Google achterlaten om gebruik te kunnen blijven maken van deze dienst. Deze melding verschijnt niet als je een Google Maps embed via een iframe. Nadeel daarbij is dat je geen zeggenschap hebt over de styling. Hetgeen je wel hebt als je zelf aan de slag gaat. Zie je de foutmelding, klik dan de Javascript Foutconsole open en zie aldaar een klikbare foutmelding staan. Bijvoorbeeld:

You have exceeded your request quota for this API. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors
_.Uc @ js?sensor=true:52

De link is aanklikbaar en je komt dan op de Google Maps help pagina uit waar uitgelegd staat wat er gewijzigd is.

Vraag: Hoe krijg ik Google Maps met meerdere markers op mijn website verwerkt zonder 3th party extensie

Antwoord: met Alternate Module Layout en een Custom JLayout. Want feitelijk heb je niets meer dan een weergave van een aantal com_content items uit een bepaalde categorie die middels een alternate layout van mod_articles_category op de pagina getoond worden.

Hieronder in een paar stappen de implementatie van Google Maps in een alternate layout van de module mod_articles_category en een jlayout voor een Joomla website. De website waar dit voorbeeld uit komt is multilinguaal, dus de variabele $catId kijkt eerst naar de taal.

Veel informatie kan gehaald worden uit de Google Maps documentatie van Google zelf. Styling van de Google Map via de website https://mapstyle.withgoogle.com/

<?php
/**
* templates/.../html/com_content/article/default.php
*/
use Joomla\CMS\Factory;
use Joomla\CMS\Helper\ModuleHelper;

$catId        = ($this->document->language === 'en-GB') ? array(14) : array(11);
$moduleparams = array(
	"catid"      => $catId,
	"header_tag" => "h2",
	"style"      => "tpl",
	"layout"     => "map"
);

// Load module and add params
$module         = ModuleHelper::getModule('mod_articles_category');
$module->params = json_encode($moduleparams);

// Render module
echo Factory::getDocument()->loadRenderer('module')->render($module);
>

<?php
/**
 * templates/.../html/mod_articles_category/map.php
 * lat and long comes from custom field containing this information in an array
 */

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;

defined('_JEXEC') or die;

$template = Factory::getApplication()->getTemplate();

Htmlhelper::addIncludePath(JPATH_COMPONENT . '/helpers');

if (!empty($list)) :
	$data = array();

	foreach ($list as $item)
	{
		$itemFields = FieldsHelper::getFields('com_content.article', $item, true);
		foreach ($itemFields as $itemField)
		{
			$itemFields[$itemField->name] = $itemField;
		}

		$lat            = null;
		$long           = null;
		$locationDealer = $itemFields['locationdealer'];
		if (!empty($locationDealer->rawvalue))
		{
			$locationArray = explode(',', $locationDealer->rawvalue);
			$lat           = $locationArray[0];
			$long          = $locationArray[1];
		}

		$data[] = array(
			'id'        => $item->id,
			'title'     => $item->title,
			'link'      => Route::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language)),
			'longitude' => $long,
			'latitude'  => $lat
		);
	}

	echo LayoutHelper::render('template.map', json_encode($data));
endif;

<?php
/**
 * templates/.../html/layouts/template/map.php
 * MapStyle created via https://mapstyle.withgoogle.com/
 * 
 */

use Joomla\CMS\Uri\Uri;

defined('_JEXEC') or die;

$apikey    = 'create-your-own-please';
$latitude  = '52.120750';
$longitude = '5.276660';
$zoom      = 7;
$marker    = Uri::root() . '/images/map-marker.png';
$markerAlt = Uri::root() . '/images/map-marker--alt.png';
$title     = 'title';


?>
<div class="gmap__wrapper">
	<div id="map-canvas" class="gmap__canvas"></div>
</div>
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=<?php echo $apikey; ?>"></script>
<script type="text/javascript">
    var map;

    // The JSON data
    var json = <?php echo $displayData; ?>;


    function initialize() {
        // Giving the map som options
        var mapOptions = {
            zoom: <?php echo $zoom; ?>,
            center: new google.maps.LatLng(<?php echo $latitude;?>,<?php echo $longitude; ?>),
            mapTypeControl: false,
            streetViewControl: false,

            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
                {
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#212121"
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#757575"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#212121"
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#757575"
                        },
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "administrative.country",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#9e9e9e"
                        }
                    ]
                },
                {
                    "featureType": "administrative.land_parcel",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "administrative.locality",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#bdbdbd"
                        }
                    ]
                },
                {
                    "featureType": "administrative.neighborhood",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#757575"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#181818"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#616161"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#1b1b1b"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#2c2c2c"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#8a8a8a"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#373737"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#3c3c3c"
                        }
                    ]
                },
                {
                    "featureType": "road.highway.controlled_access",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#4e4e4e"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#616161"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#757575"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#000000"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#3d3d3d"
                        }
                    ]
                }
            ]
        };

        // Creating the map
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Marker icon
        var icon1 = "<?php echo $marker; ?>";
        var icon2 = "<?php echo $markerAlt; ?>";

        // Looping through all the entries from the JSON data
        for (var i = 0; i < json.length; i++) {

            // Current object
            var obj = json[i];

            // Adding a new marker for the object
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(obj.latitude, obj.longitude),
                map: map,
                icon: icon1,
                title: obj.title // this works, giving the marker a title with the correct title
            });

            // Change icon on mouseover
            var mouse = changeIcon(marker);

            // Adding a new info window for the object
            var clicker = addClicker(marker, obj.link);


        } // end loop

        // Change icon on mouseover
        function changeIcon(marker) {
            google.maps.event.addListener(marker, 'mouseover', function () {
                marker.setIcon(icon2);

            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                marker.setIcon(icon1);
            });
        }

        // Adding a new click event listener for the object
        function addClicker(marker, link) {
            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = link;
            });
        }

    }

    // Initialize the map
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Vraag: Op de Android toestellen is de header van de browser van de website https://platform-pie.nl/ (van collega developer Ruud van Zuidam) dezelfde kleur als de header van de website zeld. Hoe kan dat?

Antwoord: de kleur wordt veroorzaakt door de meta-tag theme-color. Voeg bovenaan je template index.php onderstaande code toe om de header van Chrome op een Android toestel de kleur #1974bf te geven. Een kleine moeite, groot plezier.

<?php
use Joomla\CMS\Factory;

Factory::getDocument()->setMetaData('theme-color', '#1974bf');

Vraag: Hoe vind je een alternatief gratis toe te passen font, indien het oorspronkelijke betaalde font (Calibri) niet toegepast kan worden?

Antwoord: de website //www.identifont.com/show?LNR laat de betreffende font zien plus fonts die er op lijken. Droid Sans is een mooi alternatief die vanuit Google Fonts opgehaald kan worden.
Een andere mogelijkheid is om de licentie aan te schaffen.

Vraag: wat moet ik doen om de pagina van mijn website mooi printbaar te maken?

Antwoord: hiervoor moet je een print.css toevoegen die alleen maar kijkt naar @media print. Zie bijvoorbeeld een collectie item van de klokkenwebsite frankvannuus.nl. Print de pagina en zie dat de weergave handig is voor de mensen die op pad gaan om met een bepaalde klok in gedachte naar de winkel te gaan. Tijdens het printen wordt gekeken naar https://frankvannuus.nl/templates/frankvannuus/css/print.css (beter leesbaar) en je ziet dat er voornamelijk items een display:none; krijgen.

Handige links

https://inclusive-components.design/cards/ - leuk leesvoer hoe je met mooie code accessible onderdelen van je site kunt maken.

De volgende keer

Maandag 1 juli is de volgende bijeenkomst van Joomla Gebruikersgroep 's-Hertogenbosch. Het onderwerp is nog niet bekend

Robert 3 jaren 11 maanden

Bedankt voor het delen van de informatie Hans.
Gisteravond ging het ook even over favicons en of je alle verschillende formaten nodig hebt of niet (wat het nut is). Ik kwam vanochtend langs deze site: https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/
De verschillende formaten zijn (eigenlijk logisch) voor de verschillende beeldschermform aten en besturingssyste men.

Ton de Visser 3 jaren 11 maanden

Bedankt Hans,

Was weer een leerzame en gezellige avond.

Robert 3 jaren 11 maanden

Ik heb het lettertype Droid Sans aan de klant voorgelegd als vervanging van Calibri. De reactie: "Is perfect"
Bedankt iedereen voor het meezoeken.