Featured image sizes

SOLVE
nbagonoc
Participant

Hi, is there a huble function available to select and crop and resize different featured image sizes similar to the code in wordpress below?

 

the_post_thumbnail('thumbnail'); 
the_post_thumbnail('medium'); 
the_post_thumbnail('large'); 
the_post_thumbnail('full');

 

I want to be able to select the croped and resized version of the image sizes soo that the page(blog list view) i'm working on will load faster. Small image thumbs for the blog list view, and large image thumbs for single blog view.

 

Capture.JPG

 

Thank you, in advance. 

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

@nbagonoc@LiemHuynh,

 

Correct me if I am wrong, but it seams that you are wanting image size options, specifically two:

 

1. A regular size image blog image

2. A thumbnail sized blog image

 

You would also like these to be cropped and resized within Hubspot?

 

I can tell you right now that Hubspot does not provide an image editor/cropper the way that wordpress does. You would need to crop and resize the images yourself. I would consider visiting the idea forum to suggest this as it is one of the better features of WordPress that is lacking in Hubspot.

 

As for using multiple versions of images, this too is pretty much automatic in WordPress. I don't think this is something that Hubspot offers, at least not in a way that allows you to set multiple versions of the same image. 

 

You could do this with some developer magic. You would need to use HubL to create an image module, exporting it to the template's context. This will hide the image from this module on your post and also make the image available as a piece of the post data.

 

After that you can just reference the image image module instead of the featured image anytime you want to use your thumbnail as the featured image. This will require you to go back and edit all of your posts. 

 

Another Option

 

Another option, one that I use, is to use the featured image as the background image of a div. This is a much simpler option but is still hand coded. This will crop and resize the image to how you want it.

 

Create the div (inside your rss or blog contents loop):

{% for item in whateverloop %}

    <div class="featured-image-thumb" style="background: url({{ content.featured_image }})">

    </div>

{% endfor %}

The CSS for the image div:

.featured-image-thumb {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
height: 150px;
width: 150px; }

This will apply the featured image to the background of a square, 150px by 150px, div. The image's center will stick to the center of the div, and the image will either be the height or the width of the div (depending on which one fills the div) and the other will be cropped. This is useful because you can also may it responsive by using percentage widths.

View solution in original post

10 Replies 10
LiemHuynh
Participant

i have a question as same as you. Where n How i can edit this url to have multy size img ? 

0 Upvotes
nbagonoc
Participant

That my friend.... Is something I cant answer lol. I cant seem to find anything about to solve/answer this issue in the documents. I'm sure there's might be something to be able to achieve this. Let's wait for the COS Gods to answer... 

0 Upvotes
Jsum
Solution
Key Advisor

@nbagonoc@LiemHuynh,

 

Correct me if I am wrong, but it seams that you are wanting image size options, specifically two:

 

1. A regular size image blog image

2. A thumbnail sized blog image

 

You would also like these to be cropped and resized within Hubspot?

 

I can tell you right now that Hubspot does not provide an image editor/cropper the way that wordpress does. You would need to crop and resize the images yourself. I would consider visiting the idea forum to suggest this as it is one of the better features of WordPress that is lacking in Hubspot.

 

As for using multiple versions of images, this too is pretty much automatic in WordPress. I don't think this is something that Hubspot offers, at least not in a way that allows you to set multiple versions of the same image. 

 

You could do this with some developer magic. You would need to use HubL to create an image module, exporting it to the template's context. This will hide the image from this module on your post and also make the image available as a piece of the post data.

 

After that you can just reference the image image module instead of the featured image anytime you want to use your thumbnail as the featured image. This will require you to go back and edit all of your posts. 

 

Another Option

 

Another option, one that I use, is to use the featured image as the background image of a div. This is a much simpler option but is still hand coded. This will crop and resize the image to how you want it.

 

Create the div (inside your rss or blog contents loop):

{% for item in whateverloop %}

    <div class="featured-image-thumb" style="background: url({{ content.featured_image }})">

    </div>

{% endfor %}

The CSS for the image div:

.featured-image-thumb {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
height: 150px;
width: 150px; }

This will apply the featured image to the background of a square, 150px by 150px, div. The image's center will stick to the center of the div, and the image will either be the height or the width of the div (depending on which one fills the div) and the other will be cropped. This is useful because you can also may it responsive by using percentage widths.

View solution in original post

nbagonoc
Participant

Yes, @Jsum. That is exactly what I really wanted to achieve. Thanks for pointing out that Hubspot doesnt offer it though. I got tired of reading the documentation looking for a solution that isnt available.

 

