Home Forums Product Support Novella Parallax in post

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #4428
    Elias Kunosson
    Participant

    Hi,
    Just bought the theme today as promised. Sorry for the delayed purchase, I had to make a last minute trip to Norway.

    Anyways, I’m back in office now working on the new site. I managed to figure out most CSS changes I wanted to make but I’m at lost with the parallax component feature. When adding a image in a parallax component I can only get it to show as a normal full-wide image, no parallax effect.

    Also I’d like to change size of this parallax image to be full-screen.

    I’m guessing some code will be needed for this. The site is being developed offline so unfortunately I can’t send a link just now. Hope my description of the problem is clear enough, let me know if not!

    Best regards,
    Elias

    #4432
    Jenny @ Aesop
    Keymaster

    Hi Elias.

    Be sure you are using the Parallax component to achieve the parallax effect (not the image component). You can read up on this component at https://aesopstoryengine.com/help/parallax-component/

    The parallax effect is most noticed when the image is at the top or the bottom of the page. If you provide a link or a video capture of you slowly scrolling down the page, I can take a look.

    You can’t change the size of a parallax image to be full-size. That defeats the entire purpose of having a parallax effect. If you want a full-size image, use the image component instead (http://aesopstoryengine.com/help/image-component/).

    Hope that helps!

    #4437
    Elias Kunosson
    Participant

    Hi Jenny,
    Thanks for your answer but I think we’re talking about different effects. I’m looking to create the effect seen in the lower part of this page: https://aesopthemes.com/kerouac/?preview&utm_referrer=http%3A%2F%2Faesopstoryengine.com%2Flibrary%2Fkerouac%2F

    Thanks!

    #4438
    Elias Kunosson
    Participant

    Also I can’t find a option for changing image size with the image component…

    #4483
    Jenny @ Aesop
    Keymaster

    Hi Elias.

    Linking to demo pages doesn’t work so well. Please tell me which theme demo to look at, as well as the title of the post, then point me to the part of the post to look at. Linking would be much easier! lol

    The image size is calculated with this option:

    Image Width – Width of the image. You can enter the size as 40% or 500px.

    #4531
    Elias Kunosson
    Participant

    Jenny,
    Kerouac theme > How aesop story engine works post and scroll down to the section just below where it sais “Use an H5 to give your stacked parallax-style gallery a title” it’s almost at the bottom. I want the image to be fullscreen and fixed and the text to be scrolling, Just like the top image (featured image) when the parallax option is checked.

    Regarding image width I don’t see that option in the component editor. I have URL, offset, Credit, Alt, alignment, lightbox, caption and position. No width or size option.

    #4541
    Jenny @ Aesop
    Keymaster

    Thanks for the information! That was much easier to follow. 🙂

    The image you are referring to is part of a stacked parallax-style gallery. You create the gallery using the Gallery menu in the WordPress admin. Then you add the gallery to your post but inserting a Gallery component and selecting it from the drop down box.

    Set the width for the gallery in the Gallery menu (in the WP admin) as well. Just look for “Main Gallery Width”.

    The only thing you can’t do is have floating text on galleries. If you want to do that, you’ll have to use the image component instead, use the floater option, and then write some CSS to make multiple images follow one after the other and full-width (this will be a bit of work!).

    Hope that helps!

    #4546
    Elias Kunosson
    Participant

    Perfect, thanks Jenny!
    That would have taken me quite some time to figure out by myself. I think I’ll be fine for now without floating element on the gallery, so let’s not go down that hole at the moment. If I ever need it I will deal with it then.

    Thanks again!

    #4572
    Elias Kunosson
    Participant

    I’ve found what seems to be a bug with the image component capture alignment. When uploading a vertical image the caption won’t align next to the image. Instead it ends up below the image pushing down the next paragraph. There’s no problem with horisontal(landscape) images, only vertical(portrait) Any idea how to fix this?

    #4573
    Elias Kunosson
    Participant

    Also when editing a content component it looses the text, meaning you’ll have to manually add it back every time you make a style tweak.

    #4608
    Jenny @ Aesop
    Keymaster

    Hi Elias – no problem, happy to help!

    For the vertical image / caption alignment problem, can you please upload a copy of an image I can use to test at imgur.com ? Please provide me with a link to the image.

    Regarding the content component, have you tried hitting the enter/return key on your keyboard in order to go to a new line (below the component)? Basically, enter down until your cursor is no longer inside the component.

    #4610
    Elias Kunosson
    Participant

    Hi Jenny,
    Just uploaded the site for you, here’s the link to the post. https://www.eliaskunosson.com/down-days/ you can see the alignment problem I’m having at the bottom of the post.

    With the content component I mean that when you press the little pen icon to edit say width or text alignment it erases the text previously entered and adds the generic “All your normal text goes here.” instead.

    #4647
    Jenny @ Aesop
    Keymaster

    Hi Elias. It looks like you’re using a child theme for Novella. Some of the Novella styles are not loading properly.

    Can you verify what version of Novella you are running?

    #4652
    Elias Kunosson
    Participant

    – I’ve disabled the child theme and is now running the parent theme, didn’t fix any alignment problem though. I’ve also checked every individual css change I’ve made as well as disabled them all to check if the alignment would sort itself out, no change.

    – I’m running Novella 1.0.6

    – Also found a small problem on mobile devices which probably have something to do with the menu bar changes I’ve made. It doesn’t show on the computer, only on my phone. If you have time I’d appreciate it if you could help me sort it out. When viewing the post on a mobile device there’s a small gray bar at the very top of the page. I’d like to remove it.

    Thank you!

    #4653
    Elias Kunosson
    Participant

    – Regarding the alignment issue. Vertical (portrait) images won’t align left or right no matter chosen options. Horizontal images works perfectly.

    – Still can’t find any options for width or size in the image component.

    Thanks!

    #4659
    Todd McKinney
    Participant

    Hi, Elias,

    I’m another Novella user, new to WP and AES, and would really appreciate it if you would be able to point me to the location of the style sheet file that you edited to change CSS choices.

    Thanks …

    #4662
    Elias Kunosson
    Participant

    Hi Todd,
    It’s all in the style.css file in the theme folder but more easily you can write changes in the wp editor or in a css plugin like ‘simple custom css’

    #4745
    Jenny @ Aesop
    Keymaster

    Hi Elias! Sorry for the delay. I was out having my wisdom teeth pulled. 🙁 So we’ve figured out the issue. Your styles are completely different than my test site but your child theme CSS file has no custom code in it. After some researching, we found this https://www.eliaskunosson.com/?sccss=1&ver=4.0. This code is causing your styles to not display correctly. In the FireFox or Chrome dev tools, if you disable that CSS completely, the site styles are perfect. It looks like you’re loading those with a plugin called WP-SCSS (https://wordpress.org/plugins/wp-scss/). I recommend removing those custom styles.

    @Todd You should always put custom CSS in an external plugin. When an Aesop theme is updated, any CSS you add/edit in the core files will be erased, and we certainly don’t want that! 😉 Please use a plugin such as Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/) and add your custom CSS there instead.

    #4759
    Elias Kunosson
    Participant

    Would you just please go back and read description of the problem. I will quote myself…

    When uploading a vertical image the caption won’t align next to the image. Instead it ends up below the image

    See also…

    I’ve disabled the child theme and is now running the parent theme, didn’t fix any alignment problem though. I’ve also checked every individual css change I’ve made as well as disabled them all to check if the alignment would sort itself out, no change.

    To sum up:
    – I’m no longer running a child theme, that’s why the child style.css is empty…
    – The code you’re linking to is all of the custom css changes made… Already checked and they are not the cause of the alignment issue, removing them all gets me back to the stock installation!
    – In completely stock/unaltered Novella installation without any custom css at all the problem remains!

    To rephrase the question:
    How do I get the caption text aligned left or right of a vertical (portrait oriented) image?
    And before you mention it, no ‘image alignment’ and ‘caption position’ does not work for vertical images, that’s the problem…

    #4768
    Jenny @ Aesop
    Keymaster

    Hi Elias. Thanks for your reply.

    I have logged a bug in our system about the vertical image styles not rendering properly (as well as the captions). We will try to include a fix for this in our next release. you will know when the changes have been included in an update by viewing the “what’s new” link when you see an update notification.

    Please know that the custom CSS (http://www.eliaskunosson.com/?sccss=1&ver=4.0), not your child theme, that you’re using is causing the Novella styles to not display properly. Please view your post in comparison to mine at https://aesop.simplemama.com/we-tread-again/ (your pic is at the bottom). The styles are different, especially the image caption.

    Hope that helps!

    #4959
    Jenny @ Aesop
    Keymaster

    Please let me know if you still need assistance with this topic otherwise I will close it in a few days. Thanks!

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