HEAD file niet okee?

Status
Niet open voor verdere reacties.

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.930
Omdat mijn site zo traag is, nadat ik van thema ben veranderd, denk ik dat het aan de head file ligt, maar ik heb daar niet zo veel kaas van gegeten.
Omdat een andere site van mij wel lekker loopt, hierbij de vraag of ik dan de head file van die kan overnemen? (ik denk van niet, omdat er natuurlijk dingen instaan die te maken hebben met dat thema)

De head file van mijn site die traag met opstarten is:

Code:
<!DOCTYPE html><!-- HTML 5 -->
<html <?php language_attributes(); ?>>

<head>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<title><?php display_title($s); ?></title>
<link type="text/css" rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
<?php if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Presto')) : ?>
<style type="text/css">
#gray-shading { margin-top:-16px; }
ul#top-nav ul li { margin-left:-80px; }
ul#top-nav ul li a { margin-left:30px; }
ul#top-nav ul ul li { margin-left:0; }
</style>
<?php endif; ?>
<?php if (strpos ($_SERVER['HTTP_USER_AGENT'], 'MSIE 7')) : ?>
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/css/css-for-stupid-browsers-named-ie.css" class="clearfix" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/lib/images/favicon.ico" />
<?php
wp_register_script('livequery',get_template_directory_uri().'/lib/javascript/jquery-livequery.js',array('jquery'));
wp_register_script('website',get_template_directory_uri().'/lib/javascript/website.js',array('jquery','livequery'));
if(is_singular()):
wp_enqueue_script( 'comment-reply' );
else:
wp_enqueue_script('jquery');
wp_enqueue_script('livequery');
wp_enqueue_script('website');
endif;
?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
		
		<div id="horz-wrapper">
			
			<div id="title-slogan">
                <?php get_search_form(); ?>
				<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1>
				<p class="slogan"><?php bloginfo('description'); ?></p>
			</div>
			
			<?php mytheme_nav(); ?>
			<br class="clear"/>

Kan ik hier wat aan veranderen? Ik denk sowieso het eerste deel, het doctype is denk ik niet helemaal goed.

Wie helpt ven.
 
Hoi Femke,
Eerst de makkelijkste: het Doctype is het nieuwe HTML5-doctype , en dat is op zich prima. Jammer genoeg kunnen een aantal in omloop zijnde browsers nog niet cq niet goed genoeg met html5 overweg, dus als op de site html5-snufjes worden gebruikt (kan wel, hoeft niet), dan zouden oudere browsers (IE8 bv.) problemen kunnen geven. Maar ik zie dat er een speciaal stylesheet "css-for-stupid-browsers-named-ie.css" is, dus hopelijk zal dat zo'n vaart niet lopen. Als de site het doet in de verschillende IE-versies > niets aan de hand. - Tenzij de site alleen in IE erg traag is.

Dan de moeilijker. Deze head-file zal zeker een rol spelen, maar dan indirect. Het is de centrale regiekamer die allerlei andere processen aan het werk zet (op basis van wat je op andere plaatsen in het CMS hebt opgegeven). Maar die andere processen worden hier alleen met hun naam (als variabele) genoemd, en van de inhoud ervan zie je hier niets.
En van die inhoud hangt het nu net af! - Sommige bestanden zullen zelf ook weer regie-bestanden zijn (php gecodeerd), die bv. de database aansturen of hulpbestanden oproepen; welke dat zijn, en of daar boosdoeners voor de paginasnelheid bij zitten, zie je hier ook niet.

Oftewel: als je in de regel- en controlekamer aan knoppen wilt gaan draaien, moet je precies weten wat je doet. Anders gaat de fabriek plat! ;)
  • Vervangen van de regelpanelen in de regiekamer zonder dat alle snoertjes naar oude onderdelen (thema1) doorgeknipt zijn, en de snoertjes naar de nieuwe onderdelen (ander thema) er nog niet zijn, en als ook de instellingen niet zijn aangepast, tja...
Als antwoord op je vraag "Kan ik wat veranderen aan de head-file?" zou ik daarom zeggen: nee! :rolleyes:

