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

Keith Lucas
asked 9 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 9 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 9 years ago

Can I please get an answer to the outstanding issue?

Keith Lucas
replied 9 years ago

Can I please get an answer to the outstanding issue?

3 Answers

Wilfred
answered 9 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 9 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 9 years ago

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

DominicStaff
answered 9 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 !