How To Create An Animated Gif Featured Image on WordPress

I am working on an email series for theFEED users of helpful tips they can apply to their mobile site!
 
In the email series one of the emails will cover how create an Animated Gif Featured Image on mobile so I am creating this blog post for further information and to help others who are interested in creating the same effect!
 
Here is the animated gif I made using, gifmaker.me. I took 5 shoes from Nasty Gal Shoe Cult as an example.
 
Animated Gif Featured Image nastygal-shoecult
 
Out the box, WordPress doesn’t allow you to have featured images as animated gifs because your theme uses a resized version of the actual image you upload, so it’s not actually using the original animated gif you uploaded and therefore it becomes a static gif.
 
The workaround that you can do is upload an animated gif as the FIRST image you upload through the WordPress Media Uploader from within the specift blog post edit screen. Then don’t upload a featured image through the official setting in WordPress.
 
Featured Image
 
This way theFEED will take the first image an apply it as the blog post featured image and because it will grab the original it will stay as an animated gif. BOOM!
 
This could work for desktop blogs as well if you use a plugin like Autoset Featured Image or Automatic Featured Image Posts.
 
Here is what this blog post looks on mobile. Cool huh?

 
nastygal-shoecult-iphone
 

chloe-signature

 
 

The Blogger Freak Out Email: Part Two // WordPress Timezone

You know how I said last week that I get these blogger freak out emails which make it seem like the world is ending? I got another one today, courtesy of Larissa aka Larz of LivinLikeLarz.com. Don’t get me wrong I love Larz, she is only 19 years old and she is achieving ALOT in the blogging world, but she freaked out today because her blog post wouldn’t publish. I guess it was actually a big deal because it was for Teen Vogue and Sephora so maybe the freak out was warranted!
 
Nonetheless she asked:

 

livinlikelarz
 

The Question: My blog post was scheduled but never posted on time, so I went in to manually publish it and every time I try to, it reverts back to being scheduled again! What’s going on?

 
 
I have heard this issue a few times and I get that it is frustrating. Luckily it is an easy fix.
 
I am not 100% as to why it happens but WordPress timezone settings changes sometimes, maybe because you are in a different location then when you first set your WordPress site, actually that is probably why. If/When you ever have this issue, have a look in your settings, at the timezone WordPress says you are currently in. If it is wrong, then choose where you are from the dropdown or manually set it from the UTC options.
 
This is a screenshot from my WordPress timezone settings. You’ll notice, because of daylight saving hours, it says my current timezone is an hour before the time actually is. What I have done here is chosen UTC+1 so my WordPress time is London time right now.
 
wordpress timezone
 
That’s it, if you go back to the blog post that would not publish, it will now!

 

chloe-signature

 
 

Why your Image File Size is Slowing Down Your Blog!

The other evening, I called Las Vegas (well not the actually city!) to speak to the lovely Ashley, who is one half of TheAllureAvenue.com. She blogs with her Las Vegas born bestie Kristen which I thought was so cool – to girls on a blogging mission! I called Ashley to help her set up theFEED on their blog mobile site and whilst doing so, Ashley asked me a question about their desktop blog site speed.
 

allureavenue

The Question: Why is our site loading so slowly?! We think it’s our slider but we love it so much and don’t want to get rid!

 

If you go on their blog you’ll notice they have an image slider at the top of their site. This slider takes a while to load and because it takes up most of the page it appears to a reader that the whole site has not loaded even though if you scroll down you’ll notice the rest of the blog has already loaded! It is not necessarily the case that the girl’s entire site is loading slow just the slider which could cause a reader to leave the site and we for sure don’t want that!
 
(the page when the slider is loading)
 
allureavenue
 
(the page when the slider has loaded)
 
allureavenue
 
I did a little investigating, for the girls and the reason why Ashley and Kristen’s image slider is loading so slowly is because the images they are uploading to it are way way way way WAYYYYYY to big. I mean WAY.
 

Let me break it down:

 
Ashley and Kristen’s image slider dimensions are 920px by 500px however the images they are uploading for it are MAAAWHOOOISIVE! The image size they are uploading is 4752px by 3168px. Don’t worry girls this is a common mistake, you’ve gone out and done a lovely photo shoot then uploaded your images straight from your digital camera. This is a big no no. Before uploading to wordpress you should use an Image Optimizer to reduce the dimension size e.g. to 920px by 500px and image file size so it’s alot smaller.
 
