[wordpress] Afbeeldingen url stuk bij gebruik SEO Permalinks

[Alfa Novanta]

Hallo mede tweakers,

Bij deze een vervelend probleem. In het kort de situatie:

Interne LAMP server met speeltuin omgeving

• Ubuntu, MySQL, PHP, Apache
• Wordpress 3.5.1
• XCloner plugin
• Themify thema Responz

Externe server met LIVE website

• Wordpress 3.5.1
• XCloner plugin
• Themify thema Responz

De website kan ik met XCloner vrij eenvoudig kopiëren, zowel files als database. Helemaal super. Werkt perfect! Oftewel, de LIVE website en Speeltuin hou ik gelijk.

Nu was de website online en wij blij

Echter, stom, Permalinks stonden nog default.
Dus http://www.onzewebsite.nl/?page_id=432
Dus ik die ingesteld als http://www.onzewebsite.nl/%postname%/

Echter stel je voor de thema 1 afbeelding in, die hij dan standaard bovenaan de pagina plaatst. Helemaal super, dus bedrijfslogo hierin gezet. Voorheen heeft dit gewerkt, nu met mooie SEO URL's gaat het fout.

De link naar de afbeelding heb ik i.v.m. de geregelde heen-en-weer kopieer actie met XCloner relatief gemaakt, dus zonder de complete http://www.domeinnaam.nl/ ervoor.
De afbeelding staat bijvoorbeeld in /wp-content/uploads/2013/04/logo.png

Op de hoofdpagina wordt dit keurig

code:

http://www.onzewebsite.nl/wp-content/uploads/2013/04/logo.png

Op de subpagina's schrijft hij er de %postname% tussenin, dus

code:

http://www.onzewebsite.nl/%postname%/wp-content/uploads/2013/04/logo.png

.. en dat werkt uiteraard niet.

Ik snap niet goed wat hier aan de hand is, d.w.z. waar het precies fout gaat.
MOET je de volledige URL hanteren??

Ook staan in deze theme standaard een aantal iconen van Twitter of Facebook die wij ook graag willen gebruiken. Na de Permalinks SEO in te stellen, doen ook die het niet meer.

Locatie:

code:

http://www.onzewebsite.nl/wp-content/themes/responz/themify/img/social/twitter.png

URL op subpagina

code:

http://www.onzewebsite.nl/%postname%/wp-content/themes/responz/themify/img/social/twitter.png

Ik bedoel, ik snap wat er gebeurt, maar hoe moet je hier mee omgaan? Waar precies gaat het fout?

Ik snap dat het bijvoorbeeld met mod_rewrite te maken kan hebben en met .htaccess, maar of deze daar wel of niet staat maakt voor de werking niet uit.

Bovendien, privé heb ik ook een Wordpress website met een thema en daar gaat alles gewoon goed.

Moet ik eerst Wordpress installeren, SEO friendly permalinks selecteren en dán pas de Theme installeren?

Hoe gaan jullie met afbeeldingen om? Zetten jullie die online via de website via de upload functie? Het is wel leuk dat je ze dan binnen de Wordpress dashboard kunt zien enzo, maar verder .. gewoon een map aanmaken images en ze daar neer zetten is bijna net zo gemakkelijk. Echter, dat heb ik ook geprobeerd, maar zolang hij er de %postname% tussenin blijft zetten schiet ik er niks mee op ..

Wie heeft er een idee?

[Nedra]

hoe wordt de url aangeroepen in het thema? Het kan zijn dat er een verkeerde tag wordt gebruikt waardoor er een relatieve url aangeroepen wordt.
Wat je kan proberen is whatever er nu gebruikt wordt vervangen met

code:

get_template_directory_uri()

[TheNephilim]

Normaal zou het niet moeten uitmaken in welke volgorde je thema's activeert en wanneer je rewrite permalinks activeert.

1. Hoe zet je afbeeldingen in je thema?
2. Heb je gewoon de 'standaard' Wordpress .htaccess gebruikt?
3. Welke SEO plugin gebruik je?

