Create customized "block" in Mosaico

Question

My website is on Drupal.
We have preformatted Mosaico templates with header (view in your browser) and footer (social media buttons, organizational address, and unsubcribe options) in English.
HOWEVER, we do many identical mailings in 3 languages. It is simplest to copy the English mailing, then switch out the text to French and Spanish, rather than recreate the mailing from scratch using a French or Spanish.
But, this means i have to copy and paste French or Spanish text into the header and footer EVERY time.
It seems to me I should be able to save a custom block with my footer in Fr and another with footer in Sp to drop into a mailing.
But how?
(Or, another solution to my problem, I guess, would be a better photo gallery, so I could just use the "make a french template" option. The absolutely wretchedness of the ridiculously inadequate photo gallery is part 1 of what makes me choose copying and pasting all the fr and sp text into the original english draft so as not to have to deal with photos again, rather than recreating a draft on a Fr or Sp template. How does this program have the worst photo gallery imaginable? Part 2 is the huge amount of white space in the template that makes it impossible to see the end of a long link. [the number of times I've sent a messed up link because I can't see what I've pasted there...(fist shaking)!!])

Answer 1

It is possible to define custom blocks to mosaico templates. To do this, you have to create an extension that provides a custom base template and implements the hook_civicrm_mosaicoBaseTemplates hook to register your template. In your custom base templates you can define custom blocks. I found these tutorials useful for understanding how the mosaico blocks work.

• https://github.com/voidlabs/mosaico/blob/master/templates/tutorial/mosaico-tutorial.md
• https://github.com/voidlabs/mosaico/wiki/Template-language

I think you should start creating your base templates from the one you are currently using. So copy it to your extension. Then edit the html file, duplicate the header and footer blocks, rename them to prevent issues from the duplicated block names. In the duplicates you can add text in different languages. Repeat from the duplication for the third language. Now you have the blocks, but the thumbnail images are missing for them. There is a script in the versafix template repo that could be used for generating the thumbnails for your template. This script needs to be modified a little bit, but you can execute it to generate the images for your template. The generated main image for your custom template could be too similar to the main image of template that you copied before. For making them distinguishable you can add a watermark or some text to the generated image called _full.png