Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

R2H ImageManager en slim omgaan met afbeeldingen in Joomla!

117 views

Published on

Presentatie over R2H ImageManager en slim omgaan met afbeeldingen met Resize en Cache plugin in Joomla! JUG Heerenveen op 5 september 2017

Published in: Education
  • Be the first to comment

  • Be the first to like this

R2H ImageManager en slim omgaan met afbeeldingen in Joomla!

  1. 1. Presentatie ImageManager en slim omgaan met afbeeldingen
  2. 2. Welkom Rick Spaan – R2H Marketing & Internet Solutions rick@r2h.nl / @rickR2H / github.com/RickR2H 2
  3. 3. AFBEELDINGEN BEHEREN…? Dat kan niet in Joomla! Toch…? 3 1
  4. 4. 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
  5. 5. ImageManager for Joomla! 5 Is niet de nieuwe Media Manager van Joomla! 4
  6. 6. 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.
  7. 7. 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 Slider Ignite Gallery Unite Nivo Slider Database Dump File
  8. 8. “Tijdens de installatie is een FEATURE TOUR die alle mogelijkheden beknopt uitlegt en laat zien waar deze opties zich bevinden in het systeem. 88
  9. 9. DEMO TIME!!! Installatie en basis gebruik 9
  10. 10. Slim omgaan met afbeeldingen in
  11. 11. Wat is het probleem De eindgebruiker/klant wil graag zelf afbeeldingen kunnen toevoegen en niet belast worden met het verschalen van afbeeldingen! 11
  12. 12. 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; }
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Plugin instellingen 17
  18. 18. Thumbnails gebruiken in… 18 Alternative layouts Module Overrides Jlayout overrides
  19. 19. Show me the code!!! 19
  20. 20. 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(); ?> <!-- resize and show image --> <?php $images = json_decode($this->item->images); // item is supposed to be the article object ?> <img src="<?php echo htmlspecialchars($resizer->resize($images->_image_intro, array('w' => 200, 'h' => 100, 'crop' => TRUE))); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
  21. 21. 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
  22. 22. Thumbnails in article alternative layout 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); ?>
  23. 23. Thumbnails in article alternative layout 5. Jlayout aanpassen om thumbnail aan te maken 6. Menu item aanmaken naar het nieuwe article type 23 <a href="<?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="<?php echo htmlspecialchars($resizer->resize(htmlspecialchars($images->_image_intro, ENT_COMPAT, 'UTF-8'), array('w' => 240, 'h' => 120, 'crop' => FALSE, 'maxOnly' => TRUE))); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/></a>
  24. 24. 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;
  25. 25. 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
  26. 26. 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])
  27. 27. Article override met custom field image met automatische thumbnail 27 <?php // Include the necessary file and create the resizer instance require_once JPATH_SITE . '/plugins/content/imgresizecache/resize.php'; $resizer = new ImgResizeCache(); ?> <!-- default syntax resize and show image --> <?php $images = json_decode($this->item->images); // item is supposed to be the article ?> <img src="<?php echo htmlspecialchars($resizer->resize('image_path', array('w' => 200, 'h' => 100, 'crop' => TRUE))); ?>" alt="Alt text" /> <!-- in override resize and show image --> <div class="<?php echo $this->item->jcfields[6]->params['render_class']; ?>"> <img class="<?php echo $this->item->jcfields[6]->fieldparams['image_class']; ?>" src="<?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="<?php echo htmlspecialchars($this->item->jcfields[9]->rawvalue); ?>" /> </div>
  28. 28. 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 // Include the necessary file and create the resizer instance require_once JPATH_SITE . '/plugins/content/imgresizecache/resize.php'; $resizer = new ImgResizeCache(); ?> <!-- Create thumbnail when there is an intro image --> <?php if(!empty(json_decode($item->images)->image_intro)) : ?> <!-- resize and show image --> <?php $images = json_decode($item->images); // item is supposed to be the article ?> <img src="<?php echo htmlspecialchars($resizer->resize($images->_image_intro, array('w' => $img_width, 'h' => $img_height, 'crop' => TRUE))); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" /> <?php endif; ?>
  29. 29. Joomla 3.8 Wat is er nieuw
  30. 30. Joomla 3.8 30 2 belangrijke wijzigingen:  Router  Joomla! 4.0 Compatibility Layer
  31. 31. 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
  32. 32. 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
  33. 33. 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. 34. 34 Bedankt! Vragen? Je kunt mij vinden via: @RickR2H & rick@r2h.nl

×