[Alfa Novanta]

TheNephilim schreef op dinsdag 14 mei 2013 @ 14:05:
Normaal zou het niet moeten uitmaken in welke volgorde je thema's activeert en wanneer je rewrite permalinks activeert.

dat leek mij ook ..

1. Hoe zet je afbeeldingen in je thema?

Momenteel via de media - upload functionaliteit. En dan in een directory mm/ww (maandnr/weeknr)

2. Heb je gewoon de 'standaard' Wordpress .htaccess gebruikt?

Ja, ik was daar nog niet aan geweest. Kwam er al google'end nu op.

3. Welke SEO plugin gebruik je?

Yoast WordPress SEO .. maar daar heb ik naast het activeren nog niets mee gedaan verder. Enige wat ik op dit moment aan SEO gedaan heb is de standaard Wordpress Permalinks optie aan te passen.

Ik weet niet of het helpt, maar onderstaand een stukje (geparsed) code ..

PHP:

        <!-- /nav-bar -->

                <header id="header" class="pagewidth">
                    
            <hgroup>
                <div id="site-logo"><a href="http://speeltuin" title="Onze slogan"><img src='images/bedrijfslogo.png' alt='bedrijfs_slogan' /></a></div>    
                <h2 id="site-description"></h2>
            </hgroup>
    
            <div class="header-widget">
                            </div>
            <!--/header widget --> 

                            <div id="searchform-wrap">
                    <div id="search-icon" class="mobile-button"></div>
                    <form method="get" id="searchform" action="http://speeltuin/">
    <input type="text" name="s" id="s"  placeholder="Zoeken op Ons bedrijf..."Search">
</form>             </div>
                <!-- /searchform-wrap -->
            
            <div class="social-widget">
                <div id="themify-social-links-3" class="widget themify-social-links"><ul class="social-links">
                        <li class="social-link-item twitter">
                            <a href="https://twitter.com/OnsBedrijfBV" title="Twitter" ><img src="wp-content/themes/responz/themify/img/social/twitter.png" width="25" height="25" /> </a>
                        </li>
                        <!-- /themify-link-item -->
                        <li class="social-link-item facebook">
                            <a href="http://www.facebook.com/pages/OnsBedrijfBV/342660199089672?ref=hl" title="Facebook" ><img src="wp-content/themes/responz/themify/img/social/facebook.png" width="25" height="25" /> </a>
                        </li>
                        <!-- /themify-link-item --></ul></div>  
                                    <div class="rss"><a href="http://speeltuin/feed">RSS</a></div>
                            </div>
            <!-- /.social-widget -->

In deze bovenstaande pagina ontbreekt dus het bedrijfslogo terwijl de html suggereerd dat deze keurig relatief is .. <img src='images/bedrijfslogo.png'> .. maar resulteert in http://onsdomein.nl/%Postname%/images/bedrijfslogo.png

Dus het omzetten met %Postname% is de boosdoener zover ik kan zien ..

En IRL ziet het er zo uit ..


Ik moet de code nog even doornemen, maar zou img.php er nog wat mee te doen kunnen hebben? Ik zie in ons thema wel een optie deze uit te kunnen schakelen.

[ Voor 10% gewijzigd door Alfa Novanta op 14-05-2013 16:25 ]

[Nedra]

Dat komt dus omdat er een relatieve link naar het logo staat

code:

 <img src='images/bedrijfslogo.png' alt='bedrijfs_slogan' />

Er gaat niets mis met de permalinks, die horen zo te werken. Wat er in je header zou moeten staan is http://site.nl/images/bedrijfslogo.png. Om te zorgen dat je dit niet hoeft te veranderen als de site url veranderd, plaatjs je het volgende in je header in plaats van de huidige afbeelding src naar het logo

code:

<img src="<?php get_site_url(); ?>/imags/bedrijfslogo.png"/>

[ Voor 5% gewijzigd door Nedra op 14-05-2013 16:32 ]

