QuickTip: Default Image

Although Connections does not support having a default image, this can easily be accomplished if the theme you’re using has a custom CSS area, which is a very common feature in themes now-a-days. And if your theme does not have a custom CSS area, you can use the Custom CSS Manager plugin. If you use the Custom CSS Manager plugin make sure to check out their video tutorial on adding custom CSS.

Here’s the CSS you’ll want to use:

div.cn-list span.cn-image-none {
	background-image: url("http://your-website.com/wp-content/uploads/path/to/the/image.jpg") !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover;
	/*border-radius: 50%; uncomment this line if you are using the Circled template */
}
 
div.cn-list span.cn-image-none span {
	display: none !important;
}

Of course you’ll want to change the URL in the above example to an image on your site.

Here’s a bonus tip…

You can use this trick to set a default image per category with this CSS:

div.category-slug span.cn-image-none {
	background-image: url("http://your-website.com/wp-content/uploads/path/to/the/image.jpg") !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover;
	/*border-radius: 50%; uncomment this line if you are using the Circled template */
}
 
div.cn-list span.cn-image-none span {
	display: none !important;
}

As before, you’ll want to change the URL to an image on your site. You will also have to change the category-slug to the category slug you want to set the default image. You can find the category slug on the Connections : Categories admin page.

And here’s a bonus, bonus tip! (double bonus on purpose)…

You can use use both of the examples above together. The first example would set the overall default image while the second would be used as a per category default image.

