WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] comments.php: How to display an image through RELATIVE path? (11 posts)

  1. fran330
    Member
    Posted 1 year ago #

    I make my themes with ThemeFrame (a tool close to Artisteer). I'm good at html and css but zero in php language. So I'd appreciate a little help here.

    Here's an example of a post of my site, containing a comment form:
    http://www.ajwan.net/wordpress/galerie-demo/10-style-diaporama/09-fleurs/fleurs-d-europe/
    My question concerns the line below the text input field, starting with an imgae: a yellow Attention sign.

    That line is displayed as expected because the image is fetched through its ABSOLUTE path.
    Here is the line of code in comments.php

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="http://www.ajwan.net/wordpress/wp-content/uploads/2012/01/attention_w26.png"> Pour voir votre commentaire publié, rafraichissez la page.',

    Now, for various reasons, I need taht the image is fetched through its RELATIVE path. So I tried this like I would in CSS for a background image for instance:

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="images/imagename.png"> Pour voir votre commentaire publié, rafraichissez la page.',

    That didn't work. The line was displayed without the image.
    N.B. the image definitely exists in the "images" folder of my theme. It's not like I forgot to put it there.

    Then someone advised me to try the WP function 'bloginfo' with the parameter "template_url" (which I knew nothing about)
    I then tried this:

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="<?php bloginfo("template_url"); ?>/images/attention_w26.png" /> Pour voir votre commentaire publié, rafraichissez la page.',

    It didn't work either. This is what was displayed on the site:
    /images/attention_w26.png" /> Pour voir votre commentaire publié, rafraichissez la page.

    If someone could tell me what is wrong in the last code or tell me what else I should do to get the image's relative path, I'd be most grateful.

    Thanks in advance,
    Fran

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Why are you trying to use relative paths? WordPress generally uses absolutes paths.

  3. fran330
    Member
    Posted 1 year ago #

    Because it's a theme and not a WP content. It's a theme for an image gallery, and it could be used by different sites. So I would prefer that all images used by the theme belong to the theme. See what I mean?

    If impossible, I'll keep using the absolute path which will be the image on my own server. I'd just like to avoid that...

  4. ronangelo
    Member
    Posted 1 year ago #

    Relative paths should work but the images need to be inside the themes folder and not the upload folder. The path would be relative to where the style.css is located.

    src="images/imagename.png"
    So this would work if the theme's folder has the "images" folder that contains the image.png

  5. fran330
    Member
    Posted 1 year ago #

    It IS in the images folder of the theme.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Can you change it back to hard-coded and post a link to the site?

  7. fran330
    Member
    Posted 1 year ago #

    Excuse me WPyogi. What is "hard-code" ?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Using the HTML in the template file instead of php (which then generates the HTML)

    I was suggesting you try this again:

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="images/imagename.png"> Pour voir votre commentaire publié, rafraichissez la page.',

    What file path shows up when you use that? Is it a valid file path? i.e. if you paste that file path into your browser, does the image show up?

  9. fran330
    Member
    Posted 1 year ago #

    OK, I just tried it again and I left it that way for now so that you can see.
    To be clear, here's the code I wrote:

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="images/attention_w26.png">&nbsp;Pour voir votre commentaire publié, rafraichissez la page.',

    Result: the image simply doesn't show.
    Here's one of the pages in which it should appear (just below the text input area)
    http://www.ajwan.net/wordpress/galerie-demo/10-style-diaporama/09-fleurs/fleurs-d-europe/

    Then, as you advised, I wrote the image full path in my browser and it definitely shows the image.
    You can try: http://www.ajwan.net/wordpress/wp-content/themes/gallery-ajwan/images/attention_w26.png

    Now, that line of code is within an "array". I really know nothing in php so I don't know it it matters.
    That array is generated by ThemeFrame (the tool I make my themes with) and sits at the bottom of comments.php
    Here is the full bottom of comments.php:

    // The rest is set here:
    $comment_form_settings = array(
    	'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
    	'comment_field'        => '<p><textarea name="comment" id="comment-textarea" rows="10" cols="60" tabindex="4"></textarea></p>',
    	'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
    	'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
    	'comment_notes_before' => '',
    	'comment_notes_after'  => '<img style="width: 26px; height: 23px;" alt="" src="images/attention_w26.png">&nbsp;Pour voir votre commentaire publié, rafraichissez la page.',
    	'id_form'              => 'commentform',
    	'id_submit'            => 'comment-submit',
    	'title_reply'          => '<a name="ajouter-msg"></a>Écrire un commentaire',
    	'title_reply_to'       => 'Leave a Reply to %s',
    	'cancel_reply_link'    => 'Annuler',
    	'label_submit'         => 'Envoyer'
    );
    
    comment_form($comment_form_settings);
    ?>

    Thanks for your attention & patience, WPyogi

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    this line contains a syntax error (php code in a string):

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="<?php bloginfo("template_url"); ?>/images/attention_w26.png" /> Pour voir votre commentaire publié, rafraichissez la page.',

    try for instance:

    'comment_notes_after' => '<img style="width: 26px; height: 23px;" alt="" src="' . get_bloginfo("template_url") . '/images/attention_w26.png" /> Pour voir votre commentaire publié, rafraichissez la page.',

    alternatively, consider to program the image as background image:
    (image laocation has to be in the /images folder of the theme)

    code (example):

    'comment_notes_after' => '<span class="img-attention"> Pour voir votre commentaire publié, rafraichissez la page.</span>',

    css for style.css:

    .img-attention { padding-left: 26px; height: 23px; background-repeat: no-repeat; background-image: url(images/attention_w26.png); background-position: left bottom; }

    might need fine tuning; not tested.

  11. fran330
    Member
    Posted 1 year ago #

    YESSSSSS !!!
    It's working and you made my day! :-) The first code you gave works perfectly.
    Thank yout so much! - and also to WPyogi for trying to help me.

Topic Closed

This topic has been closed to new replies.

About this Topic