[Alfa Novanta]

ow .. vet !! Mooie taal dat php .. lekker to the point

Ik ga er morgen nog eens naar kijken. Dankjewel.

edit: 't enige waar ik bang voor ben is dat de eerstvolgende update dit overschrijft, maargoed.
Eerst zien, dan oordelen

[ Voor 36% gewijzigd door Alfa Novanta op 14-05-2013 21:22 ]

[Vos]

Lees dit eens door: http://codex.wordpress.org/Function_Reference/bloginfo

Zo gebruik ik het altijd.

[Alfa Novanta]

Ik merk wel dat img.php nogal wat invloed heeft. Dit is een Thema eigen bestand zie ik nu dus dit zullen jullie wel niet kennen.

Zonder is het

code:

http://speeltuin/wp-content/themes/responz/themify/img.php?src=images/bedrijfslogopng&w=&h=&q=100&a=l

en dan werkt het.

en anders is het

code:

http://speeltuin/wp-content/images/bedrijfslogo.png

en dan werkt het dus niet.

Qua SEO heeft de onderste de voorkeur lijkt me.

[Nedra]

AH zo! Ik had niet helemaal begrepen dat je je logo via het themify backend upload (had al wen zo een idee). Als ik zo kijk dan zal je de url naar het logo er toch 'hard' in moeten zetten, dus inclusief de http://sitenaam.nl/folder/images/image.png: http://themify.me/docs/customizing-site-logo-description

Maar goed, dit is dus wel een specifiek themify probleem en volgens mij kan je daar best wat over vinden op hun forum, helaas krijg ik daar geen antwoorden te zien, maar jij vast wel:

http://themify.me/forum/tags.php?tag=site-logo

[Alfa Novanta]

eens. daar zal ik zo even in duiken! dankje

Wat ik nu nog vond, is ..

bron: wp-content/themes/responz/header.php

Java:

            <hgroup>
                <?php echo themify_logo_image('site_logo'); ?>
                <h2 id="site-description"><?php bloginfo('description'); ?></h2>
            </hgroup>

.. wordt in HTML

HTML:

            <hgroup>
                <div id="site-logo"><a href="http://speeltuin" title="Bedrijfsslogan"><img src='images/bedrijfslogo.png' alt='bedrijfsslogan'/></a></div>   
                <h2 id="site-description"></h2>
            </hgroup>

maar om daar dan

code:

<img src="<?php get_site_url(); ?>/images/bedrijfslogo.png"/>

in te drukken wordt nogal wat

of ik moet de hele regel php eruit slopen. Maar ik kan nu niet overzien wat dit doet ..


edit:
de functie themify_logo_image is als volgt:

PHP:

/**
 * Returns logo image.
 * Available filters:
 * 'themify_'.$location.'_logo_tag': filter the HTML tag used to wrap the text or image.
 * 'themify_logo_home_url': filter the home URL linked.
 * 'themify_'.$location.'_logo_html': filter the final HTML output to page.
 * @param string $location Logo location used as key to get theme setting values
 * @return string logo markup
 */
function themify_logo_image($location = 'site_logo', $cssid = 'site-logo'){
    if(themify_get('setting-' . $location) == 'image' && themify_check('setting-'.$location.'_image_value')){
        $logo_tag = apply_filters('themify_'.$location.'_logo_tag', 'div');
        $type = 'image';
    } else {
        $logo_tag = apply_filters('themify_'.$location.'_logo_tag', 'h1');
        $type = 'text';
    }
    $html = '<' . $logo_tag . ' id="' . $cssid . '">';
    $html .= '<a href="'.apply_filters('themify_logo_home_url', home_url()).'" title="'.get_bloginfo('name').'">';
    if('image' == $type){
        $html .= themify_get_image("src=" . themify_get('setting-'.$location.'_image_value') . "&w=" . themify_get('setting-'.$location.'_width') . "&h=" . themify_get('setting-'.$location.'_height') . "&alt=" . urlencode(get_bloginfo('name')));
    } else {
        $html .= get_bloginfo('name');
    }
    $html .= '</a>';
    $html .= '</' . $logo_tag . '>';
    return apply_filters('themify_'.$location.'_logo_html', $html, $location, $logo_tag, $type);
}

