Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Adding image to hero in Persona

  • This topic has 5 replies, 2 voices, and was last updated 8 months, 1 week ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10144
    Avatar photospecimen65

    Hi,

    Was wondering how best to add a full-size image to the background of the text “A simple, modern looking theme” in the Persona theme (dimensions, media queries etc)?

    If an image is specified as the background,  does it scale responsively to all viewports/devices?

    #10145
    Avatar photoitips3727

    @specimen65

    Here’s one quick way that you can use as is, fine-tune, or edit further:

    1.  To prevent any theme updates from deleting your changes, do a theme override as outlined at: https://getpublii.com/dev/theme-overrides/
    2. So you’ll then have a new sub-folder with the name: persona-override
    3. Copy the index.hbs file in the persona theme folder into the persona-override folder.
    4. Using a plain text editor like ‘Visual Studio Code’ ( https://code.visualstudio.com ), edit the index.hbs file in the persona-override folder. How:

      Change line 8 from:

      to:

    5. Once you’ve saved your changes do Step 6.
    6. Go to Tools & Plugins > File manager > at the top, choose ‘media/files’ folder. Choose the Upload files button to upload the image your want to use for your home page. In the example below, I used an image size of 2560 x 1880 pixels — though when you Preview or Publish your site, Publii will automatically optimise it.
    7. In Publii, go to [website name] > Theme > Theme Settings > Custom settings > Layout > Front page > in the ‘Hero text’ WYSIWYG editor toolbar, choose the Source code button.

      In Publii, go to [website name] > Theme > Theme Settings > Custom settings > Layout > Front page > in the ‘Hero text’ WYSIWYG editor toolbar, choose the Source code button.

      In the Source code window, as I’m using an Apple Mac, I used the following code copy. Edit to match your file names:

      add alt text here
      <h1>A simple, modern looking theme for your blog or portfolio website.</h1> <p> </p>

      The class=”post__featured-image–full” bit ensures your image is full width, using Publii’s built-in CSS for different sizes of images (https://getpublii.com/dev/default-publii-classes-for-using-with-css/)

    #10154
    Avatar photospecimen65

    Thanks so much for this @itips3727.

    So many possibilities with this. Can even add a CTA button in the editor with code as well.

    #10155
    Avatar photoitips3727

    You’re welcome @specimen65 : glad it helped.

    Good idea about adding a CTA button this way too!

    #10158
    Avatar photospecimen65

    Oh, @itips3727 do you think there is a way to get the H1 text to overlay the hero image (like it does on the Publii “Simple” template for eg?)

    Or maybe even how to get the entire image to overlay the horizontal header section with the branding on left/nav on right and then the hero text below – those whole sections are overlaid by one background image which really looks nice. (another example of this is the “Melissa” template which does this too. That one actually has a CTA button in there too)

    #10182
    Avatar photoitips3727

    @specimen65

    Sure, you can overlay text over images. Though of course that means more customisation, etc., especially to consider both mobile and desktop view options. If you’re into coding, you can explore how the Simple and Mellisa themes use that technique. Or, the faster option is to choose a Publii theme or other Publii-compatible theme that includes most of what you want, then just use the theme settings and CSS colours to make your site unique.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.