De eigenlijke oorzaken van pagina-traagheid zullen zitten in de opdrachten die je aan de regie hebt gegeven: als dat er veel zijn, of complex, of veel haken en ogen met zich meebrengen, zal het trager gaan.
Dat kan inderdaad met het thema en de gebruikte template(s) te maken hebben. Zoals:
  • Als voor alles van een thema 50.000 afbeeldingen en 27.000 scripts worden gedownload, waarvan er 46.412 resp. 25.307 in de praktijk niet gebruikt worden...
  • Of als de regie zegt dat er flessen gevuld moeten worden, terwijl de vultrechter boordevol zit en de lopende band op volle toeren draait, maar er alleen geen flesjes op staan omdat de flessenleverancier vertraging had...

Van dat soort dingen. Die kan je aan de head-file niet aflezen, en dat kan je van de buitenkant ook niet zien.

Wat je wel vanaf de buitenkant zou kunnen zien, is waar de voornaamste remmen zitten. Is het de pagina zelf die erg zwaar is, zijn het extra toebehoren, veel afbeeldingen, of zitten er zware scripts aan verbonden? Is alle code o.k., of moeten de browsers het onderste uit de kast halen aan foutafhandeling?

Kortom, je raadt het al: een linkje?

Met vriendelijke groet,
CSShunter
 
Ik had in een eerdere topic al zoiets gehad en heb toen heel veel tips van je gehad, die ik dus ook in uitvoer heb gebracht. Maar dat was met een andere site, die dus nog steeds goed loopt.
Waaronder dus ook de headfile, de doctype en zo. Dus ik dacht dat ik dat bij deze ook moest veranderen.

Okee, de link: http://femke98.bouke-blog.nl/blog/ (of te wel de link in mijn handtekening)

Moet zeggen, hij zit achter een andere blog, dus misschien dat het daardoor komt. (1 hosting maar meerdere blogs kunnen maken)
Het is echt de opstart, dus de tijd dat je hem in de browser ziet. Daar gaat het mij om. Er staan amper wat foto's op, dus dat kan het niet zijn.

Ik hoop op weer wat tips van je!
 
Laatst bewerkt:
Hoi Femke,
Ga ik even kijken met Firefox, sta ik helemaal paf!


  • Paf! Vrijwel acuut bij opening van de pagina (met lege cache) staat het middenblok met de content voor m'n neus.
  • Paf! Nog geen fractie van een seconde later staat ook de groene background-afbeelding er achter.
  • Ach! De vervolgpagina's via het menu hebben even wat bedenktijd nodig, maar zo weinig dat ik daar niet wakker van kan liggen.

Er lijkt niets aan de hand. Terwijl ik toch op Windows draai. ;)

Background-image, mmm, dat is wel een joekel van 1920*1297px en 306kB. Met 20% jg-compressie wordt het 1/3 minder zonder dat ik opvallend kwaliteitsverschil kan zien: deze Matrix_Code_background_Image-nw.jpg van 202kB. - Scheelt weer 100kB die niet gedownload hoeven te worden.

Dan kijken met Chrome en via (Extra >) Hulpprogramma voor Webontwikkelaars en knop Network de binnenkomst van de onderdelen gecheckt. (Chrome doet er wel iets langer over dan FF)

blog-speed.png

Alles komt heel snel binnen, behalve de mystyle.css: die staat ook in het rood, met "(canceled)" erbij, en lijkt ook de volgende bestanden tegen te houden. Iets aan de hand met de mystyle.css?
En wat zegt de css-validator eigenlijk?


Dan zijn de browsers denkelijk druk in de weer met een aantal verwoede pogingen (na mislukken nog eens proberen) om de mystyle opnieuw op te vragen; om na de browser-limiet van het aantal pogingen te besluiten deze zoektocht definitief te staken. In de tussentijd kan er weinig anders gebeuren, en omdat de css in de <head> staat, kan de pagina ook nog niet gerenderd worden.



Zie je kans om in het CMS de verwijzing naar die mystyle.css er uit te halen?

Anders kan het ook door uit de femke98.bouke-blog.nl/blog/wp-content/plugins/wp-minify/min/?f=wp-content/themes/color-shading/style.css,wp-content/plugins/contact-form-7/includes/css/styles.css&b=blog&m=1355254888 (wat die CMS'sen allemaal niet verzinnen!) de verwijzing te halen, als je daar los bij kunt komen zonder de rest in de war te sturen (eerst maar een backup'je):