$location = 'site_logo' lijkt hierin de URL aan te roepen.

Misschien moest je hier iets mee doen ..
* 'themify_logo_home_url': filter the home URL linked.

[ Voor 60% gewijzigd door Alfa Novanta op 15-05-2013 11:49 ]

[Alfa Novanta]

Nedra schreef op woensdag 15 mei 2013 @ 10:01:
Maar goed, dit is dus wel een specifiek themify probleem en volgens mij kan je daar best wat over vinden op hun forum, helaas krijg ik daar geen antwoorden te zien, maar jij vast wel:

http://themify.me/forum/tags.php?tag=site-logo

Kon er niets vinden over dit probleem, dus daar ook maar even neergezet in een nieuw draadje ..

http://themify.me/forum/topic.php?id=8973#post-41670

[Nedra]

Je kan inderdaad het thema aanpassen zoals ik opperde, maar dan krijg je dus het probleem wat je zelf al aangaf; het is weer weg bij een thema update.Ik denk dan ook echt dat het de bedoeling is de absolute url's naar afbeeldingen in het back-end in te voeren (in dit thema).

[Alfa Novanta]

Ja, dat heb ik nu eerst maar gedaan. Zolang ik maar naar de www.mijndomeinnaam.nl verwijs kan ook de testomgeving er wel bij. 't Is alleen goed onthouden dat je niet lokaal naar de afbeeldingen zit te kijken .. je zou rare situaties kunnen krijgen. Vandaar, relatief is altijd makkelijker..

[Nedra]

Ik denk dat je dat eens zou moeten voorleggen aan de makers van themify. In principe is het niet moeilijk relatief te maken. Het nadeel is dan weer dat je geen afbeelding die ergens anders gehost is er in kan plakken (alhoewel dat ook te bouwen is).

[Alfa Novanta]

Dat heb ik in dat topic gedaan

en hun reactie vandaag ..

Bron: Ikono @ Themify Themify Team

The social link icons have to use absolute paths, as entering a relative path will make it a different URL depending on the page you're on.

For example, using a relative path as above and being on a post page may give a URL such as:

http://yoursite.com/2013/...s/2013/04/companylogo.png

Which would of course be wrong.

The general approach to moving sites between servers is to perform a find/replace function on the database to replace domain names, etc. as covered here: http://codex.wordpress.org/Moving_WordPress

Wordpress stores a number of absolute URL references in the database, and when switching between domains it's important to change them.

Hope this helps, thanks.

moet zeggen dat ik het niet helemaal begrijp ( misschien morgen als ik het nog eens lees ) maar mijn reactie ..

XCloner probably already does the renaming part, because I have no problem whatsoever to migrate a website from internal testserver to a LIVE environment. It indeed asks for the new website URL before executing. Strangely it is only for these images otherwise it would be perfect.

What is so different with these images? It seems to me you should be able to just upload them using standard Wordpress library and browsing to them.

Anyway, I just entered a absolute path http://www.mydomain.com/etc.. and it works, even when on the testserver because it gets them from the internet.

Now I know this 'flaw' I can manage just keeping reminding me that I am actually looking at the live images instead off the locally placed one's.

Het zal er wel mee te maken hebben dat dit de enige(?) afbeeldingen zijn die je overal inladen moet, dus op de frontpage (voor zover je daarvan spreken kunt) maar ook op de posts en pages.

Vroeger in HTML was dit allemaal zo'n probleem niet. Ik had/heb altijd een images subdirectory en verwees er altijd relatief naartoe. Maar inderdaad, vanuit een subdirectory moet je dan nog een extra niveau omhoog..

[ Voor 10% gewijzigd door Alfa Novanta op 16-05-2013 22:47 ]