Edit Image Block to show Title / Caption on Rollover as overlay
Permalink 1 user found helpful
Hi There
I need to edit the image block so that as opposed to showing an image on rollover, the block shows the image title / caption in a div over the top which is hyperlinked. Ideally it would be a JS fade or such like. It is too clunky to start rendering images with each title in.
Sadly I have no JS, very little PHP - I am more HTML & CSS, so could sort the styling but could you possibly help with how one would edit the image blog to make that the case as I am hoping it is a fialry small tweak?
Hoping you can help and am sure this will be of use to more than just me....
Many Thanks
Toby
I need to edit the image block so that as opposed to showing an image on rollover, the block shows the image title / caption in a div over the top which is hyperlinked. Ideally it would be a JS fade or such like. It is too clunky to start rendering images with each title in.
Sadly I have no JS, very little PHP - I am more HTML & CSS, so could sort the styling but could you possibly help with how one would edit the image blog to make that the case as I am hoping it is a fialry small tweak?
Hoping you can help and am sure this will be of use to more than just me....
Many Thanks
Toby
You should just make a custom block, not a custom template for the image block. Because custom templates only apply to the view.php file, not the controller. And also there are a lot of buggy situations that come up when you want to override the JS and CSS -- the system is very inconsistent with how and where it looks for things (this is an ongoing point of frustration for me and many other developers, but unfortunately the core team has indicated that it's not a priority for them to address).
So for those reasons, just create a custom block. I have a free block on the marketplace called "Zoom Image Dual" that you might want to download and inspect the code for -- it is probably somewhat similar in functionality to what you're trying to do here.
Also, you should play around with the free Designer Content addon -- it won't create this specific block for you, but by creating various different kinds of simpler blocks with it, it will give you a good sense of which files are required for blocks, what the basics are, etc.
Best of luck.
-Jordan
So for those reasons, just create a custom block. I have a free block on the marketplace called "Zoom Image Dual" that you might want to download and inspect the code for -- it is probably somewhat similar in functionality to what you're trying to do here.
Also, you should play around with the free Designer Content addon -- it won't create this specific block for you, but by creating various different kinds of simpler blocks with it, it will give you a good sense of which files are required for blocks, what the basics are, etc.
Best of luck.
-Jordan
1, Edit the controller file in image block (having moved to my blocks folder)
2, Added some js to my template file.
3, Added some css to my template css.
I was hoping that I would be able to make this a custom template for the image block, however when trying to follow help on the custom templating instructions my issue is that what I have edited is not the view.php file but the controller.php file and I cannot get the custom template to work (placing the controller.php and view.php files in blocks/image/templates/rollover_title).
Also ideally I would get the JS and CSS out of my template file and into the custom template.
So as it stands attached is the amended controller.php file, the css and js in their own files. How can I compile this to become a custom template correctly? Sure I am close....
Any help would be really appreciated and I will post up here when I get it working to share.
Thanks
Toby