Wieder eine schöne Fotoseite

[kmstario]

Hallöchen,

hier mal noch ein schönes Projekt, was am WE endlich fertig geworden ist.
Die Seite beinhaltet 2 verschiedene Slidervarianten in JQuery,
ist Responsive uvm.

Fotografin Potsdam

Meinungen sind jederzeit erwünscht ;o),

Gruß Andreas

[nameless1]

schick, bis auf das "logo".

im analytics fehlt die anonymisierung der ip.
kannst du den link zu der js-nummer post?

danke!

[kmstario]

Moin moin,

schick, bis auf das "logo".

im analytics fehlt die anonymisierung der ip.

Jo, das Logo ist schon uralt. Sie will es auch unbedingt behalten. Leider wird auch nicht auf mich gehört, bzgl. Schriftverzerrung, leider.
Aber so sind die Individualisten halt ;o).

GA anonymisierung, ja danke - Copy & Paste aus dem alten Template und vergessen.

kannst du den link zu der js-nummer post?

Was meinst du damit?

VG Andreas

[nameless1]

das ding von der startseite mit größer werdenden bildern beim hover. gefällt.

[juergen]

und ein phpwcms System braucht kein wp count pixel

[top]

das ding von der startseite mit größer werdenden bildern beim hover. gefällt.

Scheint das hier zu sein:
http://codecanyon.net/item/grid-accordion/141991

[kmstario]

Hallöchen,

und ein phpwcms System braucht kein wp count pixel

Kommt von Statcounter. Ist mir auch unklar, warum solche Bezeichnungen verwendet werden.
Hauptsache es funktioniert.

Scheint das hier zu sein:
http://codecanyon.net/item/grid-accordion/141991

Ja genau, ist genau das Skript. Lässt sich einfach integrieren, allerdings ist es nicht Responsive.

Die Galerie für die Bilder ist auch ein gekauftes Skript, genauer die tn3 Gallery.

VG Andreas aud P. an der H.

[santscho]

Sieht gut aus! Ich wuerde fuer die mobile Version ein anders Galerie-Plugin verwenden. Dein Plugin ist zwar responsive, aber auf dem Smartphone sehen die Bilder nicht so toll aus. Du kannst mit den Daten eines einzigen CPs verschiedene Plugins ansteuern.

Einfach im Template <!--if:device:desktop-->, <!--if:device:tablet--> und <!--if:device:smartphone--> als wrapper benutzen. phpwcms stellt dann nur den device-entsprechenden code zum Rendering bereit. Hier ein Beispiel (CP Bilder Spezial):

Code: Select all

<!--IMAGE_SETTINGS_START//-->
width		= <!--if:device:desktop-->350<!--/if--><!--if:device:tablet-->200<!--/if--><!--if:device:smartphone-->100<!--/if-->
height		= <!--if:device:desktop-->350<!--/if--><!--if:device:tablet-->200<!--/if--><!--if:device:smartphone-->100<!--/if-->
width_zoom	= <!--if:device:desktop-->1200<!--/if--><!--if:device:tablet-->800<!--/if--><!--if:device:smartphone-->600<!--/if-->
height_zoom	= <!--if:device:desktop-->1200<!--/if--><!--if:device:tablet-->800<!--/if--><!--if:device:smartphone-->600<!--/if-->
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
<!-- CSS: {TEMPLATE}lib/photoswipe/photoswipe.css -->
<!-- JS: {TEMPLATE}lib/photoswipe/lib/klass.min.js -->
<!-- JS: {TEMPLATE}lib/photoswipe/code.photoswipe-3.0.5.min.js -->
<!-- JS: (function(window, PhotoSwipe){
		
			document.addEventListener('DOMContentLoaded', function(){
			
				var
					options = {},
					instance = PhotoSwipe.attach( window.document.querySelectorAll('#photoswipe{CPID} a'), options );
			
			}, false);
			
			
		}(window, window.Code.PhotoSwipe)); -->
<!--if:device:desktop--><ul id="desktoplightbox" class="gallery columns{THUMB_COLUMNS}"><!--/if-->
<!--if:device:tablet--><ul id="photoswipe{CPID}" class="gallery columns{THUMB_COLUMNS}"><!--/if-->
<!--if:device:smartphone--><ul id="photoswipe{CPID}" class="gallery columns{THUMB_COLUMNS}"><!--/if-->
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
<!--if:device:desktop--><li><a class="fancybox" rel="group{CPID}" href="{IMAGE_REL}" title="[CAPTION]{CAPTION}[/CAPTION]"><img src="{THUMB_REL}" alt="[CAPTION]{CAPTION}[/CAPTION]" /></a></li><!--/if-->
<!--if:device:tablet--><li><a href="{IMAGE_REL}"><img src="{THUMB_REL}" alt="[CAPTION]{CAPTION}[/CAPTION]" /></a></li><!--/if-->
<!--if:device:smartphone--><li><a href="{IMAGE_REL}"><img src="{THUMB_REL}" alt="[CAPTION]{CAPTION}[/CAPTION]" /></a></li><!--/if-->
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//-->
<!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//-->
<!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</ul>
<!--IMAGES_FOOTER_END//-->