@charset "utf-8";
@import url('/blog/wp-content/themes/color-shading/lib/css/main.css');
@import url('/blog/wp-content/themes/color-shading/mystyle.css');
.aligncenter{display:block;margin:0 auto}
.alignright{float:right;margin:0 0 1em 1em}
...


Met vriendelijke groet,
CSShunter
__________
PS: Als ik bovenaan de uitroller van het 1e bericht heb gezien, en dan belangstellend ben naar het 5e bericht en dus naar beneden hover, word ik helemaal duizelig van de accordeon. Is die niet in te stellen zodat het accordeoneren pas begint na een klik op het item? (en dan bij openen pagina de bovenste open laten staan, waarmee alvast iets te lezen valt?)
 
Laatst bewerkt:
Eh......tja.....die mystyle.css
geen idee wat dat is, zal bij het thema horen. Ik kan dat wel verwijderen neem ik aan, in de Direct Admin. ( ik ga zo eens kijken)
http://femke98.bouke-blog.nl/blog/w...7/includes/css/styles.css&b=blog&m=1355254888

als ik die aanklik dan krijg ik dus die lange link in mijn browser en als ik die opzoek in mijnfiles in de Direct Admin, vind ik hem niet.
url]http://femke98.bouke-blog.nl/blog/wp-content/plugins/wp-minify/min/ deze wel, maar wat daar achter staan, dus niet!

Verder die accordeon, hoort bij het thema, en dus zal ik eens kijken waar ik dat kan veranderen, mocht dat erg irritant zijn. Ik zal eens gluren.
 
Laatst bewerkt:
Code:
@charset "utf-8";
/*  
Theme Name: Color Shading
Theme URI: http://www.onedesigns.com/wordpress-themes/color-shading
Description: A clean and content-focused theme for bloggers with a customizable color scheme. Ideal if you want your content to stand out and add personality to your blog.
Version: 1.2.1
Author: Ramblingwood
Author URI: http://www.ramblingwood.com/
Tags: black, red, green, blue, purple, orange, pink, brown, one-column, fixed-width, custom-colors, custom-background, custom-menu, editor-style, threaded-comments, sticky-post

License: GNU General Public License v2.0
License URI: license.txt
*/

/*
DO NOT EDIT THIS STYLESHEET!
Any modifications made to this file will be lost if you update the theme.
Instead, create a file called mystyle.css and add your modifications in that file.
Any style attributed declared there will override the ones in this file and will not be lost during theme update.
*/

/* Import Default Stylesheet */

@import url('lib/css/main.css');

/* Import Custom Stylesheet */

[B]@import url('mystyle.css');[/B]

/* Text and Image Alignment */

