�ݺ�ߣ

Presentatie ImageManager
en slim omgaan met
afbeeldingen

Welkom
Rick Spaan – R2H Marketing & Internet Solutions
rick@r2h.nl / @rickR2H / github.com/RickR2H
2

AFBEELDINGEN
BEHEREN…?
Dat kan niet in Joomla! Toch…?
3
1

Wat is de oorzaak van het probleem…
4
Afbeeldingen staan op een vaste locatie
In de database zijn op diverse locaties de relatieve
URL’s
naar deze afbeeldingen opgeslagen
Verwijderen of verplaatsen van de afbeelding
resulteert dus in een 404 melding

ImageManager for Joomla!
5
Is niet de nieuwe Media Manager van Joomla! 4

Wat zijn de mogelijkheden…?
 Eenvoudig afbeedingen verplaatsen (drag & drop)
 Afbeeldingen hernoemen
 Visuale indicatie of een afbeelding wordt gebruikt
 Aangeven waar afbeeldingen worden gebruikt
 Alle ongebruikte afbeeldingen laten zien en in een keer
verwijderen
 Zoeken op naam
 Folders aanmaken en beheren
 Vervang spaties of underscores met hyphens (-) in de
bestandsnaam in één batchbewerking
6
Het ImageManager
component maakt het
mogelijk afbeeldingen te
verplaatsen zonder de link te
verliezen in artikelen, custom
HTML modules en custom
fields.
Eenvoudig drag & drop de
afbeeldingen om je website te
herstructureren en op te
schonen.

Bezint eer gij begint! De
onmogelijkheden…?
7
Afbeeldingen die in andere onderdelen worden
gebruikt worden (nog) niet opgepakt en verwerkt…
Oplossing: Provider plugins
DJ Image �ݺ�ߣr
Ignite Gallery
Unite Nivo �ݺ�ߣr
Database Dump File

“Tijdens de installatie is een
FEATURE TOUR die alle
mogelijkheden beknopt
uitlegt en laat zien waar
deze opties zich bevinden in
het systeem.
88

DEMO
TIME!!!
Installatie en basis gebruik
9

Slim omgaan met
afbeeldingen in

Wat is het probleem
De eindgebruiker/klant wil graag zelf
afbeeldingen kunnen toevoegen en
niet belast worden met het
verschalen van afbeeldingen!
11

Wat zijn de gangbare opties?
 Foto’s toch netjes verschalen naar meerdere
bruikbare formaten en handmatig uploaden.
 Toegepaste plugins en modules gebruiken welke
automatisch thumbnails genereren en verschalen.
 Maximum afbeelding breedte instellen met css.
12
// Make all images mobile responsive
img {
max-width: 100%;
height: auto;
}

Wat zouden wij als ontwikkelaars graag
willen?
 Stick to the core!
 Een schaalbare oplossing welke eenvoudig te
implementen is in zowel artikelen als modules.
 Eenvoudig te implementen.
13

De oplossing...
Een hele handige plugin:
Resize Image on the Fly and Cache
https://extensions.joomla.org/extension/resize-image-on-the-fly-and-cache/
Zonder md5 hashing vaqn de filename
https://github.com/RickR2H/imgresizecache
14

Wat zijn de mogelijkheden van de plugin?
 Verschalen en/of croppen van de Intro en Full tekst
afbeeldingen
 Afbeeldingen met een bepaalde CSS class naam
verschalen in Artikelen of Modules (Prepare content
option aan!)
 Kan worden toegepast in overrides en alternative
layouts
15

Wat zijn de pluginopties bij de article blog
layout?
 De wijze van thumbnail aanmaken (Graphic Library)
 Locatie van de cache folder (cache/thumbs o.i.d.)
 De toe te passen breedte en hoogte
 Cropping of niet
 De class welke zorgt voor verschaling van afbeeldingen
in de content / aangepaste HTML modules
16

Thumbnails gebruiken in…
18
Alternative
layouts
Module
Overrides
Jlayout
overrides

Standaard code en benodigde parameters
20
image path / width / height / crop
<?php
// Include the necessary file and create the resizer instance
require_once JPATH_SITE . '/plugins/content/imgresizecache/resize.php';
$resizer = new ImgResizeCache();
?>

<?php $images = json_decode($this->item->images); // item is supposed to be the article object ?>
<img src=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($resizer->resize($images->_image_intro, array('w' => 200, 'h' => 100,
'crop' => TRUE))); ?>" alt=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($images->image_intro_alt); ?>" />

Thumbnails in article alternative layout
1. Maak een article override via de template voor de article category blog
layout
21
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="Referentie Blog layout"
option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
2. Pas de layout title aan in de xml file

Override Jlayout:
3. Kopieer: layouts / joomla / content / intro_image.php
Naar: template / html / layouts / joomla / content /
referentie_intro_image.php
4. Pas de Jlayout in de alternative layout van: blog_item.php
Naar: referentieblog_item.php
22
<?php echo
JLayoutHelper::render('joomla.content.referentie_intro_image',
$this->item); ?>

5. Jlayout aanpassen om thumbnail aan te maken
6. Menu item aanmaken naar het nieuwe article type
23
<a href=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($displayData->slug, $displayData-
>catid, $displayData->language)); ?>">
<img
<?php if ($images->image_intro_caption) : ?>
<?php echo 'class="caption referentie-blog-thumb"' . ' title="' . htmlspecialchars($images-
>image_intro_caption) . '"'; ?>
<?php else : ?>
<?php echo 'class="referentie-blog-thumb"'; ?>
<?php endif; ?>
src=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($resizer->resize(htmlspecialchars($images->_image_intro, ENT_COMPAT,
'UTF-8'), array('w' => 240, 'h' => 120, 'crop' => FALSE, 'maxOnly' => TRUE))); ?>" alt=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo
htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/></a>

Custom field waarden ophalen (standaard
methode)
Aangegeven in de Joomla! Docs (niet correct)
https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides
24
<?php
/*
* Load all custom field values
*/
foreach($this->item->jcfields as $jcfield)
{
$this->item->jcFields[$jcfield->name] = $jcfield;
}
?>
<?php
/*
* Output example for field with name "breedte"
*/
echo $this->item->jcFields['breedte']->label;
echo $this->item->jcFields['breedte']->value;

Custom field waardes ophalen
(geavanceerd)
Door middel van het ID toegang tot alle parameters van het object
25
<?php
// De waarden in het object weergeven
echo '<pre>';
print_r($this->item->jcfields);
echo '</pre>';
?>
<?php echo $this->item->jcfields[6]->params['render_class']; ?>
<?php echo $this->item->jcfields[6]->fieldparams['image_class']; ?>
<?php echo $this->item->jcfields[6]->rawvalue; ?>
value = het complete geconstrueerde image
object
rawalue = de afbeelding URL

Article override met custom field image met
automatische thumbnail
26
Custom field met:
Image type: Afbeelding (jcfield[6])
Text type: Breedte (jcfield[7])
Text type: Hoogte (jcfield[8])
Text type: alt tekst (jcfield[9])

Article override met custom field image met
automatische thumbnail
27
<?php
?>

<?php $images = json_decode($this->item->images); // item is supposed to be the article ?>
<img src=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($resizer->resize('image_path', array('w' => 200, 'h' => 100, 'crop' =>
TRUE))); ?>" alt="Alt text" />

<div class=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo $this->item->jcfields[6]->params['render_class']; ?>">
<img class=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo $this->item->jcfields[6]->fieldparams['image_class']; ?>"
src=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($resizer->resize($this->item->jcfields[6]->rawvalue,
array('w' => $this->item->jcfields[7]->rawvalue, 'h' => $this->item->jcfields[8]->rawvalue, 'crop' =>
TRUE))); ?>" alt=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($this->item->jcfields[9]->rawvalue); ?>" />
</div>

In module mod_articles_category override
In het artikel object is standaard de afbeelding aanwezig. Dit
kunnen we gebruiken in de alternative layout of override.
Afbeelding is standaard niet aanwezig dus deze moeten we uit
het artikel object halen.
28
<?php
?>

<?php if(!empty(json_decode($item->images)->image_intro)) : ?>

<?php $images = json_decode($item->images); // item is supposed to be the article ?>
<img src=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($resizer->resize($images->_image_intro, array('w' => $img_width, 'h' =>
$img_height, 'crop' => TRUE))); ?>" alt=/rickspaan1/r2h-imagemanager-en-slim-omgaan-met-afbeeldingen-in-joomla/"<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
<?php endif; ?>

Joomla 3.8
30
2 belangrijke wijzigingen:
 Router
 Joomla! 4.0 Compatibility Layer

Joomla 3.8 - Router
31
Actief in: (Content, Contact, Users, and Newsfeeds)
Existing router: ID van de laatste categorie vooraan
New router with IDs: elke categorie zijn eigen ID
New router without IDs: geen ID’s

Joomla 3.8 - Router
32
Router:
In: (Content, Contact, Users, and Newsfeeds)
Existing router: /article-categories/72-park-site/photo-gallery/animals
New router with IDs: /article-categories/26-park-site/28-photo-gallery/72-animals
New router without IDs: /article-categories/park-site/photo-gallery/animals
Existing router: /article-categories/72-park-site/photo-gallery/animals/25-koala
New router with IDs: /article-categories/26-park-site/28-photo-gallery/72-animals/25-koala
New router without IDs: /article-categories/park-site/photo-gallery/animals/koala

Joomla 3.8 - Compatibility Layer J4
33
Joomla! Klaar maken voor versie 4
De structuur van de files van het Joomla! Framework zal veranderen
https://developer.joomla.org/news/693-plan-for-the-joomla-3-8-release.html

34
Bedankt!
Vragen?
Je kunt mij vinden via:
@RickR2H & rick@r2h.nl

�ݺ�ߣ

R2H ImageManager en slim omgaan met afbeeldingen in Joomla!

More Related Content

R2H ImageManager en slim omgaan met afbeeldingen in Joomla!

Editor's Notes