246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en-GB">
|
||
<head>
|
||
<title>Create a Block of Social Media Icons using CCK, Views and Nodequeue | Oliver Davies</title>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2010/06/23/create-block-social-media-icons-using-cck-views-and-nodequeue/">
|
||
<meta property="og:title" content="Create a Block of Social Media Icons using CCK, Views and Nodequeue"/>
|
||
|
||
|
||
|
||
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/me-precedent.jpg"/>
|
||
<meta property="og:image:height" content="327"/>
|
||
<meta property="og:image:type" content="image/jpg">
|
||
<meta property="og:image:width" content="327"/>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/main.css">
|
||
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
|
||
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
|
||
</head>
|
||
<body class="">
|
||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
|
||
</div>
|
||
|
||
<div id="navbar" class="collapse navbar-collapse" role="navigation">
|
||
<ul class="nav navbar-nav">
|
||
<li class="">
|
||
<a href="/">About</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/experience">Experience</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/testimonials">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/talks">Talks</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/blog">Blog</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/contact">Contact</a>
|
||
</li>
|
||
</ul>
|
||
</div> </div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<main class="col-md-9">
|
||
<h1>Create a Block of Social Media Icons using CCK, Views and Nodequeue</h1>
|
||
|
||
<p class="posted text-light">23rd June 2010</p>
|
||
|
||
<p>I recently decided that I wanted to have a block displayed in a sidebar on my site containing icons and links to my social media profiles - <a href="http://twitter.com/opdavies">Twitter</a>, <a href="http://facebook.com/opdavies">Facebook</a> etc. I tried the <a href="http://drupal.org/project/follow">Follow</a> module, but it lacked the option to add extra networks such my <a href="http://drupal.org/user/381388">Drupal.org</a> account, and my <a href="http://oliverdavies.co.uk/rss.xml">RSS feed</a>. I started to create my own version, and then found <a href="http://www.hankpalan.com/blog/drupal-themes/add-your-social-connections-drupal-icons">this Blog post</a> by Hank Palan.</p>
|
||
|
||
<p>I created a 'Social icon' content type with the body field removed, and with fields for a link and image - then downloaded the favicons from the appropriate websites to use.</p>
|
||
|
||
<p>However, instead of using a custom template (node-custom.tpl.php) file, I used the Views module.</p>
|
||
|
||
<p>I added fields for the node titles, and the link from the node's content. Both of these are excluded from being displayed on the site. I then re-wrote the output of the Icon field to create the link using the URL, and using the node's title as the image's alternative text and the link's title.</p>
|
||
|
||
<p>I also used the <a href="http://drupal.org/project/nodequeue">Nodequeue</a> module to create a nodequeue and arrange the icons in the order that I wanted them to be displayed. Once this was added as a relationship within my View, I was able to use node's position in the nodequeue as the sort criteria.</p>
|
||
|
||
<p>To complete the process, I used the <a href="http://drupal.org/project/css_injector">CSS Injector</a> module to add some additional CSS styling to position and space out the icons.</p>
|
||
|
||
<p class="tags">
|
||
Tags:
|
||
<a href="https://www.oliverdavies.uk/blog/tags/drupal-planet">drupal-planet</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal-6">drupal-6</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal">drupal</a>, <a href="https://www.oliverdavies.uk/blog/tags/views">views</a>, <a href="https://www.oliverdavies.uk/blog/tags/nodequeue">nodequeue</a>, <a href="https://www.oliverdavies.uk/blog/tags/oliverdavies.co.uk">oliverdavies.co.uk</a> </p>
|
||
<div class="post-pager is-flex">
|
||
<div class="is-half">
|
||
<a href="/blog/2010/06/02/improve-jpg-quality-imagecache-and-imageapi/">
|
||
« Improve JPG Quality in Imagecache and ImageAPI
|
||
</a>
|
||
</div>
|
||
|
||
<div class="is-half text-right">
|
||
<a href="/blog/2010/06/25/10-useful-drupal-6-modules/">
|
||
10 Useful Drupal 6 Modules »
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="about-author">
|
||
<h2>About the Author</h2>
|
||
|
||
<img src="//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
|
||
|
||
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="col-md-3">
|
||
<div class="panel badges text-center">
|
||
<a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="is-block">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/da-individual-member.png"
|
||
alt="Drupal Association Individual Member"
|
||
width="200"
|
||
/>
|
||
</a>
|
||
|
||
<div class="is-flex align-items-center">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-developer.png"
|
||
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
|
||
class="is-2"
|
||
/>
|
||
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-back-end.png"
|
||
alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge"
|
||
class="is-2"
|
||
/>
|
||
</div>
|
||
|
||
<a href="http://conference.phpnw.org.uk/phpnw17" class="is-block">
|
||
<img src="//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="availability panel panel-default">
|
||
<div class="panel-heading">Availability</div>
|
||
|
||
<div class="panel-body">
|
||
<p>
|
||
<i class="fa fa-thumbs-o-up text-warning"></i>
|
||
|
||
|
||
Currently have limited part-time capacity
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-thumbs-o-down text-danger"></i>
|
||
|
||
Currently no spare full-time capacity.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="latest-posts panel panel-default">
|
||
<div class="latest-posts__heading panel-heading">Latest blog posts</div>
|
||
|
||
<ul class="list-group">
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/07/13/publishing-sculpin-sites-with-github-pages/">
|
||
Publishing Sculpin Sites with GitHub Pages
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">13th July, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot/">
|
||
Introducing the Drupal Meetups Twitterbot
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">9th June, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/05/20/turning-drupal-module-into-feature/">
|
||
Turning Your Custom Drupal Module into a Feature
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">20th May, 2017</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div> </div>
|
||
<footer class="container">
|
||
<p class="copyright">
|
||
© 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||
</p>
|
||
|
||
<div class="meetups">
|
||
<h2>Things that I organise</h2>
|
||
<ul>
|
||
<li class="meetups--drupal-bristol">
|
||
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
|
||
alt="Drupal Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--drupalcamp-bristol">
|
||
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
|
||
alt="DrupalCamp Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--phpsw">
|
||
<a href="http://phpsw.uk" title="PHPSW">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
|
||
alt="PHPSW logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
|
||
|
||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
|
||
|
||
</body>
|
||
</html>
|