The first image in the slider, on girl’s blog is the one below. The image as is, uploaded to their slider is 2MB, which if you think about it logically, there are 9 images in the slider therefore loading about 18MB in total which is Bananas with a capital ‘B’! I took this image and ran it through Photoshop’s Image Optimization Tool (alternative online version can be found here) and changed the dimensions to fit the slider. I managed to reduce this image file size down to 569KB. This is a image file size reduction of 75% !
 
allureavenue
 
If Ashley and Kirsten reduce all the image file sizes, in total the slider will load 4.5MB instead of 18MB which will, in turn, load a lot quicker.
 
The moral of this story is to Optimize (with a capital ‘O’ for effect =]) your photo’s before uploading them to your blog, not just for slider’s but for blog posts as well!
 
chloe-signature

 
 
 

Blogger Question: How To Add Pinterst, Instagram and Twitter Social Tabs to Facebook page

I had a late night call yesterday, nothing seedy, with the hilarious Alyssa of AlistedBlog.com so I could help her set up theFEED on her blog mobile site. It was late because of the time difference, Alyssa is based in NY and I’m based in London Town so what is the evening for her is the middle of the night for me! This doesn’t bother me though because I spend more time speaking to people in America than I do in England, my body clock is completely off! Or on, depending how you look at it!

 

Whilst setting up theFEED for Alyssa, apart from the jokes she was giving me, she asked a question about Facebook tabs so I made a note of her request and I am making a tutorial on TheFashionTechnologist to help her and anyone else with this issue.

 

Screen Shot 2014-06-21 at 12.33.27

The Question: How do I create social tabs on my blog’s Facebook page?!

 

I am going to take you through adding three different types of Social tabs (Pinterest, Istagram and Facebook), so you can pick and choose which one’s you want for your own Facebook page.

 

Pinterest

Go To This Link: https://apps.facebook.com/pinterest-tab/

Click on the blue button named “Install Application”

 

facebook pinterest screenshot

 

Choose the page you would like your Pinterest Tab to show then click “Add Page Tab”

 

facebook pinterest screenshot

 

Facebook will then redirect you to your new Pinterest Tab. You’ll notice the pin’s that show automatically are general, to have your pin’s show, from the administrator panel type in your Pinterest username and from the dropdown tab choose “User Pins” – then “Save Settings”

 

facebook pinterest screenshot

 

The page will refresh and show your user pins!

 

facebook pinterest screenshot

Instagram (Type 1)

Go To This Link: http://apps.facebook.com/instagram_feed/

Give the application to your Facebook public profile

 

facebook instagram screenshot
 
facebook instagram screenshot

 

Choose the page you would like for your new Instagram Tab, then click “Add Instagram feed tab”

 

 

Facebook will redirect you to Instagram to enter your Instagram log in details.

 

facebook instagram screenshot

 

Authorize the app!

 

facebook instagram screenshot

 

The page will redirect you back to Facebook, to your new Instagram tab

 

facebook instagram screenshot

 

You can change the way your Instagram’s look by clicking on “Manage” -> “Customisation” and then configuring the options.

 

facebook instagram screenshot

 

facebook instagram screenshot

 

facebook instagram screenshot

 

 

 

Instagram (Type 2)

Go To This Link: https://apps.facebook.com/instatab/

Click on the blue button named “Install Application”
facebook instagram screenshot
Choose the page you would like your Instagram Tab to show then click “Add Page Tab”

facebook instagram screenshot

 

Facebook will then redirect you to your new Instagram Tab. You’ll notice the image’s that show automatically are general, to have your Instagram’s show, from the administrator panel type in your Instagram username  – then “Save Settings”

 

facebook instagram screenshot

 

The page will refresh and show your Instagram’s!

 

facebook instagram screenshot

 

Twitter (Type 1)

Go To This Link: http://iframehost.com/util/installtab/116943498446376

Choose the page you would like your Twitter Tab to show then click “Add Page Tab”

 

facebook twitter screenshot

 

Authorize the tab application!
facebook twitter screenshot

 

facebook twitter screenshot

 

Configure Settings then “Save Settings”

 

facebook twitter screenshot

 

