Image Generator – @tuanphan

Description

click text – change image in randomize
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, you can add a Text Block with format like this

Use Unordered List
First Line is text: #image-generator#
Second Line is text, you can enter any text on this line
Other Lines: enter image url

#1.2. Hover on Page where you use Text Block > Click Gear icon

#1.3. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 08.26c24v10 Image Generator -->
<script>
window.ImageGeneratorOptions = {
  marker: '#image-generator#',
  showInitialImage: true,
  clickTextTag: 'h1',
  clickTextClass: 'image-generator-click-text',
  imageWidth: '100%',
  imageMaxWidth: '900px',
  spaceBetweenTextAndImage: 24,
  imageTransitionDuration: 300
};
</script>
<script src="https://code.beaverhero.com/textblock/0826c24v10imagegenerator.js"></script>

#2. Customize

#2.1. To change text Click Me to another tag: h2, h3, h4… change line 06

clickTextTag: 'h1',

#2.2. To change image width, change line 09

imageMaxWidth: '900px',

#2.3. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Text Block

Then add this code into Markdown Block

<script>
window.ImageGeneratorOptions = {
  marker: '#image-generator#',
  showInitialImage: true,
  clickTextTag: 'h1',
  clickTextClass: 'image-generator-click-text',
  imageWidth: '100%',
  imageMaxWidth: '900px',
  spaceBetweenTextAndImage: 24,
  imageTransitionDuration: 300
};
</script>
<script src="https://code.beaverhero.com/textblock/0826c24v10imagegenerator.js"></script>