Adding the dynamic format icon or "icon-post-format icon-picture" to all images

Keith Lucas
asked 11 years ago

I love this them guys!
My client is asking to expend the use of the “format” i.e “icon-post-format icon-picture” – that’s the small icons that show up in the top left corner on each image on the category pages (http://www.ncfyi.com/category/news/).
Q: How can I add the same dynamic icons to all the images throughout the site

Thank you!
Keith Lucas

Keith Lucas
replied 11 years ago

I have a demo with the client next Tuesday (02/18/2014). I really need to show this icon on the home page images (http://www.ncfyi.com).
Thank you!!

Keith Lucas
replied 11 years ago

Can I please get an answer to the outstanding issue?

Keith Lucas
replied 11 years ago

Can I please get an answer to the outstanding issue?

3 Answers

Wilfred
answered 11 years ago

Hello Keith Lucas.
To resolve this issue please follow my instruction here:
1. Go to Dashboard / Appearance / Customize / General Settings , and add this code below to custom wp_head:

<style>
.alignright,
.alignleft,
.alignnone,
.aligncenter {
position: relative;
}
.icon-post-format-custom {
top: 6px;
}
</style>

2. Go to Dashboard / Appearance / Customize / General Settings , and add this code below to custom wp_footer:

<script>
jQuery(function($){
$('img[alt*=icon-]').each(function(){
 var iconClass = $(this).attr('alt'),
 icon = '<i class="icon-post-format icon-post-format-custom ' + iconClass + '"></i>',
 align = ['alignright','alignleft','alignnone','aligncenter'];
 for (var i = 0; i < align.length; i++) {
 if ( $(this).hasClass(align[i])) {
 $(this).wrap('<span class="'+ align[i] +'"></span>').removeClass(align[i]);
 }; 
 };
 $(this).after(icon);
 });
});
</script>

3.Add icon to image:
– You can find icon in : http://fontawesome.io/3.2.1/icons/
– Add name of icon to Alt text.

Hope this helps.

Keith Lucas
answered 11 years ago

Thanks you very much, However, one issue see image. The icon is showing up in the menu fly down lists.

Keith Lucas
replied 11 years ago

Here is the the site again (http://www.ncfyi.com/)

DominicStaff
answered 11 years ago

Hi Keith !
Please add the following code to the “Header Code”

<style>
.subcat .icon-post-format:before {
    font-size: 13px;
}
.subcat .icon-post-format {
    height: 25px;
    left: 170px;
    line-height: 23px;
    width: 25px;
}
</style>

Hope this helps !