Your first options seems pretty complicated. lol I think I wont be able to make one like that, as I have started hubspot a week ago. But, thank you, for your suggestion.

 

I'm actually using same with your second method. This solves the size cropping issue, to be able to fit any container, responsive, etc., but cant solve my problem of using different size options soo that the browser wont download the whole data of the imageCapture.JPG

 

Thank you, for your insights Jsum. I think I might just stick with this method. Not really the best in terms of making the website load faster, but hey, I really dont have a choice.

 

Have an awesome day!

0 Upvotes
Jsum
Key Advisor

@nbagonoc 

 

are you using code or a drag and drop module for the image you would like to resize? 

0 Upvotes
nbagonoc
Participant

@Jsum Nope, I use the code. Really not a fan of Hubspot drag and drop teamplate editor, as it adds excessive parent containers, and also the front-end framework they are using is pretty old.

0 Upvotes
Jsum
Key Advisor

@nbagonoc,

 

I thought about appending an image size to the url which you could do if you were using HubL. Honestly I don't know much about that but after looking I don't think that Hubspot is set up for that. Even if it worked I doubt it would compress the image, just resize it. Maybe somebody who know something about that could chime in.

 

I think I can help you though. It's not the fix you are looking for, but I do not a lot about image optimization. The fact is that most websites make very critical mistakes with there images. They find stock images for their pages and blogs, download them, add them to their cos, and use them on the page. Most stock images are several thousand pixels wide and tall, weighing in at between 2mb and 20+mb, and they are used in a 800px by 600px area or around there. 

 

1.  Optimize image size - you can use Photoshop, Gimp, Pixler or dozens of other free and paid image editors to resize your images. Use a tool like page ruler (chome), and measure the largest version of the largest area the image will be used in. You just need the width, when you resize the image adjust the height proportionately. When you resize your image, use whatever version of "slice for web" that your image editor has and save the image as a progressive jpg. If it needs a clear background you can use png but try to use jpg and make it progressive. save it at the lowest possible quality you can without losing visual quality.

 

2. Optimize file size - After you have a perfectly sized image you can use image compression software to optimize the file size. Luckily there are tons of browser based softwares that don't require downloading. 

 

compressor.io - This one is mainly for png images in my opinion, but it will optimize jpg and gif too. You just want to check the end file size to esure that it is smaller. 

 

jpeg-optimizer.com - this is the best jpg compressor I have found. It allows you to choose compression level and even resize the image (resize down, never resize up). You don't really need to use an image editor to resize with this, but I do anyways to slice to web. You can hit the back button to change the compression level until you find a quality vs size ratio that you are comfortable with. 

 

Here's an example:

coffee-2608864_1920.jpg

 

Image from Pixabay.com - 378 KB 1920 x 1280

Image after jpeg optimizer - 50.1 KB 800 x 533

Image after Photoshop (resize and resolution change to 72) - 22.5 KB 800 x 533

 

That's 86.7% file size reduction on jpeg optimizer and 94%, the image is sized for use on most any blog, and it is smaller than the thumbnails on most websites. 

 

I know this isn't what your asking for, but my point is that if you reduced the images on your site to thier smallest possible size then, using modern internet and computers, load time should no longer be an issue. Think about the math there of 378KB vs 22KB. You could load this image 17.18 times at 22KB in the time it takes you to load it once at 378KB. Yes it's a pain to optimize every photo you use, but I feel like it should be a law. 

nbagonoc
Participant

You're right. Probably not the real solution, but I definitely think it the best solution out threre in terms of hubspot. Thanks for the effort with your response, and the awesome links. You really helped a lot. 

SaschaN
Participant

Any news regarding a smart solution how Hubspot creates different sizes of an uploaded image? 

 

Best,

Sascha

MichaelDev
Contributor | Partner

Resized images are now available 🎉 You have three ways to do it.

 

1) Set the width attribute of the img tag.

For the first option, HubSpot will automatically resize based on the width attribute of your image tag and update the src to include the resize query parameter.

<img src="YOUR-IMAGE.JPG" width="300" alt="Example that'll set the src attribute to a resized image of 300px wide." />

 

2) Using a query parameter of the image URL

You can manually trigger resizing using just the query parameter. For details, see this post https://community.hubspot.com/t5/APIs-Integrations/Request-smaller-featured-image-sizes-from-CMS-Blo...

 

3) Use a HubL function

The resize-image-url() will return the URL of an image using any size you'd like. Details can be found on the Hubl functions page.

0 Upvotes