www.kwamarant.be - Joomla 3.x

Nieuwe productie

• Home · sorteren op position: laatst actieve slide openen en save as
  • Varkens met stress: 1ste slide met rode en gele letters
  • 2 buttons per foto: zie Vrienden van het Goede Leven
  • grotere marge rond knoppen: zie Tailleur pour dames
• Het stuk · sorteren op position: laatst actieve about openen en save as
  • boven de editor klikken op [Toggle Editor] om in de html-editor te komen
  • daarna scherm verversen/refreshen (F5) omdat anders de Flickrit-div niet verschijnt (en bijgevolg ook niet opnieuw mee wordt gesaved…)
  • eventueel bestaande slideshow met foto's uitmarkeren (<!-- & -→)
• De spelers · sorteren op position: laatst actieve service openen en save as
  • vervang tekst
  • achtergrondfoto vind je hier: .../templates/shaper_onepage/images/service-bg.jpg
• Tickets · sorteren op clients
  PHPJabbers Event Booking Calendar events gebruiken (= events 3.2.1):
  • datum en uur van-tot
  • naam vh event
  • aantal beschikbare tickets
  • afbeelding (momenteel per dag, voor de herkenbaarheid)
  • NIET VERGETEN het tabje Bevestiging aan te klikken om de bevestigingsmail in te vullen, anders gaan er geen mails uit!!! Check ook of het telefoonnummer in de bevestigingsmail nog actueel is!!!
• Archief · sorteren op position: laatst actieve about openen en inhoud kopiëren
  • dan naar nieuw Content > Articles: daar laatste blog-artikel openen en save as
• Contact · blijft doorgaans onveranderd, bij locatieproject Google Maps uitschakelen!
• Hotmail:
  • mapje maken in Postvak in: !jjj Titel Productie
  • (Instellingen)
  • Alle Outlook-instellingen weergeven
  • Regels
  • reservaties (Regel bewerken)
  • bij Actie toevoegen, de map bij 'Verplaatsen naar' wijzigen in de net gecreëerde map
  • Opslaan

Template

Colors

• Tailleur pour dames & La doesse Schuuse: (bijna) default van preset1 (geel) - #ffd200 of rgb(255, 210, 0)
• Per®ongeluk: zelf een preset4 (rood(&geel)) gemaakt - #ff0000 of rgb(255, 0, 0)

• css/template.css
• css/bootstrap.min.css
• images/slider-arrow-right & left.png

Geblokkeerde template oplossen

1ste methode

• hernoem de bestaande template naar shaper_badpage
• herinstalleer JoomShaper OnePage v1 (F:\OneDrive\Websites\3_KWAMARANT.BE\Joomla! 3.x\JoomShaper Templates\OnePage\v1)
• kopieer de volgende bestanden naar de vers geïnstalleerde template:
  • templateDetails.xml (voor preset 4)
  • css\bootstrap.min.css²
  • css\template.css²
  • [css\presets\preset1.css]
  • css\presets\preset4.css
  • images\service-bg.jpg
  • images\slider-arrow-left.png
  • images\slider-arrow-right.png
  • js\main.js (om de carousel automatisch te laten draaien om de 7 seconden)
  • less\theme.less (voor preset 4)
• krijg je de fout: FAILED TO PARSE PASSED IN VARIABLE @PRESET, wijzig dan bij de template van preset, en alles komt goed

2de methode

• 06/03/2019: nieuw logo: lukt niet om de template te wijzigen - dus wijziging doorgevoerd - niet zichtbaar, en vervolgens een Save as Copy gedaan, waarna het nieuwe logo als bij wonder vanzelf verscheen…

Structuur

Home

Het stuk

fotogalerij flickrit (Flickr)

fotogalerij publicalbum (Google Photos)

- <script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/dist/pa-embed-player.min.js" async></script>
+ <script src="http://kwamarant.be/publicalbum/pa-embed-player.min.js" async></script>

De spelers / De medewerkers

Tickets

Tonen Verbergen

- #pjWrapper .pjPecEventContainer .thumbnail .pjEbcEventDesc img{ display: block; float: left; margin-right: 12px; }
+ #pjWrapper .pjPecEventContainer .thumbnail .pjEbcEventDesc img{ display: block; float: left; margin-right: 12px; margin-bottom: 9px;}

__<a href="https://www.google.be/maps/dir//B%26B+'t+Sprankelend+Toeval/@50.8160089,3.6158609,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x47c30fa494e8c17d:0xe38c00bf9bdcec71!2m2!1d3.6508802!2d50.8159599" target="_blank" class="btn btn-primary"><i style="background-color:transparent;" class="icon-map-marker"></i>&nbsp;&nbsp;'t Sprankelend Toeval&nbsp;&nbsp;<i style="background-color:transparent;" class="fa fa-play"></i></a>__