Wie du oben siehst, kann man auch fuer Tablets und Smartphones eine niedrigere Bild-Aufloesungen rechnen lassen um Bandweite zu sparen.

[kmstario]

Hallo Santscho,

Mensch die Ansteuerung der Einzelnen Geräte ist ja sehr interessant. Das war bisher auch noch ein kleiner Haken an der Galerie, dem ich mich noch widmen muss .
Ich wusste garnicht, das die Ansteuerung schon in den Settings möglich ist, sehr gut zu wissen. Danke!

VG Andreas

[Jensensen]

Womit hast Du die Top-Navi erstellt?
Das ist nicht mit NAV_LIST_UL gemacht, sondern hardcodiert, oder?

[Oliver Georgi]

NAV_LIST_UL kannst Du deutlich anders ansprechen inzwischen, weiß nicht, ob damit gemacht. Aber siehe http://www.spendenstein.de — Bootstrap 2.3 kompatible Lösung.

Ansonsten an @kmstario: Schöne Umsetzung. Und ein Aber!

Wenn man Bilder so massiv umbaut, sollte man darauf achten, dass der Bereich vor der DOM-Manipulation auf display:none oder ähnliches gestellt wird. Dann vemeidet man bei langsamer Verbindung das Aufblitzen der großen Bilder, bevor die endgültige Darstellung greift.

Nutze frontend_render für all die Custom Meta tags. Siehe Funktion set_meta(); Viewport kannst Du ebenfalls direkt über Config-Wert $phpwcms['viewport'] beeinflussen, auch erst in frontend_render definierbar. Keywords und Description sollte man auch nicht so global hart hinterlegen etc. Das liefert phpwcms alles von sich aus über Artikel bzw. Seitenstruktur.

Hier ein paar Beispiele:

Code: Select all

// Favicon
$block['custom_htmlhead']['favicon']		= '  <link rel="icon" type="image/png" href="template/img/myicon.png" />';

// Analytics
$block['custom_htmlhead']['analytics'] = "
  <script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-xxxxxx-x', 'example.com');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
  </script>
";

// Google Site Verification
set_meta('google-site-verification', 'xxxxxxxx');

// FB das kann natürlich noch mit eigenen Werten gefüllt werden, Bild dynamisch etc.
set_meta('og:title', html_specialchars($content["pagetitle"]), 'property');
set_meta('og:description', 'My description', 'property');
set_meta('og:type', 'website', 'property');
set_meta('og:site_name', 'example.com', 'property');
set_meta('fb:admins', '12345', 'property');
set_meta('fb:app_id', '12345', 'property');
set_meta('og:image', 'http://example.com/fbimg.png', 'property');
set_meta('og:url', abs_url() ,'property');

$block['custom_htmlhead']['image_src'] = '  <link rel="image_src" href="http://example.com/fbimg.png" />';

[kmstario]

Hallöchen,

Womit hast Du die Top-Navi erstellt?
Das ist nicht mit NAV_LIST_UL gemacht, sondern hardcodiert, oder?

ich nutze die NAV_HORIZ_DD v1.3 aus der Wiki. Das war für mich damals die beste Lösung, eine Responsive Navi umzusetzen.
Für alles andere habe ich mich wahrscheinlich noch zu dusselig angestellt.

Die habe ich aber schon sehr oft in letzter Zeit verwendet, im Zusammenhang mit der Responsiven Verhaltensweise.

Ansonsten an @kmstario: Schöne Umsetzung. Und ein Aber!

Wenn man Bilder so massiv umbaut, sollte man darauf achten, dass der Bereich vor der DOM-Manipulation auf display:none oder ähnliches gestellt wird. Dann vemeidet man bei langsamer Verbindung das Aufblitzen der großen Bilder, bevor die endgültige Darstellung greift.

Danke

Dieser "Fehler" stört mich und die Kundin auch. Wie meinst du das mit der DOM-Manipulation? an welcher Stelle müsste ich da ansetzen um es besser zu machen?
Gerade auf den Mobilgeräten sieht man kurz die Thumbs blitzen, was nicht schön ist aber ich habe nicht so richtig Plan, was ich wo unterdrücken müsste.

VG Andreas

[Oliver Georgi]

Eigentlich müsste es so gehen:

Code: Select all

$(function($){
    var gridAcc = $('.accordion');
    gridAcc.hide();
    gridAcc.gridAccordion({width:1100,
        height: 500,
        columns: 6,
        distance: 10,
        openedPanelWidth: 'auto',
        openedPanelHeight: 'auto',
        alignType: 'centerCenter', //  leftTop, rightBottom
        slideshow: true,
        slideshowDelay: 5000,
        // shuffle: true,
        captionWidth: 350, 
        captionHeight: 65, 
        captionTop: 342, 
        captionLeft: 0
    }).show(); // oder fadeIn() oder ähnliches
});