35 Responses to QuickTip: Default Image

  • Gary Smith

    That’s a great tip! Thanks…!!

    • Gary Smith

      I’m showing an image repeat?

      Would this work better?
      background-repeat:no-repeat;

      gs

      • Steven Zahm

        @Gary Smith

        Yep, you’re right! when I was testing the tip I was using that … I forgot to copy it into the post. I’ve updated the code above.

        Thanks!

  • Shala

    Hmm…thanks for the response & the codes, but it’s not working for me.  I’m very new to CSS (but I can follow directions! lol). I inserted and made the changes appropriate to my own url & slugs, but I don’t see an image.  Any thing I can check that I might be doing wrong?

    Thanks much!!

    • Steven Zahm

      @Shala

      Cool site!

      This tip probably isn’t working because you have disabled the output of the place holding image block. That needs to be on for this tip to work.

  • Shala

    Thanks!

    I’m not sure what that means, but I will try and figure it out : )

    • Steven Zahm

      @Shala

      Reply back with one of the shortcodes you’re using and I’ll reply back with the change you need to make.

  • Shala

    Thanks for the awesome/quick responses–I’m working on the site as we speak, so this is a big help!!

    Here’s the code to one of the pages:

    [connections template=cmap width=500 show_empty_categories=false image_fallback=none page_limit=7 str_home_phone=Phone str_home_addr=Address: str_note_hide=Close str_note_head='More Info:' str_note_show=More Info category=56 category_in=76 category_in=57 enable_category_by_root_parent=true]

    • Steven Zahm

      @Shala

      Just one change … remove the image_fallback=none option. Without the place hold block, the CSS in this tip will not work. Hope that make sense now.

      [connections template=cmap width=500 show_empty_categories=false page_limit=7 str_home_phone=Phone str_home_addr=Address: str_note_hide=Close str_note_head='More Info:' str_note_show=More Info category=56 category_in=76 category_in=57 enable_category_by_root_parent=true]
  • Shala

    Thanks Steve, appreciate the help, but for whatever reason (I can’t figure it out–I checked the settings and fixed the code) it just does not want to work. : (

  • Shala

    lol.  That’s because I actually uploaded those pics individually before I got tired of doing that and decided to ask if there was a better/more efficient way.

  • Travis

    Here’s the CSS I used with the Slim template. There was no span around the text so I had to make the color transparent and adjust a few other CSS styles to get it to work.

    .cn-left {
    width: 140px !important;
    }
    div.cn-list div.cn-image-none {
    text-shadow: none !important;
    color: transparent !important;
    width: 120px !important;
    height: 150px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: none !important;
    background-image: url(“/wp-content/images/default_directory_image.jpg”) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    }

    Hope it helps!

    • Travis

      I’m back :) The above works perfectly for the default, but if I add an image it gets cropped way to small. I went into the Settings and adjusted the Thumb size to 120 x 150, and it seems to be cropping it at the 54px default.

      The site url is http://mypowhatan.idtestsite.com/directory/. It will be password protected within a couple days.

      The CSS I’ve added thus far is:

      .cn-left {
      width: 140px !important;
      height: 170px !important;
      }
      .cn-left .photo {
      padding: 10px !important;
      }
      .cn-right {
      padding-top: 10px !important;
      }
      div.cn-list div.cn-image-none {
      text-shadow: none !important;
      color: transparent !important;
      width: 120px !important;
      height: 150px !important;
      padding: 10px !important;
      margin: 0 !important;
      border: none !important;
      background-image: url(“/wp-content/images/default_directory_image.jpg”) !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      }

  • Jhosie

    I cant seem to get this to work :-(
    This is what I have on my CSS:

    .cn-list span.cn-image-none {
    background-image:url(“/wp-content/images/name-of-file.jpg”)!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;}
    .cn-entry span.cn-image-none p {
    display:none!important;}

    • Steven Zahm

      @Jhosie

      That would be because none, of the supplied templates include the markup necessary for this to work. I’m working on the next release … I’ll be sure to add it to those templates.

      • Jhosie

        Oh i see, thanks Steve.. Now i dont need to tear my hair out trying to get it to work :)

  • Luci Heller

    Works like a charm!!!!!!!!
    Thanks so much!

  • Christian Driscoll

    Steve, where exactly do I insert this CSS?  I am a novice here.
    I am using CMAP – do I put it in the the cmap/cmap.ccs file (and if so where should I position it) or in the connections plugin – again where and in what file?
    Also, what do I do to alter the code so I can render a default icon (in cmap)?

    • Christian Driscoll

      In last line I meant to indicate I would like to render a default logo (not icon).

      • Steven Zahm

        @ Christian

        Put the CSS in the theme’s style.css file. At the end of the file will do.

  • Christian Driscoll

    Thanks. And as for including code to handle a default logo do would I repeat same code using “logo” instead of “image”min each occurrence?

    • Steven Zahm

      @ Christian

      Actually, no, sorry. The markup in the code that makes this work doesn’t distinguish between an image and logo when there is neither to display … it is just none. It never occurred to be to mark up the code so each could be targeted and no one has ever asked before … however … itr does make perfect sense. I’ve added it to my to do list. My best guess at an ETA would be sometime later this summer or so.

  • Alexandra Prats

    Hi!
    I don’t have and I won’t have images. Can you tell me how to hide the photo? Is this possible?
    Thank you!

  • Alexandra Prats

    I found the answer in the forum. Thanks!

  • Anna

    Hello! I’m using a custom template and I’m trying to get the image url so that I can use the image as a background image.

    I have tried this:
    <img src="getImageNameProfile(); ?>” alt=”Foto” />

    It has worked before on another site but not any more. It gets the base url but not the image name.

    I’ve also noticed that when I use the following code it only works on my localhost-computer but not on the hosting server. I’m guessing it has something to do with Imagick.

    getImage( array( ‘preset’ => ‘profile’ ) ); ?>

  • Anna

    Some of the code was stripped from this post, I don’t how to show you all of it in this forum?

  • Jay Philips

    I added the code exactly as shown in the post (added my url of course) to the style sheet but I noticed that the image on the listing page overlaps the circle and on the profile page it still shows the text no image.  If I make the image bigger to fill the circle it overlaps the circle as well on the profile page instead of being displayed behind the circle. Any ideas on how to resolve this?

    • Steven Zahm

      @ Jay

      Hmmm, I never actually tried it with the Circled template. Can you share a link so I can take a look?

      • Jay Philips

        Yes, I’ll send you a message with the details as the sites not live right now but I can give you a login to see it.

        • Steven Zahm

          @ Jay

          The CSS just needed a minor tweak. I made the changes to your site. I also updated the the CSS in this QuickTip to include those changes.

          Enjoy.

          • Jay Philips

            Thank you so much for fixing it.  It looks great.

  • James Savino

    I cannot get any logos to upload, they seem to upload to the Logo field, but when I update the entry I get nothing…