- .icon-map-marker:before{content:"\f041";}
+ .icon-map-marker:before{content:"\f041";background: transparent !important;}

<i><i>- .fa-play:before{content:"\f04b"}</i></i>
<i><i>+ .fa-play:before{content:"\f04b";background: transparent !important}</i></i>

events/app/web/css/themes/theme1.css

• de css selector van het betreffende theme: #pjWrapper a
• de component in de Event Booking Calendar: EBCCalendar
• het thema zelf: theme1

- #pjWrapper a { color: #ffd200; }
+ #pjWrapper a { color: #ffd200; text-decoration: none; font-weight: 600; }
+ 
+ #pjWrapper a:hover {
+ color: #ff0000;
+ text-decoration: none;
+ -webkit-transition: all 200ms;
+ -moz-transition: all 200ms;
+ -o-transition: all 200ms;
+ transition: all 200ms;
+ }

Event Booking Calendar > Events > Edit Event X: Beschrijving

• een hyperlink
• naar een nieuw tabblad
• met als tekst een map marker, gevolgd door de naam van het etablissement, gevolgd door een pijl

<a href="https://www.google.be/maps/dir//B%26B+'t+Sprankelend+Toeval/@50.8160089,3.6158609,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x47c30fa494e8c17d:0xe38c00bf9bdcec71!2m2!1d3.6508802!2d50.8159599" target="_blank"><i class="icon-map-marker"></i>&nbsp;&nbsp;'t Sprankelend Toeval&nbsp;&nbsp;<i class="fa fa-play"></i></a>

events/app/web/css/style.css

- #pjWrapper .pjPecEventContainer{margin-top: 15px; padding: 4px; border-radius: 4px; border: 1px solid #ddd; background: #808080 none repeat scroll 0 0;}
+ #pjWrapper .pjPecEventContainer{margin-top: 15px; padding: 4px; border-radius: 4px; background: #808080 none repeat scroll 0 0;}

Tickoweb

bootstrap + custom css + fontawesome

<!-- NIET DOEN OF DUBBEL!!! link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" -->
<span style='font-size: 1em; color: #444444;'><link rel="stylesheet" type="text/css" href="/templates/shaper_onepage/css/tickets.css">
</span><span style='font-size: 1em; color: #444444;'><script src="https://kit.fontawesome.com/cfebb7e7ea.js" crossorigin="anonymous"></script></span>

Archief

Contact

• een Google Maps-kaart als achtergrond
• een contact-formulier
• en daaronder:
  • links: mail-icoon met mail-link
  • midden: facebook-link & eronder 'boossy'-link
  • rechts: locatielink met beschrijving - doorgaans 'zaal "De Wante" …

Google Maps-kaart

Met shortcode

- <p>[spmap lat="50.806605" lng="3.6789902" zoom="16" height="620" map_content="" maptype="ROADMAP"]Kwamarant, Schorisse[/spmap]</p>
+ <p>[spmap lat="50.806605" lng="3.6789902" zoom="16" height="385" map_content="" maptype="ROADMAP"]Kwamarant, Schorisse[/spmap]</p>

Zonder shortcode

• breedte: op 100% zetten
• hoogte: op 620 zetten ipv de standaardwaarde

<iframe src="https://www.google.com/maps/d/embed?mid=1XajRmNQISW7pM0h0SIxhnp7Tv638ATOl" width="100%" height="620"></iframe>

-   top: 108px;
+   top: 220px;

Kaart & locatielink met beschrijving

<div class="center contact-email">
<p style="height: 25px;"><a href="https://www.google.be/maps/@50.8063515,3.6797062,3a,75y,63.88h,83.69t/data=!3m4!1e1!3m2!1sA0TvmgBPF9WhpHXbnAVK5w!2e0" target="_blank"><i style="" class="icon-map-marker "></i></a></p>
<p><a href="https://www.google.be/maps/place/Essestraat+2,+9667+Horebeke/@50.806605,3.6789902,17z/data=!3m1!4b1!4m2!3m1!1s0x47c30f6af107a879:0xc44f2afaaf4b6275" target="_blank">Zaal "De Wante", Essestraat, MAARKEDAL</a></p>
<p> <script type="text/javascript">
 spnoConflict(function($){
 $('#sp-main-body-wrapper').remove();
 });
 </script>
 </p>
</div>

Slideshow

Flickrit

Flickrit 2015

