Recent Topics

how to include a thumbnail or smaller image in a post?

Started by on Dec 31, 2015 – Contents updated: Jul 10, 2016

Dec 31, 2015 20:27    

So recently updated to the latest version (6.6.x) from a couple of years old ver (2.4 ish) and I'm not used to this image attachment thing.. That being said, I want to know how I can place a smaller or thumbnail image in the post and have it lightbox-link to the full size image using this new (to me) system?

Right now I'm attaching images to the post then going back and grabbing the html generated and replacing the [image:] tag with the html and editing the img size - not the best solution, I know.

This image issue is seriously impacting my workflow and posts that should be quick and easy turn into major endeavors comparatively

Thanks for any advice or suggestions.


Jan 05, 2016 17:58

hey thanks for the reply..
I've used that method for both external as well as previously posted images and its OK for that use.

I'm more interested in including image thumbnails while writing a new post and uploading all new images for said post..

Currently I see no way to auto-magically add a thumbnail version of image / attachment aside from either pre-editing images (old school, been doing that for a long time) or what I'm currently doing and and just html-resizing them in the img tag to take advantage of the light box viewer.

Jan 06, 2016 23:53

Would this help:

With the [image:...] tag you can define a CSS class :

This CSS class could specify something like:

max-width: 200px;
max-height: 200px;
width: auto;
height: auto;

Would that help?

Jan 07, 2016 00:58

it would if there was only one (small) image size - we use at least 4 on our site, +other sizes for inline-centered and so on images.
but.. it only css resizes them so the full-sized image would still load, slowing down the page for some.. not really a good solution at all.

Ideally, there should be an option in the image uploader/attacher thingy to pick from an already generated thumbnail / image size list (one you can define for each collection) thats created when you upload an image, and offer you the option(s) to just include the image, include image and a link to the thumbnail, link to full size image, or link to image attachment page, if any. as well as alignments/classes.

Jan 07, 2016 01:05

OK, gotcha on not downloading full sizes, but that's a different issue, not related to using [image:] or not.

Now, about generating thumbnails, can you be more specific about your use case of 4 different thumbnail sizes. Can you provide links to sample pages please?

I'd much rather let the system/skin generate proper thumbnails automatically than requiring that you pre-generate them and pick them manually.

Jan 07, 2016 01:25

In our case we do at least a weekly post in this style: or

In these examples we use some left-aligned images (want thumbnails linking to full size since recent b2evo update) in 180px, 200px, 220px and 240 px widths with fit/auto heights also a standard thumb at 300 px wide auto height.

Just how exactly would the system/skin know where what thumbnail goes? that make almost no sense to me.

Now, for content based images (not the above noted thumbnails similar to: ) we used to just make images 780-800px wide for inclusion between paragraphs, but would like something more auto-sizing (responsive) based on display width, etc.

Jan 07, 2016 02:20

ok, so for this:

Now, for content based images (not the above noted thumbnails similar to: ) we used to just make images 780-800px wide for inclusion between paragraphs, but would like something more auto-sizing (responsive) based on display width, etc.

It already is responsive if you use the [image:] tag.

But for the thumbnails it's a different story. Do you really want to have do many different sizes of thumbnails that should all open a colorbox/lighbox to show a large version? From what I see on your site, only screenshots would make sense to be zoomable.

Now, how would the system/skin decide?

Imagine we make a [thumbnail:...] tag. Then the skin can auto decide on the best size of the thumbnail depending on screen resolution. (And different skins can have different rules of course) See screenshot attached.

Am I making sense?

Jan 07, 2016 02:46

I'm understanding what you are saying..
If the system/skin can decide it's float / size based on display resolution, that that could work out fine.. as long as on the wider views such as desktops / tablets it continues it's float.

We've been using various image sizes to differentiate between various platforms i.e. 240px for wii-u , 200 for older tv consoles, and so on..

we can use one set (left-aligned) thumbnail at lets say approx 240px (responsive as noted in your example) and another, general use thumb at about 300-320 px (again responsive as needed per your image above)

inline images should, as you stated, already be responsive (and seem to be so, so far)

Jan 07, 2016 04:16

Yes of course it would continue to float when the width of the windows allows it in a reasonable way.

So can you please show me clear examples of why you need some thumbnails at 240px and some other at 300px ? I still can't get my head around that. It just feels messy to me... (I would have understand it better if you had told me 80px vs 250px for example).

Jan 07, 2016 04:34

as mentioned, its just mainly for a simple visual representation of the associated console / device that applies- Its not set in stone but I've been doing it for quite a few years now (all manually, of course) and would like to continue if at all possible. I would be ok with one set size in the 240 px range for these left-aligned images.. with most others @ 300-320px (i.e. logos, post title-images, and the like) I've found, over time, that the max workable width is right at 240px hence the repetition.

in my usage, the left-aligned images are "title-screens" and represent the title of the game listed.. they are visual fluff to draw the eye to the entry.
they should be different than any story-attached / related images as they serve a specific function.

Jan 09, 2016 21:28

Ideally, should the "title-screens" open a colorbox/lightbox or not?

Jan 09, 2016 22:02

@fplanque wrote earlier:

Ideally, should the "title-screens" open a colorbox/lightbox or not?

IMO, yes they should.

In my general use, I add a "post" (teaser or topic) image 320px max width usually floated right, any number of "item" images (could be a game title-page image. a screencap, a product image, etc) that I would usually thumnail to fit in the related text (needs to open in lightbox) and floated either left or right as warranted by context. sizes would vary depending on context 240px for those title-page images and up to 420px for some others with the average, in my case, being 300px.

I also use full screen/size images for product, screencaps. promo-images, and the like centered between paragraphs and at end of article.. if these are resized to fit full-width, then they too need to lightbox to full-size image.

Jan 24, 2016 23:07

I actually like that last example a lot better than floats, but we will implement support for thumbnails.

Jun 21, 2016 23:56

Just a quick note to mention we're working on this.

Jun 28, 2016 01:38

Here's a sample of what it's gonna be like:

Jun 28, 2016 05:15

Looks good so far, will there be options for click for full size / shadowboxed?

Jul 10, 2016 22:19

They will be click for fullsize by default.

Form is loading...

b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.