Should I create an Auto-width image block?
Permalink 1 user found helpful
Hi All,
I'm looking to create a simple addon to put in the marketplace, with the hope of developing more cool stuff in the future. But I want to start with something simple, and take it one step at a time.
My clients constantly seem to struggle with uploading the wrong sized images into image blocks. I know you can manually specify the width in the block, but that's too hard for many people. I'd like to make their lives a little easier by making a block that makes the image exactly the right width to fit the area they put the block in.
So if they try to put a huge image into the sidebar, this block would measure the sidebar area width and resize the image on the server-side accordingly.
So 2 questions...
1. Does this functionality already exist? I'd feel silly to go to the trouble of releasing an addon that fixes a non-existant problem.
2. If I develop a block to put on the marketplace (free addon), is it ok to use the C5 core image block as a starting point?
I'm looking to create a simple addon to put in the marketplace, with the hope of developing more cool stuff in the future. But I want to start with something simple, and take it one step at a time.
My clients constantly seem to struggle with uploading the wrong sized images into image blocks. I know you can manually specify the width in the block, but that's too hard for many people. I'd like to make their lives a little easier by making a block that makes the image exactly the right width to fit the area they put the block in.
So if they try to put a huge image into the sidebar, this block would measure the sidebar area width and resize the image on the server-side accordingly.
So 2 questions...
1. Does this functionality already exist? I'd feel silly to go to the trouble of releasing an addon that fixes a non-existant problem.
2. If I develop a block to put on the marketplace (free addon), is it ok to use the C5 core image block as a starting point?
I would love a free add on that allows for auto resizing in the content block!
That should be a pretty straight forward block do develop with some jQuery, and it would probably be used by a lot of people not having this functionality in their themes already.
As to using the core image block as a starting point I see no reason why you couldn't.
Another take on this could be to create a custom template for the image block or to develop a block that applies to all images on every page it is added (without having to add all images through your block, would help existing sites).
Just throwing out some ideas...
As to using the core image block as a starting point I see no reason why you couldn't.
Another take on this could be to create a custom template for the image block or to develop a block that applies to all images on every page it is added (without having to add all images through your block, would help existing sites).
Just throwing out some ideas...
(With this thread being revived, this comment may be a month too late!)
Many of the regular blocks are old but stable code. When it comes to PRB they often lead to architectures that are not up to current best practices.
So while the existing image block may be something to start from, please also look at what designer content will do for single images, and have a look at some other recent blocks for overall block architecture ideas.
What you are looking at doing may be more complex than it seems. The width of an area is not known until you are in the browser and may not be constant (fluid and responsive themes), so the server side resizing will invariably need some feedback from the browser to set the width available and the browser side will need some hysteresis to prevent thrashing.
Many of the regular blocks are old but stable code. When it comes to PRB they often lead to architectures that are not up to current best practices.
So while the existing image block may be something to start from, please also look at what designer content will do for single images, and have a look at some other recent blocks for overall block architecture ideas.
What you are looking at doing may be more complex than it seems. The width of an area is not known until you are in the browser and may not be constant (fluid and responsive themes), so the server side resizing will invariably need some feedback from the browser to set the width available and the browser side will need some hysteresis to prevent thrashing.
Also cheers for the hat-tip about the designer content addon. About half of the custom blocks I have made to date have been blocks that simply format content rather than doing any actual processing.
Thanks for the replies everyone.
It's been a while since I posted this, and in the meantime I have been pretty busy getting this thing underway. I'm probably a couple of weeks away from submitting to the marketplace, then I guess a month or so for the PRB to approve etc. While the process of submitting to marketplace is new to me, I have built lots of weird and wonderful C5 blocks for client websites and think I have a reasonable handle on how these things should fit together :)
I did seek approval from Franz to use parts of the standard image block, but as it turns out I haven't needed to use anything other than a bit of HTML for the admin interface. The rest of the code is built from scratch and is designed quite different (I think better) than the core image block.
@John - your comments are bang on. This addon measures the width of the area using javascript and sends the width back to the server via an ajax request. The server regenerates the image at the specified size and responds with a URL. It's also clever enough to account for any margins or borders that you might have applied to the image, and those are included in the calculations. There's a lot of caching going on to make sure this isn't sluggish for the user, and so far it's working great.
At this stage at least, it's not designed for responsive or fluid width designs. That wouldn't be out of the question going forward but it adds a lot of complexity to an already complex task.
If anyone would like a copy to play with, I'd be happy to provide a dev version in exchange for some honest feedback on how it works and how it could be improved. The core functionality is working great as of now, the user interface is still rough around the edges and there are a few minor bugs that I'm aware of.
EDIT: Here's a link to a basic demo site (http://auto-sized-image.ragepank.com/) there's not much to see, other than some images loaded into different C5 areas / layouts. The point to note is that I didn't need to enter a width for any of these images and it all fits together nicely. I'll do up some demo vids once all the functionality is in place.
It's been a while since I posted this, and in the meantime I have been pretty busy getting this thing underway. I'm probably a couple of weeks away from submitting to the marketplace, then I guess a month or so for the PRB to approve etc. While the process of submitting to marketplace is new to me, I have built lots of weird and wonderful C5 blocks for client websites and think I have a reasonable handle on how these things should fit together :)
I did seek approval from Franz to use parts of the standard image block, but as it turns out I haven't needed to use anything other than a bit of HTML for the admin interface. The rest of the code is built from scratch and is designed quite different (I think better) than the core image block.
@John - your comments are bang on. This addon measures the width of the area using javascript and sends the width back to the server via an ajax request. The server regenerates the image at the specified size and responds with a URL. It's also clever enough to account for any margins or borders that you might have applied to the image, and those are included in the calculations. There's a lot of caching going on to make sure this isn't sluggish for the user, and so far it's working great.
At this stage at least, it's not designed for responsive or fluid width designs. That wouldn't be out of the question going forward but it adds a lot of complexity to an already complex task.
If anyone would like a copy to play with, I'd be happy to provide a dev version in exchange for some honest feedback on how it works and how it could be improved. The core functionality is working great as of now, the user interface is still rough around the edges and there are a few minor bugs that I'm aware of.
EDIT: Here's a link to a basic demo site (http://auto-sized-image.ragepank.com/) there's not much to see, other than some images loaded into different C5 areas / layouts. The point to note is that I didn't need to enter a width for any of these images and it all fits together nicely. I'll do up some demo vids once all the functionality is in place.
hi this looks good you still working on it?
Hi everyone,
For those monitoring this discussion, I have done a lot more work on the block and it's now complete and stable. I'm just working on my marketplace submission + documentation now. It's a reasonably complex block, so I'm expecting it may take a while to get approved.
Here's a demo video of the block in action for anyone interested. Would love to hear any feedback :)
http://youtu.be/emeWCZST5dE
Harvey / Sadu.
For those monitoring this discussion, I have done a lot more work on the block and it's now complete and stable. I'm just working on my marketplace submission + documentation now. It's a reasonably complex block, so I'm expecting it may take a while to get approved.
Here's a demo video of the block in action for anyone interested. Would love to hear any feedback :)
http://youtu.be/emeWCZST5dE
Harvey / Sadu.
Hi All,
I'm pleased to announce this block is now available in the marketplace.
https://www.concrete5.org/marketplace/addons/auto-sized-image-block/...
Thanks.
I'm pleased to announce this block is now available in the marketplace.
https://www.concrete5.org/marketplace/addons/auto-sized-image-block/...
Thanks.