.aligncenter			{ display: block; margin: 0 auto; }
.alignright				{ float: right; margin: 0 0 1em 1em; }
.alignleft				{ float: left; margin: 0 1em 1em 0; }
.floatleft				{ float: left; }
.floatright				{ float: right; }
img.aligncenter, img.alignright, img.alignleft  { border: 1px solid #ddd; text-align: center; background: #fff; padding: 4px; }
img.aligncenter {
	margin:7px auto !important;
}

.textcenter				{ text-align: center; }
.textright				{ text-align: right; }
.textleft				{ text-align: left; }

.wp-caption { border: 1px solid #ddd; text-align: center; background: #F3F3F3; padding: 5px 10px 5px 5px; margin: 10px auto; }
.wp-caption img { margin: 0 !important; padding: 0; border: none }
.wp-caption .wp-caption-text { display:inline; font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; text-align:center; }
.wp-caption a { border-bottom:none !important; }

.gallery-caption { margin-left: 0; text-align:center; }

.sticky { background:#232323; }

.bypostauthor .comment-body { background:#DEDEDE; }
.bypostauthor .comment-body:hover { background:#DCDCDC; }

hier komt dus die mystyle in voor, zie zwarte gemarkeerde lijn.
Maar kan ik die zomaar verwijderen dan? Aangezien er staat dat je deze stylesheet niet mag veranderen?
 
Code:
<?php

// Content Width

if(!isset($content_width)) $content_width = 591;

// Automatic Feed Links

add_theme_support('automatic-feed-links');

// Custom Background

add_custom_background();

// Display Page Title

function display_title($s)
{
	if (is_404())
		_e('Page Not Found ','cover-wp');
	elseif (is_search())
	{
		_e('Search Results for ','cover-wp');
		echo '&quot;'.$s.'&quot; ';
	}
	elseif (is_tag())
	{
		_e('Entries tagged with ','cover-wp');
		echo '&quot;'.single_tag_title("", false).'&quot; ';
	}
	else wp_title(' ');
	if(wp_title(' ', false)) echo ' | ';
	bloginfo('name');
}

// Widgetable Area

if ( function_exists('register_sidebar') ) 
{     
  register_sidebar(array('name' => 'Sidebar','before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div><!-- /widget -->','before_title' => '<h3>','after_title' => '</h3>'));
}

// Excerpt Read More

function new_excerpt_more($more) {
	return '…';
}
add_filter('excerpt_more', 'new_excerpt_more');

// Recent Comments

function latest_comments()
{
  global $wpdb;

  $comments = get_comments('status=approve&number=7');
  if ($comments)
  {
    foreach ($comments as $comment)
    {
      echo '<li class="recentcomments">';
      echo '<a href="'.get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID.'">'.$comment->comment_author.'</a>';
      echo ' '.__('on','cover-wp').' <a href="'.get_permalink($comment->comment_post_ID).'">'.get_the_title($comment->comment_post_ID).'</a><p><span>';
	  $content = $comment->comment_content;
	  $content = substr_replace($content, '', 80);
      echo '<em>&quot;'.strip_tags ($content).'…&quot;</em></span></p></li>';
    }
  }
}

// Unregister WP-Page-Navi Stylesheet

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

// Custom Color Scheme

require_once ( get_template_directory() . '/color-scheme.php' );

add_action('wp_head', 'color_scheme', 9);

/* *** WordPress 3.0 Features *** */

// Custom Menus

function mytheme_addmenus() {
	if ( function_exists( 'register_nav_menus' ) )
		register_nav_menus(
		array(
			'main_nav' => 'Top Navigation', // You can add more menus here
		)
	);
}

add_action( 'init', 'mytheme_addmenus' );

function mytheme_nav() {
    if ( function_exists( 'wp_nav_menu' ) )
        wp_nav_menu( array('theme_location' => 'main_nav', 'container' => '', 'menu_id' => 'top-nav', 'menu_class' => 'clearfix', 'fallback_cb' => 'mytheme_nav_fallback') );
    else
        mytheme_nav_fallback();
}

function mytheme_nav_fallback() { ?>
    <ul id="top-nav" class="clearfix">
      <li<?php if(is_home()) echo ' class="current_page_item"'; ?>><a href="<?php echo home_url(); ?>/">Home</a></li>
	  <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul><?php
}

add_editor_style();

?>

en hier zie ik als ik het goed zie, het gedeelte van de home, wat jou duizelig maakt,
 
Hoi Femke,
Tja, pittig eigenwijze dingen, die Wordpress-thema's...
Je kan voor de mystyle.css-verwijzing inderdaad niet tekeer gaan in het ding met de lage naam.

Maar ik had al een workaroundje achter de hand voor als het niet zomaar zou gaan.
Als het systeem zo graag een mystyle.css wil zien,dan maken we toch een mystyle.css?! ;)
D.w.z. een mystyle.css die bestaat uit één css-commentaar-regeltje:
Code:
/* mooi niks! */
En opslaan op de plaats die ze willen hebben.

Dan is er een niet-lege mystyle.css (met het comm.-regeltje kan je ook online controleren of het bestand er inderdaad is),
en de browsers hoeven niet langer in alle hoeken en gaten te zoeken waar ie uithangt. :)

=======

De accordeon/accordion kom ik in bovenstaand code-brokje niet tegen. Ik zie 'm tevoorschijn komen in een javascript-plugin, waar de instructies voor jQuery gegeven worden.

Die is nogal dicht opeen geplakt geschreven, maar als je 'm ontrafelt kom je o.a. dit tegen:
[JS]jQuery(function($){
$('#accordion > li > p').each(function(i,dom){
$(dom).css('height',$(dom).outerHeight());}).hide();

$('#widgetacc > li > p').each(function(i,dom){
$(dom).css('height',$(dom).outerHeight());}).hide();

$('#accordion > li > a').hover(function(){
$(this).next('p:not(:animated)').slideDown(500);},function(){});

$('#widgetacc > li > a').hover(function(){
$(this).next('p:not(:animated)').slideDown(500);},function(){});

$('#accordion > li').hover(function(){
$(this).addClass('hover');},function(){
$(this).removeClass('hover');$(this).children('p').slideUp(500);});
...[/JS]
... en dat gaat dan nog een tijdje zo door.

In principe zou je die moeten kunnen ombouwen en de hover in een click en een herhaal-click (voor het dichtklappen) moeten kunnen omzetten, maar of het systeem dat toelaat: geen idee. - En ook geen idee hoe het ombouwen zou moeten: ben geen jQuery-deskundige.

Heeft de accordion-plugin of het thema misschien ergens een gebruiksaanwijzing?

Met vriendelijke groet,
CSShunter
___________
PS: ik zie dat in het link-lijstje de link naar Steunpunt Almere doodloopt: femke98.nl geeft niet thuis, die staat in quarantaine. Ga je die af laten lopen?
 
Laatst bewerkt:
Je ps. Ja dat klopt. handtekening is hier al veranderd, in de linken lijst moet ik dat inderdaad nog doen, haha. Bedankt dat je dat even doorgeeft.

Mooi dat je dat voor mij gemaakt hebt, die mystyle.css maar waar moet ik dat ding in hemelsnaam neerzetten dan?
want ze willen wel zo'n file, en dan maken we die, maar waar moet ik die plaatsen?

De achtergrond had ik vergeten te smushen (of zelf even te comprimeren tot een lagen kb) dus dat ga ik nog doen.

Handleiding thema, even gezocht voor je:
http://www.onedesigns.com/support/forum/theme-support/color-shading-theme
http://www.onedesigns.com/wordpress-themes/color-shading-theme

maar ik zie daar geen handleiding of zo, da je dat kan veranderen.
 
Yep,
De mystyle hoort hier te komen: femke98.bouke-blog.nl/blog/wp-content/themes/color-shading/mystyle.css.
Hoe je 'm daar via je Admin-panel in krijgt, weet ik niet.

Handleiding...
Ja, die twee had ik ook al gezien: de beschrijving vertelt alleen wat over de kleur-aanpassing, de link naar het originele ontwerp doet het niet, en de beschrijving verwijst verder naar het forum en de FAQ. - Het "forum" bestaat uit welgeteld 4 (andere) vragen, en de "FAQ" heeft welgeteld 1 faqje (en dat is 'm ook niet). Dat schiet niet erg op.
Als je de accordion wilt aanpassen, zal je denkelijk een WP/jQuery-ontwikkelaar in de arm moeten nemen die weet of/hoe het kan zonder het hele thema opnieuw uit te moeten vinden/bouwen (of er moet hier nog iemand langskomen).

Met vriendelijke groet,
CSShunter
 
De mystyle hoort hier te komen: femke98.bouke-blog.nl/blog/wp-content/themes/color-shading/mystyle.css.

die bestaat niet, (er bestaat uiteraard wel een style.css en ook een editor-style.css)) dus die moet ik aanmaken. Ik weet hoe dat gaat in DirectAdmin.
Zie plaatje dat ik de file heb aangemaakt. Hij staat daar in het rijtje.

screen13.jpg

ps. de website komt nu stukken sneller op! Thanx!!
 
Ja, ik kan /* mooi niks */ zien! :D

Chrome vertelt nu dat mystyle.css in 39ms binnen is.
Dat is andere speculaas dan de eerdere vergeefse speurtocht van 2.44s! :)

Groetjes,
CSShunter
 
Ik hoop dat er nog iemand hier leest over de accordeon, maar ik ben er bang voor. Misschien een andere topic hier voor openen, met dat in de titel. Wie weet helpt dat wel.
Voor nu ben ik blij, de accordeon vind ik zelf niet zo heel erg, maar ja....je maakt een website niet voor jezelf!
 
De achtergrond had ik vergeten te smushen (of zelf even te comprimeren tot een lagen kb) dus dat ga ik nog doen.


Processing matrix_code_background_image-jpg-2…
– 1920x1297: already smushedReduced by 3.6% (11.2 KB)
– 150x150: already smushed
– 300x202: already smushed
– 1024x691: already smushed

die was dus al gesmushed!
 
Smush.it en image-bestandsgrootte

Hoi Femke,
die was dus al gesmushed!
Jaha, maar ook neehee! :P


  • Wat smush.it wel kan doen, is bekijken of met behoud van kwaliteit de grootte omlaag gebracht kan worden door een ander bestandstype te gebruiken (bv. van .gif naar .png) of bij een .png-plaatje kijken of de kleurdiepte omlaag kan (omdat de rest van de 16 miljoen kleuren toch niet gebruikt wordt).
  • Het nu gebruikte matrix-background-image als .jpg is 299kB en heeft 86.720 kleuren (zegt PaintShopPro, niet nageteld), en dan is omzetting naar een .gif (met maar 256 kleuren) onmogelijk, terwijl bij dat aantal kleuren omzetting naar een .png alleen maar nog grotere bestandsgrootte zou opleveren (maar liefst 2.3MB). Dus smush.it zegt terecht: kan niet gesmushed worden, is al het kleinst mogelijke.
  • Maar wat smush.it niet doet, is op eigen houtje aan de kwaliteit gaan zitten knabbelen. :rolleyes:

Dat kan/mag je alleen zelf doen!
En dat kan voor een .gif of een .png ook, in je tekenprogramma:

kleurdiepte.png


  • Een .gif kan naar beneden van 256 kleuren naar 16 of 2 kleuren.
  • Een .png kan soortgelijk omlaag, met meer tussenstappen.

Voor de manier van berekening van de resterende kleuren zijn er verschillende mogelijkheden (hangt van het img af wat het beste resultaat geeft):

kleurdiepte-verminderen.png


  • Een .jpg kan ook mindere kwaliteit (> kleinere bestandsgrootte) krijgen, niet door kleurenaantal terugbrengen (want een png heeft altijd 16M kleuren), maar door de jpg-compressie anders in te stellen.

Die compressie is een soort rekenmethode waarbij alleen maar pixels op een bepaalde afstand van elkaar worden genoteerd, en de rest wordt weggelaten. De browser ziet de (met de .jpg meegezonden) compressieverhouding, en blaast het img vervolgens weer op tot het bedoelde formaat, ook weer met een rekenmethode om de tussenliggende pixels zo goed en kwaad als het gaat te gokken.
Vandaar dat een gecomprimeerde .jpg atijd "artefacten" heeft: rare kleurschakeringen, waarbij soms ook wild-west kleuren worden toegevoegd die helemaal niet in het origineel zaten. Hoe meer compressie, hoe erger het wordt.

compressie-wg.png

links: origineel - rechts: jpg met 50% compressie

En dezelfde 3x uitvergroot:

compressie-vergroot.png

links: origineel - rechts: jpg met 50% compressie

Ga je kleuren tellen, dan heeft het origineel 30 verschillende kleuren. De jpg blijkt er ... 483 kleuren van gemaakt te hebben! :eek:

=======

Het is dus zaak om éérst te kijken welke kwaliteit een image moet hebben, en pas daarna te smushen met smush.it!

=======

Bij het matrix-image, dat een background-image is, is de kwaliteit niet zo heel erg belangrijk. Het gaat niet om het plaatje, het gaat om de content waar het oog van de bezoeker naar toe gaat!
Vandaar heb ik in reactie nr. #4 een 20% jpg-compressie toegepast: dit resultaat van het matrix-img met 200kB ipv 300kB.
  • Alstublieft! ;)

Dat kan smush.it dus niet voor elkaar krijgen.
Zie verder ook het artikeltje: Image saving - Gif, png, jpg: which is the best format?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Aha, dat wist ik allemaal niet, maar dat kan je toch niet zo doen met 100den forto's die ik bijv. op mijn andere blog zet? kan ze moeilijk allemaal bekijken naar de kleur en zo. Dus doe ik ze (op dat andere blog) verkleinen naar 800x600 en laat ze smushen.
Nu met de achter grond maak ik de afbeelding net zo groot als mijn beeldscherm en verklein hem dan nog eens met Converseen en dan laat ik hem nog een smushen.
Voor mij was dat voldoende eigenlijk wel.

Maar wel bedankt voor de achtergrond, die zal ik morgen even plaatsen!
 
Aha, de Converseen is zo'n beetje vergelijkbaar met IrfanView waar je ook batch-processing mee kunt doen.
Op straffe van dingen te vertellen die je al weet:

Bij Converseen kan je ook de jpg-compressie instellen, zie ik: converseen.faster3ck.net/res/converseen2.png
  • Even experimenteren met welk % het goed gaat.
  • Bij grote foto's, direct uit de camera, kom ik na verkleining (+ een beetje verscherpen) meestal uit op 10% à 20% jpg-compressie (= 90% à 80% kwaliteit) voor behoorlijke schermkwaliteit . *)

Daarna kan dan de bulk-conversie in 1 moeite door met compressie en al (nadat je een backup van het origineel hebt gemaakt, want als eenmaal een jpg-compressie is doorgevoerd, kan je 'm nooit meer in de oorspronkelijke kwaliteit terugkrijgen!).
  • Voor foto-verzamelingen heb ik daarom 2 mapjes op m'n kast staan: "origineel" en "web". :)

Met vriendelijke groet,
CSShunter
____________
*) Foto's waarvan het de bedoeling is dat ze door de bezoekers kunnen worden geprint, moeten juist niet (of een stuk minder) verkleind / gecomprimeerd worden; want printers hebben een veel hogere resolutie dan een beeldscherm, en anders gaat de foto er erg slordig uit zien.
 
Voor foto-verzamelingen heb ik daarom 2 mapjes op m'n kast staan: "origineel" en "web".
laat ik dit nu ook hebben, want een verkleinde foto kan je nooit meer terug krijgen naar het origineel!
 
Over de accordion container, dit vond ik in het colors-heme in de files:

#accordion li.first a, .widget ul {
border-top:1px #<?php echo $elementbd; ?> solid;

plus in de index.php staat ook nog iets met accordion-wrapper.

<?php get_header(); ?>
<div id="gray-shading" class="container">
<div class="padding">

<div id="accordion-wrapper">
<ul id="accordion"><?php $i = 1; ?>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<li <?php if($i == 1) post_class('first element'); else post_class('element'); $i++; ?>>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php _e('Permanent Link to') ?> <?php the_title_attribute(); ?>"><?php the_title(); ?><span><?php _e('Written'); ?> <?php the_time('F j, Y') ?> by <?php the_author(); ?> under <?php $category = get_the_category(); if(!empty($category)) echo $category[0]->cat_name; ?></span></a>
<p>
<span><?php echo strip_tags(get_the_excerpt()); ?></span>
</p>
</li>
<?php endwhile; ?>
</ul>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) : wp_pagenavi();
elseif ( $wp_query->max_num_pages > 1 ) : ?>
<div class="left"><?php previous_posts_link('<span>'.__('&laquo; Previous Page').'</span>') ?></div>
<div class="right"><?php next_posts_link('<span>'.__('Next Page &raquo;').'</span>') ?></div>
<?php endif; ?>
</div>
<?php else: ?>
<h2 class="center"><?php _e('No Entries Found') ?></h2>
<p class="center"><?php _e('There are no entries in this blog.') ?></p>
<?php endif; ?>
</div>

</div>

<?php get_sidebar(); ?>
</div>


<?php get_footer(); ?>


kan ik daar iets mee met uitzetten?
 
Hoi femke98,
Nop, het eerste ding regelt alleen de borderkleur van iets in de accordion, daar valt niets mee stil te zetten.
In de index.php staan wel veel dingen van de accordion, maar daar gaat het alleen om het binnenhalen en op volgorde zetten van de berichten met alles wat daarop en daaraan zit aan html-code: het blijft "platte html".
Ook daarin kan dus niets uitgezet worden.

De functionaliteit van het uitklappen wordt met het javascript van jQuery en z'n toebehoren geregeld, daarin zou het geharmonika uitgezet moeten worden. Om precies te zijn: het zit in de livequery plug-in van jQuery, die samen met jQuery zelf in het bestand ...
... zit (even ademhalen ;) ).

Daar wordt de werking van de accordion bepaald met het aanroepen van verschillende functies, zoals:
[JS]jQuery(function($){
$('#accordion > li > p').each(function(i,dom){
$(dom).css('height',$(dom).outerHeight());
}).hide();
$('#widgetacc > li > p').each(function(i,dom){
$(dom).css('height',$(dom).outerHeight());
}).hide();
enz.[/JS]
Het staat er alleen nogal dichtopeengepakt achter elkaar in genoteerd, dus dat zou je verder moeten ontrafelen om er achter te komen hoe het raderwerk tot stilstand gebracht kan worden. Daar zitten echter een paar maren aan verbonden:
  • Je hebt er goede beheersing van jQuery voor nodig (die heb ik niet).
  • Wat je dan overhoudt, is: alles uitgeklapt, met een vrij lange en onoverzichtelijke pagina tot gevolg.

Met "als niet goedschiks, dan kwaadschiks" kan het ook:
  • De hele plug-in buiten werking zetten door 'm gewoon in de <head> niet op te vragen (of dat consequenties heeft voor de rest van jQuery kan ik niet overzien; eventueel zou het livequery gedeelte uit het bestand gewipt moeten worden).

En ook in dat geval blijft een compleet uitgeklapte pagina over.


  • Resultaat aldus: accordion-almere-x.htm
  • Kan, maar vraagt veel scrollwerk van de bezoeker, en ziet er niet echt mooi uit.

=======
Tot zover het slechte nieuws.
Er is ook ander nieuws! :)
=======

Wat er in feite met het accordeoneren gedaan wordt, is dat de regels die onder de item-kop zitten zichtbaar worden gemaakt. In de html staan ze er al onder, vanwege een relatieve positie t.o.v. het item.
Maar ze hoeven er niet persé onder, je kunt ze ook losschroeven en op een andere plaats zetten. :d
Door de uit te rollen partjes te isoleren met een {position: absolute} kan je ze overal neerzetten, en met een {position:relative} van de list-items waar ze in zitten, kunnen ze elk op een bepaalde plek t.o.v. hun item-kop komen: ernaast, eronder, erboven, enz.

En ... dan is het een css-verhaal geworden, waar alle javascript van jQuery en de plug-in niet aan te pas hoeft te komen. :P
En het accordion-script hoeft ook niet uitgezet te worden.

Wat overblijft, is hoe je de uitklapsels verder wilt stylen. Iets erboven en een klein stukje naar rechts lijkt me het handigste. Dan past het Welkom-blokje er nog precies op, en de andere zijn altijd zonder scrollen te bereiken als je over de bijbehorende item-knop hovert.
Door de tussenruimte is de kop van de vorige zichtbaar en hoverbaar/uitklapbaar.
  • NB: wat dus niet nodig is (zoals ik eerder dacht), is dat je eerst op een item-kop moet klikken om 'm te kunnen zien: hoveren is genoeg!

Genoeg gepraat:

  • Test: accordion-almere.htm
  • De item-koppen blijven netjes op hun plaats staan, de inhoud speelt z'n accordeon-liedje op een ander plekje.
  • Doet 't in Firefox, Chrome, Safari en Opera, en is zo te zien (Netrenderer.com) prima bestand tegen IE8 en IE9.
  • De aanvullende css staat onderaan in de <head>.
  • Als je heel snel heen en weer hovert, is er wel eens een hapering in het vertonen van de uitroller (dan is de accordeon te traag, en komt er niets; maar hover je daarna nog eens, dan komt ie wel); dat zou ik er wel voor over hebben.

CSS blijft toveren!

Met vriendelijke groet,
CSShunter
_______
O ja, als je de links van de "xoxo" class een {display:block} geeft, zijn de links in de twee link-lijstjes helemaal onderaan over de volle breedte aanklikbaar (nu verschiet wel de kleur bij hoveren naast de tekst van de link, maar valt er daar niet te klikken).
O, en nog een twee tikfoutjes in de tooltip/title="Vindt Linux hulp bij jouw in de buurt" van de Buurtlinux-link > title="Vind Linux hulp bij jou in de buurt".
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan