Hotlinking Unique Images from Post Previews to Full Posts

  • I’ve become a huge fan of WordPress and am very proud of the site I’ve created using WP2.0 (take a look!). BUT I finally have a question that couldn’t be answered by scouring the Codex for two days… hope that you folks might be able to point me to an existing topic that I’ve overlooked OR help me sort this out for posterity…

    I like to put unique topic-oriented images into many of my posts hand-coding the HTML above the <!–more–> tag and using CSS to control the size of the images in archive view previews and individual post displays.

    It works great… BUT:

    People (myself included) naturally expect for the image to act like a hotlink to the full post (like you see done on websites like ENGADGET).

    I’ve experimented with creating a meta key for articleImages and calling it from within The Loop. This works just fine BUT when I do it this way the image falls outside of the paragraph tags containing the text of my post (invoked using the_content() tag) so I can’t use CSS to wrap the text around the image.

    So what I want to do is:

    1. Have the ability to feature an image in my archive previews.
    2. Have that image work as a link to the full article listing.
    3. Have the article text wrap around the image.

    I see a couple of potential solutions but I suspect that I might have to tweak the code that assembles the post from the call to the_content() tag. I’d like to employ the most elegant, long-term solution to this challenge. Any ideas?

    Thanks!!

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

  • I use my CG-Inline plugin to do this (on my site), but I have a bunch of extra custom code in my index.php template to really make it all work. The plugin lets me define inline images in a post, and auto-builds IMG or A-HREF tag text as needed, on the fly.

    Part of CG-Inline pre-processes the_content to ‘cache’ the inlined elements. If there is an image, I grab the first one. I can then display that img/thumbnail inside the post block, but before displaying the excerpt, and it gets wrappered to be a link to the article. CSS float:left (or other tricks) to wrap text when desired.

    For single-posts, CG-Inline puts in the thumbnail with a link to the full-sized image page, and CSS float:right to wrap text the other way. ??

    It’s not yet a generalized solution, but pretty close to it. Maybe for the next CG-PowerPack release I’ll try to clean it up so it is more useful to others.

    -d

    You could use my “self image” plugin. With it, you can put an image before the more tag that links to the post in full view mode.

    i.e.
    <!--self_img--><img src="whatever.jpg"/><!--/self_img--><!--more-->
    would display whatever.jpg and allow visitors to click it to view the rest of the post. There’s no styling so the link/image will display as your css commands it.

    https://rane.hasitsown.com/blog/page/3/

    Thread Starter drewprops

    (@drewprops)

    This is awesome, thanks you guys! I see that both your plugins handle the images in a similar fashion, using comment wrappers as a target. I’ve installed Vaam’s and it works great! When I have time I’m going to look at the code to try to understand how it works – maybe I’ll write my own plugin one day! I’m curious as to whether there’s a way to make the image NOT be a link when you’re viewing the full, individual post. No big deal if it can’t… would just be nice.

    Consider my question answered!

    If you want the image to NOT be a link in full view mode, perhaps you’d be interested in my hide/show plugin.

    With it, you can wrap the “self-img” tag inside an “excerpt-only” tag. Then wrap a “full-only” tag around another image that gets displayed when the post is viewed in full view mode.

    https://rane.hasitsown.com/blog/page/2/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hotlinking Unique Images from Post Previews to Full Posts’ is closed to new replies.