Posts Tagged ‘img src’

15 free round social media icons with a fold

Simple Round Social Media Icons with a Fold

15 free social media icons with a fold 15 free round social media icons with a fold imageDescription

The Simple Speech Bubble Social Media Icons are a free collection of popular social media icons, designed to be used on your website or web application. This collection of 15 common social networking websites is intended to be a series of simple, easy to integrate icons.

Installation

To install these icons onto your website, upload the complete installation folder to your website image hosting directory. You may then include any image or size for your website needs.

For example, place the following code on your web page:

<img src=’http://[YourWebsiteAddress]/images/15 free social media icons with a fold/blogger-32.png’ />

License

This artwork is free artwork; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. Please leave this readme file unmodified, as recognition to the original artist.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this artwork; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Shameless Self Promotion

If you’ve enjoyed this series of graphics please visit my website at http://www.thisismyurl.com or follow me on Twitter to learn about more free icon sets in the future.

download file Easy Technorati Tags for WordPress

15 free speech bubble icons for popular websites

Simple Speech Bubble Social Media Icons

15 free social network speech bubble logos 15 free speech bubble icons for popular websites imageDescription

The Simple Speech Bubble Social Media Icons are a free collection of popular social media icons, designed to be used on your website or web application. This collection of 15 common social networking websites is intended to be a series of simple, easy to integrate icons.

Included in this set are Blogger, Delicious, Digg, Facebook, Flickr, Google, MySpace, Reddit, RSS, StubleUpon, Technorati, Twitter, WordPress, Yahoo, YouTube.

The files come in 128, 64 and 32 pixel versions ideal for most websites.

Installation

To install these icons onto your website, upload the complete installation folder to your website image hosting directory. You may then include any image or size for your website needs.

For example, place the following code on your web page:

<img src=’http://[YourWebsiteAddress]/images/social-media-icons-speech-bubbles/blogger-32.png’ />

License

This artwork is free artwork; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. Please leave this readme file unmodified, as recognition to the original artist.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this artwork; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Shameless Self Promotion

If you’ve enjoyed this series of graphics please visit my website at http://www.thisismyurl.com or follow me on Twitter to learn about more free icon sets in the future.

download file Easy Technorati Tags for WordPress

Simple social media icons for your website

15 Simple Square Social Media Icons

15 free square social media icons Simple social media icons for your website imageDescription

The Simple Square Social Media Icons are a free collection of popular social media icons, designed to be used on your website or web application. This collection of 15 common social networking websites is intended to be a series of simple, easy to integrate icons.

Included in this set are:

  • Blogger  Logo
  • Delicious Favicon
  • Digg Icon
  • Facebook Logo
  • Flickr Graphic
  • Google Favicon
  • MySpace Icon
  • Reddit Logo
  • RSS Graphic
  • StubleUpon Favicon
  • Technorati Icon
  • Twitter Logo
  • WordPress Graphic
  • Yahoo Favicon
  • YouTube Icon

 

Installation

To install these icons onto your website, upload the complete installation folder to your website image hosting directory. You may then include any image or size for your website needs.

 

For example, place the following code on your web page: 

<img src=’http://[YourWebsiteAddress]/images/social-media-icons-square/blogger-32.png’ />

License

This artwork is free artwork; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. Please leave this readme file unmodified, as recognition to the original artist.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this artwork; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Shameless Self Promotion

If you’ve enjoyed this series of graphics please visit my website at http://www.thisismyurl.com or follow me on Twitter to learn about more free icon sets in the future.

download file Easy Technorati Tags for WordPress

How to center an image with CSS

I had a funny problem the other day when I was rebuilding my portfolio, I’d completely forgotten how to center an image using CSS. What I wanted to do was align my portfolio piece images to the center of the screen but regardless of how hard I tried they kept ending up on the left.

girls are evil left How to center an image with CSS image

This is the default position for an image of course, so I wasn’t too concerned about it. If I wanted to ensure that it was always on the left I could of course always add the following code to my CSS file:

[source lang='css']img {
float: left;}[/source]

This would ensure that my image not only aligned to the left but also allowed text to wrap around it’s right hand side. If I wanted to only align the image to the left, without allowing wrapping text I would add:

[source lang='css']img {
float: left;
clear: both;}[/source]

Or if I wanted to do exactly the same thing to the right, I would use the following CSS code:

[source lang='css']img {
float: right;
clear: both;}[/source]

girls are evil right How to center an image with CSS image

Right and left alignments in CSS are really easy, but what about centering the content? If I was a lazy web designer, I could always use HTML to center the image but that’s a bad practice to get into. HTML is designed to publish content, not format it. 