Click “View Tab” to see what your new Twitter tab looks like:
facebook twitter screenshot

 

Twitter (Type 2)

Go To This Link: https://apps.facebook.com/twitter-tab-app/

Click on the blue button named “Install Application”

 

facebook twitter screenshot

 

Choose the page you would like your Twitter Tab to show then click “Add Page Tab”

 

facebook twitter screenshot

 

Facebook will then redirect you to your new Twitter Tab. You’ll notice the tweet’s that show automatically are general, to have your tweet’s show, from the administrator panel type in your Twitter username and from the dropdown tab choose “User Pins” – then “Save Settings”

 

facebook twitter screenshot

 

The page will refresh and show your tweets!

 

facebook twitter screenshot

 

Done, Done and DONE! I’ll make a tutorial on creating a rewardStyle shop page soonish =]

chloe-signature

The Blogger Freak Out Email! Resizing your affiliate ad banners

Resize Affliate Ads
 
Yesterday I got a panicked email, followed by a panicked text from my friend and blogger Diana of Trendbridged.com. I don’t like these emails! Not because I am being asked for advice, as you know I am always down to help a blogger out with tech help BUT I don’t like when the email makes it seem like the world is about to end. It’s not, everything is good, let’s calm down now. I’ve told Diana that if she continues to send me these panic emails I’m actually not going to help her anymore, think about it from my point of you, I nearly have heart palpations thinking something major is wrong and it really isn’t and well, I’m trying to live a very long and healthy life!

 

Diana’s Email:

 

Screen Shot 2014-06-21 at 12.33.27

Subject: I messed up my ad banner on the right sidebar

Body:

Can you please fix it for me please?

Pretty please!

This is the link for the banner ad.

It used to sit on the right sidebar as a widget- and now when I am adding the code- it just doesn’t scale right.

:(

 

What was happening was, the image in this affiliate ad code is wider than Diana’s sidebar, so when she pasted the code in a widget, it looked like it was jumping out of her sidebar.

 
trendbridged.com screenshot
 

 

The width of Diana’s sidebar is 222px, we know this because if you pretend to take a screenshot on a mac (CMD + CTRL + SHIFT + 4) you can use the crosshair cursor to measure the width of an element on your site. To make the ad image the same width as the sidebar we edited the img tag to include a width attribute with the value of 222px:

 

 

 

 

The final code looked something like this, you’ll notice the new width attribute on the img tag:
 

 

 

 
trendbridged.com screenshot
 

 

That’s it! Was hardliy earth shattering, life altering stuff, was it? =]
 

 

20140608-143232-52352488.jpg

 

 

 

 

Sunday Funday: How to create a hover effect on an image

hovergraphic-feat


I have got a fun coding tutorial for you today! Asked for by my Fashion Designer friend, Alice who is working on her own style blog. We were talking about #GIRLBOSS on the phone and obsessing over how awesome Sophia Amoruso is when she asked me how hard it was to recreate a cool User Experience effect she loves on the Nasty Gal blog – when you hover over their “Click To Shop” button it turns into a winking face. My dear Alice thought this would require some intense coding but I assured her it was super simple!


Nasty Gal

nastygal


If you, like Alice, think this is cool then here is how you can recreate this, yourself, on your own blog! For this tutorial, I have created a hover effect for the “30daysofcoding” banner on my desktop sidebar. Hover over it and you’ll see what I am talking about.


Here is the HTML for the “30daysofcoding” button:



And here is the styling (CSS) for the hover effect:

