Link post format

Hello,

I want to make use of the “Post Format” options, namely the “Link” option.

This is so I can basically put links in amongst my blog as examples of work I’ve done.

Can anyone advise how I can set this up within the Sparkling theme? At present, selecting “Link” as the post format makes no difference.

Hi @jdgmedia,

I hope you are well today and thank you for your question.

This is so I can basically put links in amongst my blog as examples of work I’ve done.
I am not sure exactly what you are trying to achieve with link post format posts instead of directly adding links so could you please describe it a bit more in detail so that i can help you to achieve it?

Do you want to pull URL saved in the post content of link post format and link your post title directly to an external page to this URL when the post is listed on your blog page, instead of forcing users having to visit a single post, then following the link?

Please advise.

Kind Regards,
Movin

Hi Movin,

Thanks for your reply. I’ve managed to sort it myself!

Thanks
James

Hi James,

Awesome great to see you got that sorted.

Please advise if you have more questions.

Have a fantastic day!

Cheers,
Movin

Hi Movin,

Frustratingly, I’ve overwritten my work over the years and I can’t remember how I did this!

My site is jdgsport.com.

Basically, when I had something set as a “link” format previously, it would appear with a green background and a slightly different format on the homepage (e.g. there would be a smaller square thumbnail image floating left, rather than the big image on the other stories).

I then used to link it directly to an external site (though I’m not necessarily bothered about that happening again)

Can you advise?

You can use that option from edit post screen as shown in the attached screenshot.

Yes sorry - I’m aware to do that.

However, it doesn’t appear to make any difference to the front end of my site?

If you share me the screenshot or page URL displaying how you want it to display then i can help you to achieve it.

It was simple a green background, with a square thumbnail floating left, the title and excerpt to the right.

Looking at the wayback archive machine you can see sort of what it was like: JDG Media – Digital – Sport – Business – by James Gordon

So I have this style set up in CSS…

.format-link { background-image: url(/web/20160110111209im_/http://www.jdgmedia.co.uk:80/wp-content/themes/sparkling/link.png); background-repeat: no-repeat; background-position: right top; background-color: #b0d337 !important; margin-bottom: 50px; padding: 30px 0px; }

The actual HTML around a link format article on the homepage would have been…

<article id="post-1243" class="entry post-1243 post type-post status-publish format-link has-post-thumbnail hentry category-sport post_format-post-format-link"> <div class="container clearfix"> <header class="entry-title"> <div class="col-md-2"> </div> <div class="col-md-5"> <h2>Tough tackling Houston joins Vikings</h2><p><span class="posted-on"><i class="fa fa-calendar"></i> <time class="entry-date published" datetime="2015-12-01T22:07:15+00:00">December 1, 2015</time><time class="updated" datetime="2015-12-06T22:08:21+00:00">December 6, 2015</time></span><span class="byline"> <i class="fa fa-user"></i> <span class="author vcard">James Gordon</span></span></p><p></p><p>Widnes Vikings have beaten off competition from Super League and NRL clubs to sign forward Chris Houston from Newcastle Knights.</p><p></p> </div> </header> </div> </article>

Could you please share me the page URL from your site where it is displaying and tell me which post you have set to link format so that i can help you to achieve it?

OK, so check homepage www.jdgsport.com

the JDG Sport Shorts #3 article has been marked as post link format.

It’s only in the archive display and on the homepage that I want it to display different, the actual post view is fine as it is.

Please try using below custom CSS code.


.format-link {
    background-image: url("http://www.jdgmedia.co.uk:80/wp-content/themes/sparkling/link.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-color: #b0d337 !important;
    margin-bottom: 50px;
    padding: 30px 0px;}

.format-link .post-inner-content {
        background-color: #b0d337 !important;
}

Also please make sure that the image exists on the URL http://www.jdgsport.com/wp-content/themes/sparkling/link.png

That doesn’t move the image as previous though? I gather I can do things in the CSS to change the styling - but I feel that maybe I edited a theme file to enable me to get a thumbnail image floating to the left?

To float image to the left please use below custom CSS code.

.format-link .blog-item-wrap > a {
float: left;
width: 50%;
}

.format-link .blog-item-wrap > .post-inner-content{
float: right;
width: 50%;
}

.format-link {
overflow: hidden;
}

This doesn’t quite do what I’d hoped.

Is there not a file within the theme that I need to create/edit to have more control over the post link format?

There isn’t any but you can copy the file content-video.php in the directory /template-parts/ and rename it to content-link.php

Then you can edit the code of file content-link.php to whatever you want to.

Will this impact on the full post only though, and not how it appears on homepage/archive pages?

It will impact homepage/archive pages and not full post only. To impact full post only and not homepage/archive pages you have to edit the /template-parts/content-single.php file.