[source lang='html']

 How to center an image with CSS image
[/source]

Since the center tag is used to format the appearance of HTML I try to avoid it, which turns me back to CSS (Cascading Style Sheets) to center my content.

girls are evil center How to center an image with CSS image

Generally in CSS if you want to center something you simply set the left and right margins, if you don’t know the width of your object you can specify it in the CSS but in my case each portfolio piece width is different so I needed to be more generic.

[source lang='css']img {
margin-left: auto;
margin-right: auto;
display:block;}[/source]

The trick (if it really is a trick) is to include the display:block line. As we all know (cough), HTML elements are made up of two types of objects. The block objects such as <p>, <h1>…<h6>, <div>,<ul> ect. and inline objects such as <strong>, <b>, <em>, <i> etc., the <img> tag is by default an inline object which means that web browsers do not automatically attempt to associate a buffer for the object.

Since the <img> tag does not have a pre-existing space or area, it can not be centered in an area until you instruct the web browser to assign it an area. For example if you wrapped the image in a <div> or <p> tag, you could text-align the <p> or <div> tag as such:

[source lang='html']

 How to center an image with CSS image

[/source]

[source lang='css']#centerme {
text-align: center;}[/source]

This example works because the <div> tag is a block and therefore the web browser already knows it has a space it can occupy but if you don’t want to clutter your HTML with unnecessary <div> tags, you can simply use the CSS display:block; property to instruct web browsers to treat the <img> tag as a block and accomplish much the same trick.

Happy coding!

Show both links and pictures in WordPress wp_list_bookmarks()

showingbothlinksandpics 153x300 Show both links and pictures in WordPress wp list bookmarks() imageAs some of you may have noticed, I updated the design for my site this week. It was a pretty major overhaul of the basic code, although it is still 100% WordPress. The upgrade that I’ve had the most messages about is my links list at the bottom of the page. It uses the standard WordPress Links list with a few minor scripting changes.

By default, WordPress wp_list_bookmarks() will display either the graphic or the title of your link but not both. If there is a graphic image set, it will simply ignore the title and output only the graphic. If no graphic is present, it will only output the text. Not exactly what I wanted.

What I wanted was what Jeremy had. So I set about trying to find the code to do this in WordPress only to find out that it simply didn’t exist. What I did find was a lot of people grumbling about it, so  I fixed the problem using WordPress’s built in get_bookmarks() function.

Here’s what I did:

<strong>What I’m Reading</strong>
<ul><?php 

$linklist = get_bookmarks(‘category=70′); 
foreach ($linklist as $site) { 
echo “<li>”;
if (strlen($site->link_image)>2) {
echo “<span class=’linkimage’>”;

echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_description.”‘ rel=’me’><img src=’”.$site->link_image.”‘ alt=’”.$site->link_name.”‘/></a>”;
echo “</span>”;

} else {
echo “<span class=’linkimage’></span>”;
}

echo “<span class=’linkname’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_name.”‘ rel=’me’>”.$site->link_name.”</a>”;
echo “</span>”;
echo “</li>\n\r”;
}
?></ul>

For those of you who know PHP what I did was pretty simple but for the rest of you, here’s the basic breakdown:

$linklist = get_bookmarks(‘category=70′); 

Get the values of category #70 (I only wanted those links) and load them into a variable.

foreach ($linklist as $site) { … }

Loop through the variable.

if (strlen($site->link_image)>2) { … }  else { … }

If the link_image value (that’s where the image is stored) has a value of more than two characters, do this. Otherwise, do something else. For the record, sometimes the value returned a false positive when testing for isset() so I choose to do a strlen() instead.

echo “<span class=’linkimage’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.

$site->link_description.”‘ rel=’me’><img src=’”.$site->link_image.”‘ alt=’”.$site->link_name.”‘/></a>”;
echo “</span>”;

The code above displays a <span> tag. I repeat the process if there’s no image found using an empty <span> tag to keep the text alignment appropriate.

echo “<span class=’linkname’>”;
echo “<a href=’”.$site->link_url.”‘ title=’”.$site->link_name.”‘ rel=’me’>”.$site->link_name.”</a>”;
echo “</span>”;
echo “</li>\n\r”;

Finally, I display another <span> called linkname which stored the text based hyperlink to the site. 

That’s all she (actually he) wrote … do you have any suggestions how to improve this code? Let me know and I’ll owe you a pint. Also, if you use this code please post a link to your website below so that I can see it in action. Thanks.