Sqsp Specialist inquiry - blog thumbnails and author pictures


Yeah, I'm available! smile

Please read www.cregox.com/your-home

Making the thumbnails can be done with AJAX, here's what I'd use: http://answers.squarespace.com/questions/17205/how-can-i-make-an-ajax-request-in-yui3/17206

As for adding an author photo it might be trickier, but no too much: http://answers.squarespace.com/questions/941/how-can-i-pull-the-author-avatar-image-into-a-blog-post

I don't think squarespace stores author pictures anywhere accessible, so we might need to manually upload them as advised above.



Hey, I've expanded the scope a bit. Would you mind taking a look and letting me if it's still a-go? Or if there's questions?

Here's the new design, with inspiration from buzzfeed. There's 2 images, one with notes on styling, the other as is.



Hmmm.... not sure if that link came through. Anwyay it's

imgur with the following url /Odh1sWF,bEkqmci#1


I've fixed it for ya, using http://i.imgur.com/bEkqmci.png

That's the second link imgur offers, on the right.

Yes, it is. Much more complicated, but I sure can do.

Maybe it would be better going on developer mode, but it's probably fine to just go ahead with scripts. And if it does become a pain to maintain in the future, then you reconsider. wink

I was writing a big text explaining more about that, below. Now I think it's unnecessary, though I'll keep it as reference.

That's a lot of modifications, which I can make with javascript and it will work fine. But adding script on top of a template to modify its layout is inherently a hack. And, as such, the bigger it becomes, the worst it is to maintain. That means, when squarespace upgrades and template updates, if you decide to change templates or if you want to just modify what have been done. I know right now you might have your mind set and that doesn't seen much to worry about, but it will be.

I can see this script might become quite big... So maybe you should consider going developer mode and making your own template. Which I can help with as well. The downside here is it won't get automatic updates from squarespace, but you won't need to "change templates" anymore since the template is all yours and open to easily customize.

Do weight if you think it's more important to customize it at your will or staying automatically up to date. That's actually a hard choice to make even with experience, but it's a choice only you can make.


Cool. How long do you think it will take and how much will it cost?


That will depend on when you make the first payment. Soon I will update my prices. If you do it before Wed 18th I can keep the current table for ya.

It should take me 8h at most.

So, minimum first payment is U$ 217 and U$ 385 total.

Later, it will be U$ 492 upfront and U$ 984 total.

In both cases if I take less time I will charge less. And if I take more time I will only charge more if it's relevant and we would renegotiate but I'd still deliver something satisfactory.

Time frame is at most 2 weeks after payment.

Moving this project along

That sounds doable. I can do the first payment today. Any chance you could deliver a bit earlier, like in a week or so? We have an event coming up.


There is a chance. But being a lot to do, I can't give you certainty. Part of my job includes learning upon unpredictable events. It happened about 20% of times this year, and that's why I give a large time frame estimate so I can be never late. It have been working at all times. smile


Ok, thanks for the considering it.

So what are the next steps to getting started?


Also I have one minor task to add as the first thing to do, if possible.

Could you please add our logo to the upper left corner of the /signup page? It's a sqsp cover page and unclear how users can get to rest of the site. The logo should link to the root which is the blog index.



Yeah, no problem. That is simple enough. You can do it right now if you want.

Just add something like this to your cover page header injection:

<div class="cover-logo" style="position:absolute;margin:1em;z-index:1;">
  <a href="/">
    <img src="http://static1.squarespace.com/static/50f48a2be4b02681d3523955/t/54f2c023e4b0565a8a780f5a/1426387386220/?format=400w">