If you open the URL (http://thefashiontechnologist.com/wp-content/uploads/2014/06/hovergraphic.png) for the image I am using your your browser, you’ll notice it has both the natural and hover images in one file. This is a simple way to create the hover effect as all we are doing in our styling is moving the area of the image the user see’s when they hover over it, whilst hiding the rest!


For your own, you’ll need to change the following from the above code snippets:

  • The URL of the image you are using
  • The width, which needs to be the width of the part of the image you want to show
  • The same goes for the height
  • The hover background position to reflect the part of the image you want to show



That’s it! EasyPeasyLemonSqueezy (yup I typed that).


hovergraphic


Let me know how you get on.


chloe-signature




Disclaimer: This post is in no way affiliated with Nasty Gal, my friend asked me a code question so I delivered!

ps. I have removed my sidebar so this is no long there but works all the same!


Do It Like Refinery29: How to Create a Header Banner Ad Space in like 15 minutes

(blog)R29 Featured Image (1)


I was trolling through my favourite online fashion publishers this morning, as ya do and noticed a few of them had header banner ads. Okay, this wasn’t the first time I’d ever noticed this before but I thought it would be a cool idea to show you how to recreate this on your own blog.


r29 Blog Post


Your banner ad could be a graphic you’ve made yourself to promote one of your social networks, like what Refinery29 have done here. Or it could be a rewardStyle ad, a LikeToKnow.It ad, a google ad etc. You get my drift!


To create your header banner ad you’ll need to delve into the code of your WordPress (not on WordPress?) blog theme, and you can do this by going to Appearances > Editor.

Screen Shot 2014-06-12 at 11.59.08


The new page that opens up should be the code for the stylesheet for your current theme. DON’T FREAK IT OUT. Look to the right side for a file called Header (header.php). Every WordPress theme will have this file as it’s mandatory to get your theme to work. Click this file name.


Screen Shot 2014-06-12 at 12.22.08


In the new page you should have Header (header.php) at the top. Mine says “toolbox” before it because it is the name of my theme, your’s will say whatever your lovely theme is called.


Screen Shot 2014-06-12 at 12.06.35


We need to find the opening of the body tag, to do this use CMD + F (CTRL + F on non-mac users) to open your browser’s find box. Type the word “body” to be taken to the “body tag”.


Screen Shot 2014-06-12 at 12.12.17


Screen Shot 2014-06-12 at 12.12.58


Just below the body tag we will paste our code for the Banner Ad box (includes inline styling). You will need to replace the words PASTE AD HERE, with the code for your actual ad.




Et Volía! You are all set up to make that extra paper! It’s literally the easiest thing.


I have put a working example on TheFashionTechnologist.com desktop site if you want to take a peak-a-boo. I have placed in a Missguided rewardStyle banner ad in mine.


This is what mine code ends up looking like (includes inline styling):


Let me know how you get on!


chloe-signature

ps. Need your ad banner to change on refresh? Check out this tutorial


Disclaimer: This post is not affiliated with Refinery29 in any way, I’m just a fan.


3 Quick and Easy Code Snippets to take your blog to the next level!

20140609-142317-51797529.jpg

 

Happy Monday! If you are open to a productive week then I have something for you.

During our 30daysofcoding challenge we showed you how to make code changes to your blog YOURSELF! With proper guidance their are coding basics you can do to maintain and better your blog. Wouldn’t that be sweet instead of relying on someone else for every.little.thing?

If you agree, I have put together a list of three coding snippets that are really quick to add to your blog so you can get them up and running in no time at all!

They are as follows:

20140609-141642-51402677.jpg

1. To get true readings from your google analytics, you shouldn’t be tracking when you go on your OWN blog! It seems obvious but loads of bloggers don’t do it so you are in good/bad company!

Read this tutorial to find out how to fix this forever!

Find It Here

 

 

20140609-141754-51474704.jpg
2. I love Instagram and you probably do too. One awesome thing about it is the timestamps. E.g. 5 seconds ago or 12 minutes ago. This is effective because in this digital time we are so impatient and want content now now NOW! With this tutorial you can create this same effect on your own blog.

Find It Here

 

 

20140609-142009-51609068.jpg
3. The page a reader sees when they’ve gone to a page they thought existed but doesn’t is called a 404 page. A lot of the time bloggers don’t have anything going on on this page. This is a huge mistake! Reason being is that a reader may leave because they couldn’t find what they were looking for, and of course we want them to stay! This blog post instructs you on how to “jazz” up your 404 page.

Find It Here

 

That’s it! Let me know how you get on, or if you need any help working on these bad boys.

 

20140608-143232-52352488.jpg

 

 

 

rewardStyle Banner

Screen Shot

You may have noticed we have taken down our Christmas import.io banner, today we have replaced it with a rewardStyle banner, which we will update regularly.

 

rewardStyle is a company that allows publishers to get the credit they deserve when advertising products. For example, if you use rewardStyle and a visitor to your blog clicks on an item and then goes ahead and buy the item of clothing you (the publisher) will gain some commission.

 

Let’s get started!

 

Continue reading