Does anyone have good examples of other blogs on Renaissance websites? Specifically, I’m not sure how to tackle the hero image on the blog home and individual blog posts. It’s such a huge image and I haven’t figured out what to put there that makes any sense. We don’t have the bandwidth to come up with a new content relevant image for each blog post unfortunately. I wish I could just turn the hero image off on the blog or at least make it way smaller but I don’t think that’s an option.
Here is my blog. I had the task of combining my old blog with my newer one since I moved to a new state and am now using a new domain. I really don’t like those huge hero images and was just thinking today of trying the smaller size (right now all of my hero images are the medium size). The only problem is the smaller size is even more difficult because the length is so short compared to the width that most photos won’t turn out well. I get most of my photos from graphics programs I’ve purchased such as Stencil, VistaCreate, and more (Lifetime purchases via AppSumo). With these programs, I can save a custom size to easily have it available when needed. It seems like the free version of Canva charges for everything. I also use a purchased version of Yay Images and Deposit Photos.
@judyorr - thanks for sharing your blog and how you tackle it! I tried to use the smaller size (2560x480), but it doesn’t appear any less tall on my 13" MAC laptop. Have you tried any that size and if so, did it appear less tall for you? Agreed on difficulty of finding an image to fit that very wide/short image and I’m very impressed that you use different images for each post. I don’t know that we have the bandwidth to find a good image for the hero image. I often have something that fits well in the body of the blog but would look really wonky as a hero. If you have any success with the re-sizing and/or find any other creative solutions, please let me know. Thank you!
Comparing our blog posts side by side, your hero pics look larger than mine do. I’m using 2560x895, so something isn’t right on your end. I do see that you have a black section on top of your site where I don’t, so my hero pics go all the way to the top. But I still think your hero photos are too big, even the more interesting one on your home page. Having that huge photo of a gray stone wall seems like a waste of prime space on your blog posts, and it appears cold and lifeless. I’d double-check the true size of those photos (I’ll experiment on my blog to see how it looks using the smallest size). With that said, until you can find a fix, I’d find a better photo for your blog posts. Maybe the front or interior of your office or something similar to your home page photo - something that represents your broker or your main area. Or one of your For Sale signs in front of a property - you’d need to take a wide-angle photo so you can fit it in the wide and short dimensions, but you don’t necessarily have to fit the entire house in - you’d be focusing on the for sale sign.
This is weird. I just created a small hero image for one of my blog posts and it is not smaller than the medium hero image used on another one.
What the smaller hero pic is doing is zooming in on the image and although it appears to be the same size as the medium hero image, it is showing less detail (and I had to move it in my graphics program to show that it is a fireplace). With my original medium hero image you could view a lot more detail of the actual image and I didn’t have to manipulate it as much.
So these sizes aren’t smaller but they just zoom the photo used. I don’t know how else to explain it, but now I know that the smaller size doesn’t appear smaller on the website/blog pages. That doesn’t make sense.
I grabbed a ruler and your hero image is definitely larger than mine, and I stopped at the black top area. Maybe whatever size was chosen in the beginning is what we’re now stuck with?
Jess, maybe we need to find someone that has small hero images on their site/blog and see if there truly is a size difference.
@judyorr thank you so much for looking into this so much and I appreciate your thoughts on our current image! The sizing is all very illogical to me as well. If it helps, when I had emailed REW customer service prior to this post, here are some of the responses I got (they were follow-ups so sorry about the odd format). I ended up still posting in hopes someone else could help me make sense of it.
-
Changing the size of the area behind the blog title would require custom programming as this can’t be changed in the backend.
-
Changing the size [of the image] wouldn’t make the area smaller. The area where the image goes in the header has a set size resolution. If the image you were uploading was way larger than the set size for the hero image, then it could display improperly.
-
Those are the different resolutions used throughout the site. Different page templates will use different sizes, so you would want to use an image that is the appropriate size for that.
If you compare Latest Denver Real Estate News & Trends | Feaster Realty Blog to https://www.feasterrealty.com/, they are using two different sized hero images. Here is a breakdown of what pages/templates use which header size:
Homepage - 2560 x 1152px
Community - Large - 2560 x 1152px, Medium - 2560 x 895px, Small - 2560 x 480px
Content - Large - 2560 x 1152px, Medium - 2560 x 895px, Small - 2560 x 480px
Seller - Large - 2560 x 1152px
Blog - Small - 2560 x 480px
That is so strange. I read a prior post from REW about the different image sizes, but I thought we could control those on our end. And neither of our blog hero images are small, and yours is definitely larger than mine. Same as our home pages.
And if I use a photo sized 2560x480, it doesn’t look as good as the medium size of 2560x895. As I mentioned before, it just zooms the photo in so shows less of the actual image. This makes me want to experiment by sizing my photos to 2560x1152 in my graphics program and see if it at least shows even more of the actual image.
Can anyone at REW explain this?
I created a hero image of 2560x1152 and it showed more image details than the small pic I experimented with. I guess we’re stuck with whatever containers our site, blog, and other pages were created with and the size of the photo you choose will determine how it actually appears. The smaller the size image you choose, the more zoomed-in it will be.
So now I’m going to create the large photos for my blog. I didn’t save a screenshot of my medium photo so I’m just going by memory, but next blog post I make I’ll create a large and medium hero photo and see if they look different and if the large really does show more.
I’m not sure why you have larger image “containers” than my site has, and did you request the black “header/navigation” area? Is that a choice in the backend or was it a design option?
Sorry for the long delay in reply! I still haven’t figured this out. I did get a reply from Morgan on a different thread asking what changing the image pixel size does and he replied:
Change the aspect ration - For instance 500 x 500 = square 300 x 500 = rectangle 200 x 500 = less high rectangle.But of course use a high enough resolution image (so it’s not pixilated) and then if need be have the browser reside the image.
This didn’t help me, but maybe you understand how it would help?
The black header at the top of my site in theory can be turned on and off (under settings/cms), but when I turn it off, the black header stays and the photo just moves up (and therefore gets cut off). It’s very odd. I’m going to email support about that part. Thanks again for trying to help figure this out!
Also, here is the full thread with Morgan’s comment: Photo best practices - #19 by jessfeaster