Featured img in custom layout

  • Resolved seemax

    (@seemax)


    9 years, 1 month ago

    To make any img appear in desirable way I should write in layout template next:
    <figure class=”responsive”
    data-media=”<?php bloginfo(“stylesheet_directory”); ?>/img/name.png” >
    </figure>
    So, I can get any img but not the featured one to make it easy to set for inexperienced user.
    Can I get the path to featured post img?

Viewing 8 replies - 1 through 8 (of 8 total)

  • By “layout template”, are you referring to a single post template? I would take a look at the_post_thumbnail() which also includes some user contributed examples towards the bottom.

    Moderator bcworkz

    (@bcworkz)

    Craig’s suggestion actually outputs the featured image <img> tag. Which is great if that was your intention. If you really want just the featured image URL, you need to go more low level.

    Get the attachment ID from post_meta under the key ‘_thumbnail_id’, then the URL with something like wp_get_attachment_image_src(). If you look at the “Related” section near the bottom of the linked page, you’ll see a number of functions that could be used to get image data besides the ones suggested. You might find one them is more suitable.

    My mistake – the_post_thumbnail() will indeed supply the whole <img> tag and not just the URL.

    Good call, thanks @bcworkz.

    Thread Starter seemax

    (@seemax)

    Thanks for support.
    I do wanna get URL of F img to place it to data-media=”URL” in order to make it responsive, thanks to script.

    Native WP img responsiveness solution is way more complicated, as for me.

    Please, any clue is welcome.

    Moderator bcworkz

    (@bcworkz)

    Craig, no worries, your thought, even if a little off the mark, will likely help someone in the future who lands here through searching ??

    seemax, WP is merely responding to the fact that responsive web design relating to images is just plain complicated due to widely varying screen size and pixel densities balanced against the need to manage mobile bandwidth. I don’t know in what direction you’re looking for a clue, but here’s a good in-depth discussion about responsive images in general:
    https://blog.cloudfour.com/responsive-images-101-definitions/

    And specifically about the WP implementation:

    Update: Responsive Image Support for Core

    Thread Starter seemax

    (@seemax)

    Thanks BCW, but I wonder, do you use this technic yourself?

    Thread Starter seemax

    (@seemax)

    To anyone who may concern, that’s it:

    <!– All this to get post featured img URL, which is $image –>
    <?php if (has_post_thumbnail( $post->ID ) ): ?>
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); ?>
    <?php endif; ?>

    <!– And then, get this URL into data-media=”…” –>
    <figure class=”responsive” data-media=”<?php echo $image[0]; ?>” >
    </figure>

    Moderator bcworkz

    (@bcworkz)

    Nice, thanks for sharing!

    I personally have not yet implemented what WP has done in my own coding, but it is on my To Do list to take a harder look at considering it.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Featured img in custom layout’ is closed to new replies.