Wieder eine schöne Fotoseite

post released sites here made with phpwcms
Post Reply
kmstario
Posts: 365
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Wieder eine schöne Fotoseite

Post by kmstario » Tue 24. Sep 2013, 13:15

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
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

nameless1
Posts: 847
Joined: Sun 27. Apr 2008, 23:22

Re: Wieder eine schöne Fotoseite

Post by nameless1 » Tue 24. Sep 2013, 15:36

schick, bis auf das "logo".

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

danke!

kmstario
Posts: 365
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: Wieder eine schöne Fotoseite

Post by kmstario » Tue 24. Sep 2013, 15:53

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
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

nameless1
Posts: 847
Joined: Sun 27. Apr 2008, 23:22

Re: Wieder eine schöne Fotoseite

Post by nameless1 » Tue 24. Sep 2013, 17:26

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

User avatar
juergen
Moderator
Posts: 4550
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Wieder eine schöne Fotoseite

Post by juergen » Tue 24. Sep 2013, 18:38

und ein phpwcms System braucht kein wp count pixel :)

User avatar
top
Posts: 441
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Wieder eine schöne Fotoseite

Post by top » Wed 25. Sep 2013, 09:17

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

kmstario
Posts: 365
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: Wieder eine schöne Fotoseite

Post by kmstario » Wed 25. Sep 2013, 10:41

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.
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Wieder eine schöne Fotoseite

Post by santscho » Tue 15. Oct 2013, 12:16

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.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

kmstario
Posts: 365
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: Wieder eine schöne Fotoseite

Post by kmstario » Tue 15. Oct 2013, 13:47

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
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

User avatar
Jensensen
Posts: 2986
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Wieder eine schöne Fotoseite

Post by Jensensen » Wed 16. Oct 2013, 00:12

Womit hast Du die Top-Navi erstellt?
Das ist nicht mit NAV_LIST_UL gemacht, sondern hardcodiert, oder?
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.

User avatar
Oliver Georgi
Site Admin
Posts: 9482
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Wieder eine schöne Fotoseite

Post by Oliver Georgi » Wed 16. Oct 2013, 09:03

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" />';
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

kmstario
Posts: 365
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: Wieder eine schöne Fotoseite

Post by kmstario » Fri 18. Oct 2013, 13:21

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
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

User avatar
Oliver Georgi
Site Admin
Posts: 9482
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Wieder eine schöne Fotoseite

Post by Oliver Georgi » Fri 18. Oct 2013, 14:08

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
});
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

Post Reply