Do replace the img src to your desired image (I couldn't find it easily and ready). If you don't have it yet, you can upload it: http://help.squarespace.com/guides/uploading-and-managing-files

To begin I just need admin access to the site and the upfront payment. smile


Hi there, were you still interested in this project? I offered to get started last week, but you said your prices have gone up now?


Of course I'm interested! Were you waiting the date just to pay me more? stuck_out_tongue

Yeah, prices gone up. I couldn't keep up the business on the old table, so I have to either try this or shut it down.


I told you I was ready to pay on Saturday and did not hear anything back. I was awaiting payment instructions.


No problem, I can still keep you on the old price, since I do have some availability by the end of the month.

I'll send you an invoice for the minimum first payment. You could also choose other methods here: www.cregox.com/pay

As soon as you make the payment and give me admin access I can get you on my queue to start working.

The only thing is I've got a big project next week so I may only be able to begin on the next one.


Great, thanks. I've just paid the invoice. Confirmation #4W5778126R188852T

I've also added [email protected] as an admin on the site.

By the way, I just noticed you provided code for the cover page logo earlier. I somehow missed it in the Discourse threads and emails. Anyway, thank you. I added it and it looks great on desktop, but it does lay over the text on mobile.


Got the payment and the admin permission ( no need to forward the email stuck_out_tongue_winking_eye ).

And I just noticed I never provided a straight link to payment options. That's yet another thing I should be always doing... Time to make a checklist! smile

Making adjustments such as responsive design and "working on mobile" is a lot of my work. Meaning there's no "one solution for them all" or very simple ways to handle it... Although sometimes it does. I'll check on that later on.


Okay, done most of the work, I hope. Please check http://www.eventgeek.com/test

I thought fixing the thumbnail image size would be a bad idea for responsiveness, so I just ignored that suggestion. I hope you like it. wink

Basically it's a Custom CSS along with quite some scripting, which can be added to the blog page code injection or global code injection, as you prefer. The files are on github and below.

Here's the CSS:

article.photo-added {
  h3 {
    margin-top: 1em;
  header span.article-byline {
    display: block;
    .author {
      a {
        font-size: 22px;
        color: #29CC71;
      .bio {
        font-size: 18px;
      img {
        float: left;
        height: 50px;
  .post .excerpt-thumb.big-thumb {
    float: initial;
    width: 100%;
    * {
      position: initial !important;
      padding-bottom: 0 !important;
    img {
      width: 100% !important;
      height: initial !important;
  .shareaholic-canvas:before {
      padding: 13px;
  .shareaholic-canvas {
    display: -webkit-box;
    .shareaholic-share-buttons-container.wrapped .shareaholic-ui {
      display: block;
      ul.shareaholic-share-buttons {
        margin-bottom: 0 !important;
  footer {
    display: none;

And here's the javascript (mixing YUI with jQuery):

<script name="blog author photo" author="cregox.com">
    $('.content-wrapper .post').each(function(){
      var $thumb = $(this).find('.excerpt-thumb').addClass('big-thumb');
      var imgSrc = $thumb.find('img').attr('src');
      imgSrc = imgSrc.split('?')[0] + '?format=900w';
      $thumb.find('img').attr('src', imgSrc);
      var $h3 = $(this).find('.body.entry-content>h3')
      if ($h3.length) {
        $h3.insertAfter($(this).find('header h1'));
      var $body = $(this).find('.body.entry-content');
  function ajaxRequest () {
    Y.io('/test?format=json', {
      on: {
        success: function (x, o) {
          var parsedResponse;
          try {
            d = Y.JSON.parse(o.responseText);
          } catch (e) {
            console.log("JSON Parse failed!");
          for (var i = 0; i < d.items.length; i++) {
            var imgString = '<img class="avatar" src="'+ d.items[i].author['avatarAssetUrl'] +'">';
            var bioString = '<div class="bio">'+ d.items[i].author['bio'] +'</div>';
            Y.one('article#article-'+ d.items[i].id +' span.author a').prepend(imgString).append(bioString);

  Y.use('node', function() {
    Y.on('domready', function() {


Allow me just add this to leave it "out here". Once I did change the prices, I also started counting differently from this.

You see, the whole point for raising it was getting less false quote requests (which worked great so far) and balancing out the minimum I need to make the business work.

In other words, if I were to charge you on today costs, it would be U$ 321 upfront and U$ 690 maximum total expected, so actually closer to double than triple.

As for the charging on this job, in fact...

So far, I did take less than 8 hours. So, if we get to a final settlement without many changes, it's certain I'll be able to charge less than the agreed maximum of U$ 385. smile


Hi Caue,

This looks really great. Thank you so much for your integrity in dealing with the pricing too. I really appreciate it.

No problem about the thumbnail. If I upload an image that's 840x440 it will appear at those dimensions, right?

I forgot to mention previously, but please maintain the footer on the posts (and excerpts). So the post footer should continue to have the horizontal line, date, tags and sqsp share buttons.

What are the next steps? Will you add the styling to the blog post page next?

Also I noticed that the pages are loading really slowly, though that might be a shoddy internet connection on my end and/or the third party js snippets.




I forgot to say the "author title" would be really hard to come up with something... So I got the only thing available, which was author's bio.

And the image width is set to maximum and so no, it won't appear as the file size. But the whole blog width have a max-width of 1140px, so the image will also be restricted to that only and given the current "one sidebar" layout it will make the image be a max of 840 by coincidence ( unless that's where you got the number from stuck_out_tongue ). We could add a max-width to the image, if you want, it's actually as straight forward as adding max-width: 840px on the .post img Custom CSS.

The current "footer" is actually a redundant header... But maybe I'm getting too technical. I've just changed it to the complete footer instead. And I can make it work on the whole website (so to any blog you make) anytime you want. I'm not sure this new design mock up is fine by you, though. Please let me know.

And I don't experience any slowness, in fact it loads quite fast here. It's definitely your internet connection, though that doesn't mean only exactly "in your end". It could be even a DNS issue on your internet provider, which usually don't last long.