Page 1 of 1

Wieder eine schöne Fotoseite

Posted: Tue 24. Sep 2013, 13:15
by 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

Re: Wieder eine schöne Fotoseite

Posted: Tue 24. Sep 2013, 15:36
by nameless1
schick, bis auf das "logo".

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

danke!

Re: Wieder eine schöne Fotoseite

Posted: Tue 24. Sep 2013, 15:53
by kmstario
Moin moin,
nameless1 wrote: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.

nameless1 wrote: kannst du den link zu der js-nummer post?
Was meinst du damit?

VG Andreas

Re: Wieder eine schöne Fotoseite

Posted: Tue 24. Sep 2013, 17:26
by nameless1
das ding von der startseite mit größer werdenden bildern beim hover. gefällt.

Re: Wieder eine schöne Fotoseite

Posted: Tue 24. Sep 2013, 18:38
by juergen
und ein phpwcms System braucht kein wp count pixel :)

Re: Wieder eine schöne Fotoseite

Posted: Wed 25. Sep 2013, 09:17
by top
nameless1 wrote: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

Re: Wieder eine schöne Fotoseite

Posted: Wed 25. Sep 2013, 10:41
by kmstario
Hallöchen,
juergen wrote:und ein phpwcms System braucht kein wp count pixel :)
Kommt von Statcounter. Ist mir auch unklar, warum solche Bezeichnungen verwendet werden.
Hauptsache es funktioniert. :wink:
top wrote: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.

Re: Wieder eine schöne Fotoseite

Posted: Tue 15. Oct 2013, 12:16
by 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.

Re: Wieder eine schöne Fotoseite

Posted: Tue 15. Oct 2013, 13:47
by 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

Re: Wieder eine schöne Fotoseite

Posted: Wed 16. Oct 2013, 00:12
by Jensensen
Womit hast Du die Top-Navi erstellt?
Das ist nicht mit NAV_LIST_UL gemacht, sondern hardcodiert, oder?

Re: Wieder eine schöne Fotoseite

Posted: Wed 16. Oct 2013, 09:03
by 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" />';

Re: Wieder eine schöne Fotoseite

Posted: Fri 18. Oct 2013, 13:21
by kmstario
Hallöchen,
Jensensen wrote: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.
Oliver Georgi wrote: 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 :D

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

Re: Wieder eine schöne Fotoseite

Posted: Fri 18. Oct 2013, 14:08
by 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
});