• een map die je uploadt via de Windows Flickr Uploadr tool, wordt meteen omgezet in een album
• wijzig de subtitel van het album (standaard vermeldt het de oorspronkelijke mapnaam, wijzig het in de datum van de toneelproductie)
• kies dan "Edit in Organizr"
• klik dan op "Batch edit" > "Change permissions": kies "Anyone (Public) en klik op de knop "CHANGE PERMISSIONS" - de permissies worden gewijzigd (bij de opties kun je kiezen wie mag commentaar geven - voorlopig laat ik die op de standaardwaarden staan, mocht er misbruik gemaakt worden, kan ik dat wel nog inperken)
• gelukkig was flickrit.com eens down, waardoor ik naderhand opteerde voor de self hosted versie, want…

Flickrit 2016

• deze versie is alleen nog betalend te gebruiken
• deze versie bestaat niet meer in een self hosted versie

Pickljar

FlickrEmbed.com

Sembedder.com

• Dat zou op bijna 125 euro komen… - aangekocht op 10 april 2017.
• Op 14 maart 2018 zie ik dat ook hier de stekker eruit getrokken is: sembedder.com is niet meer bereikbaar (404).
• flickrembed.com bestaat wel nog, maar daar kun je dus geen self hosted versie kopen…

Stukken naar datum

Gallery (oud)

SP Carousel

Automatisch laten sliden

=jQuery(function($){
   jQuery('.carousel').carousel({
     interval: 7000
   })
});=

Twee buttons per slide

<a href="http://..." target="_blank"><span>Foto: Spotter2</span></a>

Title met subtitle in slider-item

Per(r)ongeluk!</h1><BR><h2>Schorisse · zaal De wante<BR>11-12 mrt 20 u. · 13 mrt 17 u.<BR>Tickets 8? · OD-leden 7?</h2><h1>

PHPJabbers Event Booking Calendar v3.1 - issues

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

PHPJabbers Event Booking Calendar v3.2 - vanaf 2019

Uw reservatie is genoteerd

<h2 class="module-title">BEDANKT!<BR><i class="fa fa-check"></i></h2><p class="center lead">Van harte dank voor uw reservatie.</p><p class="center lead">U ontvangt weldra een mail van ons met de betalingsinstructies.<br />Na betaling is de reservatie voltooid.</p><p class="center lead"><button class="btn btn-transparent" onclick="myFunction()"><BR>&nbsp;&nbsp;&nbsp;Nog een reservatie graag!&nbsp;&nbsp;&nbsp;<BR><BR></button></p><script>function myFunction() {  location.reload();}</script>

#pjWrapper h2 { color: #ffd200; font-weight: 600; },

Beschikbare plaatsen

• geeft problemen in combinatie met de bootstrap-versie van Joomla 3.x (archief-artikels worden geblurd)
• geeft grijs scherm op iPad iOS 9.3 met Safari 9 (Nadine)

• Daarna geen blur meer in de archief-artikels
• en geen grijs scherm meer op oudere iOS/Safari-combinaties

• haal de code in de backend van de EventBookingCalendar op
• haal in die code 3x http://kwamarant.be weg, zodat je een relatief pad hebt
  • Events: edit event, tab Installeren (voor één event)
    of
  • Code en voorbeeld:
    • Weergave: Lijst
    • Wisselen tussen weergaven verbergen: Ja
    • Taal: v Taalkeuze verbergen
    • Thema: Thema 1
• plak de resulterende code in je Joomla-artikel
• plak diezelfde code ook in een leeg html-document en roep dat op in je browser, bv. in Chrome
• rechtsklik in die opgeroepen pagina en kies 'Paginabron weergeven'
• klik op de derde link in die source-weergave, dat is de script-link
• in het venster dat dan verschijnt, selecteer je alles van <div...> tot *</script>*
• ga nu weer naar je Joomla-artikel, en plak het gekopieerde gedeelte over de script-regel daar (<script...> … </script>)

Specialekes

Issues

Carousel/slider

Google search results

Redirect 301 /index.php/component/content/featured /
Redirect 301 /index.php?option=com_content&view=featured /
Redirect 301 /index.php/component/search/ /
 

A non-numeric value encountered in .../plugins/system/helix/core/helix.php on line 548

AH01071: Got error 'PHP message: PHP Warning:  A non-numeric value encountered in /home/kwamarant1/domains/kwamarant.be/public_html/plugins/system/helix/core/helix.php on line 548

$absspan+=$val->span;
$absoffset+=$val->offset;

$absspan+=(int)$val->span;
$absoffset+=(int)$val->offset;

Contact form in English instead of Dutch

Message