Hi friends!
I’m making a simple page for our festival. The layout-person has sent me the program layout in .jpeg and .pdf. I would like the program to have each show clickable and linked to their respective info section for each show, without ruining or changing the layout from the layout-person.
How should I go about?
Right now the program is just cut out from the .jpg or (or the .pdf) with Affinity designer.
Hope for help! / Anders
Go to THIS WEBSITE and upload your program image. You will then be able to add rectangular hotspots onto the image and add the URL’s for each link. The app looks like this:
When you’ve created the hotspots, click the get code button and paste it into an html bric where you want the image to appear. You will have to add the image to your blocs project and maybe adjust the path to the image in the generated code. You will most likely have to add the image to the output folder after publishing, so you may not see the result in blocs preview.
Thanks! hedon52! This was a very good sollution! I will consider this if I don’t find a sollution that can be solved without HTML blocs. I find it a bit awkward when I have to add things in the public_html folder by hand. Especially when there can be sudden info-changes during the festival.
Unless you re-create everything, an image map would be the only option, the site @hendon52 references works really well for that.
I can easily erase the text from the layout-persons images. Then maybe load the text-less layout in a bloc and then add the text. But I can’t figure out how to do that!
Just remember, if you do use this solution, size the image to the dimensions you want it displayed in your web page before you upload to the app and add the hotspots. Also, you don’t have to add the image to your public-html folder on the server, you add it to the generated blocs output folder. This will allow you to preview locally before uploading to your server. Also, you may have to create different size variants for each breakpoint as the hotspot layer is not responsive.
I would try and create the flyer using Blocs, it may not look exactly the same but the image is pretty large and you cannot change anything.
It would load a lot faster and have breakpoint flexibility.
Just my two cents😀
Casey
Thanks, I think that is the direction I’m heading now. But where to start? Is it possible to recreate those round- cornered colored frames in blocs?
Yeah mine too. But there would be a bit of a learning curve to duplicate the layout.
I would probably use cards and divs.
Yes, it’s very easy. Just add a bloc, make the size of the column you want the flyer to be. There are many ways to achieve this but adding a card and then set it to a rounded corner with the border checked may be one of the easiest.
You can then add a class to the card and adjust the border color and thickness.
casey
If you want to use your flyer image, use it as a bloc background (without the words). You can then add rows, columns and text boxes for all the text content. This is what it looks like when placed in a bloc:
I’ve attached a blocs project file so you can see how it works with text in place. I’ve also attached the image:
program.bloc (1.8 MB)
By the way, you will have to make different versions for each breakpoint.
Oh yes! That’s very kind of you! This will do it for me I believe! Thank you so much hendon52!!
I didn’t succeed in opening your attached blocs document. Maybe bacause I’m still on 2.6.5. When I place your image in the background of a bloc it just looks like this. I streched horizontally a bit but I can’t reallly control it.
The first thing you need to do is simply add your image to the page. This will display in an image bric set to the width of the column you place it in. This is important because you need to know the HEIGHT of the image when it’s displayed in your page. In the example below, I added the image to a full width standard bloc:
You can now delete the image from the page. Next, select the column that you want to place your image into as a background. Create a custom class (call it bg1 or similar). Double click on the class name to open the class editor and select the paintbrush tab. Drag your image into the image placeholder, then make the following settings:
This will set the image to 100% width of the column. Position should be set to centre - centre and the repeat option should be set to no repeat.
Now switch to the metrics tab and make the following settings:
I’ve set the height of the column to 1046 - you would set your height to reflect the height of the image when you paced it on the page earlier.
You will now have a column filled with your background image. Next, click in the centre of your column and add a two column row bric. Your page should now look like this:
Clearly, this row now has to be adjusted to fit inside certain areas of the underlying image. You do this by creating a new custom class for this row.
Start by adjusting the left margin as shown above. Next, select the right margin and adjust accordingly. Finally, select the top margin to bring the row down into the content area. This is the end result:
You now need to adjust the left column width so that it is narrower (for the dates/times etc). You can do this by selecting the column and dragging its resize handle:
You now have two columns into which you can place your text or heading brics to add your text content.
In my example, I added H6 brics in the left column and paragraph brics in the right column. I then added custom classes to the H6 brics and adjusted the top margins so that they aligned with paragraph brics. You can continue to add heading and text brics to extend the columns downwards to cover the whole image. When it comes to creating a larger space between the two date sections of the background, just increase the top margin of the relevant heading and text brics until they position in the correct date box.
Oh, Thank you hendon52! What a perfect guidance!
All is crystal clear to me, apart from the very first instruction. I can’t understand how to make blocs app to show me those pixel measurements. in the lower left corner. Can’t I just set the height to the actual height of my image? I made a reproduction in Affinity designer and it shows 1196px in the info bar to the right in blocsapp.
When you place an image in Blocs, it automatically adjusts to the WIDTH of the column you place it in. The height goes along for the ride and adjusts proportionately. So, it’s always best to place an image first into the column, just in case it gets made smaller. To see the dimensions, you would normally just select the image and its size will display at the bottom left of the image. It may be that your version of blocs doesn’t do this. Anyway, you can adjust the height manually when you place the image as a background. Instead of entering a height, you could use the slider to adjust the height until you see it’s all showing. If you run out of slider, just trial and error the height until it’s how you want it.
I am doing something very wrong here. My image seem to be shrinking as I adjust the margins of my row. I assume that you mean “row” when you write “column”.
It looks like you’re adjusting the column containing the image background. You need to be adjusting one of the nested columns inside this column. It maybe that your version of blocs doesn’t have the structure tree on the left of the screen (it’s been a long time since I worked on version 2.6.5, so I don’t remember) But the visual tree structure would be as shown below:
Now this picture is really helpful in understanding the hierarchy.
Question @hendon52…
when you’re centering the NavMenu which one control that feature?
when adding a Custom Class to control the Navigation Menu’s Background Color and Text which one would that be under?
There shouldn’t be a need to manually centre a Nav Menu as there is a centred Nav Bar bloc. However, if you were creating a menu manually, you would just select your menu (list) and apply auto margin to the left and right margins with a custom class:
To set the menu text colour, just select a link item and create a custom class. In the class editor switch to the text tab and choose a font, size and colour for the normal state. Do the same for the hover state. Apply the same class to all the other link items.
If you want to colour the background of the navigation bloc, it’s probably best to set a background colour for the whole bloc. If there is something specific you are trying to achieve in terms of background colour, let me know.
