Show bigger image on click
Permalink 1 user found helpful
I have a concrete5 site and almost everything seems to run smoothly. However, one issue I can't get handled and that is that I have a content page with text and images. In edit-mode i resized the images so they fit nicely on the page. However... I want these pictures to be clickable, showing the original image (at the original size of course) in a popup. Now here lies the problem! Making the image clickable is not that hard and has actually been established already, but this shows me the image in the resized state. So my problem is that I cannot get to the original message, or better stated... I don't know how to get to the original url of the image, so it can be shown directly.
I hope anyone can help me out, because I'm struggling with this for quite a while already.
Regards
Emil
I hope anyone can help me out, because I'm struggling with this for quite a while already.
Regards
Emil
Hi David,
It seems like an excellent add-on, but can I also apply this to images which are contained within a regular content block?
Regards,
Emil
It seems like an excellent add-on, but can I also apply this to images which are contained within a regular content block?
Regards,
Emil
Hi Emil,
Sorry, I don't believe you can, the only advice I can give on this front really, is if you are creating your own theme, build in some editable areas where you are planning on putting your pictures so you can have specific text and picture blocks.
I think you may be a little limited for options with images inside content blocks.
The other thing you can try is, as you already have the clickable thumbnail already sorted you could just add a second full size image to the file manager, click on the image and look at the properties tab and it does give you the full url to the image, so to sum up you would add your thumbnail image in file manager, add a full size version in file manager too, then set up your thumbnail in a content block and give it a link to the larger image, you may also be able to set up some custom jquery to add a lightbox effect, when you add an image through the filemanager it does have an advanced tab where you can add classes so your lightbox script could hook into the class added there.
Regards
David
Sorry, I don't believe you can, the only advice I can give on this front really, is if you are creating your own theme, build in some editable areas where you are planning on putting your pictures so you can have specific text and picture blocks.
I think you may be a little limited for options with images inside content blocks.
The other thing you can try is, as you already have the clickable thumbnail already sorted you could just add a second full size image to the file manager, click on the image and look at the properties tab and it does give you the full url to the image, so to sum up you would add your thumbnail image in file manager, add a full size version in file manager too, then set up your thumbnail in a content block and give it a link to the larger image, you may also be able to set up some custom jquery to add a lightbox effect, when you add an image through the filemanager it does have an advanced tab where you can add classes so your lightbox script could hook into the class added there.
Regards
David
Hi Emil,
Personally I never add images into content blocks. I simply break the content up into smaller chunks using multiple blocks and layouts.
So if I need an image alongside some text, no problem - just add a 2 column layout with 20px of spacing, add a content block on the left and an image block on the right. Drag the width slider until it looks balanced.
This way you can use a lightbox image block, and add a custom template to the image if you need to.
If you use this approach you will hardly ever need to insert images into content blocks, and you get a much better variety of blocks to choose from.
Personally I never add images into content blocks. I simply break the content up into smaller chunks using multiple blocks and layouts.
So if I need an image alongside some text, no problem - just add a 2 column layout with 20px of spacing, add a content block on the left and an image block on the right. Drag the width slider until it looks balanced.
This way you can use a lightbox image block, and add a custom template to the image if you need to.
If you use this approach you will hardly ever need to insert images into content blocks, and you get a much better variety of blocks to choose from.
Just be careful about 'layout-itis'. They were designed as a quick fix and the core team admits that there are issues with them. Search the forums for 'layouts problems' and you can read all about it. For simple stuff they seem to be fine but the CSS gets confused sometimes.
I find generally that layouts are really good for the purpose they were designed for. And I think they make C5 a much better CMS. The flexibility that they allow the non-technical user is fantastic.
Where I tend to run into problems is when I need to programatically loop through blocks to do some extra processing - layouts add extra complications to that and they behave differently to areas with various area functions. Also the fact that you can't use layouts in stacks makes them a little less useful. But overall I haven't run into any serious problems and I'm running I guess 20 or so Concrete5 sites.
Where I tend to run into problems is when I need to programatically loop through blocks to do some extra processing - layouts add extra complications to that and they behave differently to areas with various area functions. Also the fact that you can't use layouts in stacks makes them a little less useful. But overall I haven't run into any serious problems and I'm running I guess 20 or so Concrete5 sites.
I think C5 is one of the better CMSes out there. Maybe not completely flawless, but pretty much accurate.
I finally ended up solving my problem through adding an image and setting a data attribute on that image containing the original URL. Whenever I click the image it will open a fancybox showing the original image from the data attribute.
To everyone... Thanks for pointing me into some unexplored directions.
Regards, Emil
I finally ended up solving my problem through adding an image and setting a data attribute on that image containing the original URL. Whenever I click the image it will open a fancybox showing the original image from the data attribute.
To everyone... Thanks for pointing me into some unexplored directions.
Regards, Emil
Glad you found a solution that works for you Emil :)
Did you do that inside the Content Block? If so, could you provide a more detailed example of how this works? I'm sure there are others who would like to make this happen.
Any image shown via the c5 image helper will have the original file manager FID appended to the filename. This change was made in c5.5 to facilitate back-tracking from thumbnails to the original image.
Yes. I see that now that I paid attention. Still lots of hoops to jump through just to apply a lightbox effect though. Very few of my clients could pull it off. Let's hope the new editor is easier to override.
From what I can gather from totally random, it seems the layout tool will be deprecated in the not too distant future, wether there is a replacement in the pipeline, is another question, Tiny MCE was showing its age and that is going as of 5.7 so think the layout tool may be next.
Interesting, and thanks for the heads up - although I'd be surprised if the core team didn't replace the functionality with something similar or better.
I just find it a lot cleaner to manage lots of smaller blocks rather than putting everything into one large content block.
It also opens the door for more complex internal content designs, which is something my clients do a lot.
But your caution is noted and thanks again for that, I'll steer clear of doing anything too clever using the layouts system.
I just find it a lot cleaner to manage lots of smaller blocks rather than putting everything into one large content block.
It also opens the door for more complex internal content designs, which is something my clients do a lot.
But your caution is noted and thanks again for that, I'll steer clear of doing anything too clever using the layouts system.
I think you may be well be safe, as I dont think the core team would pull anything without leaving in a fallback for people who have used it, as with the removal of Tiny MCE that will be left in, in some form, so add-ons that have to use it are not instantly broken. but going forward it well worth keeping in mind :)
would it not be easier to use one of the Lightbox add-ons from the marketplace?
http://www.concrete5.org/marketplace/addons/lightboxed-image/...
This one is superb, and its free!
Regards
David