Edit the size of one image, add animation and anchors

  • Author
    Posts
  • #138992

    Hi,

    I am looking to edit my image sizes in order to make my posts look more linear at the bottom.

    Can you help me with it?

    Other help needed-

    1) I am trying to build a story for my website either in different pages or in one scroll- is it possible to have a link to go to other pages (apart from the menu at the bottom left where I can select any page)/

    If I have only one blog page, can I have an anchor to select the tile to scroll to? For eg: I have my web divided into three sections- about us, our service, portfolio. Ideally, Id like all of them to be in one page that can be scrolled and read, but is it possible to add anchors at the top of the page to take the user to each section?

    2) Is it possible to add animations to posts as one scroll down, like a fade-in or swivel just to make it look more dynamic for the user when scrolling?

    Thanks in advance, love the theme!

    Regards

    The blog I need help with is sbconstruct.co.in.

    #138993

    binarymoon
    Theme Author

    Hi

    If you want to edit your images you’ll have to do it yourself. There’s no way to do it automatically through the theme I am afraid.

    You will need to make sure the images all have the same dimensions when you upload them – or at least the same width and height ratio.

    Regarding your questions:

    1) You can add links to the bottom of any post/ page.

    The icon labelled 7 is the link icon. Add some text, highlight it, then click the icon and you can add a link you want the text to point to. https://en.support.wordpress.com/visual-editor/#row-1

    If you want all the content on one page, then you can build the page and add content anchors. This isn’t possible using the visual editor though, you will need to edit the html directly to add anchors. There’s info on this here:
    https://en.support.wordpress.com/splitting-content/page-jumps/

    2) I’m afraid you can’t add transitions when jumping between content. That would require javascript but you can’t add custom javascript on wordpress.com

    #138998

    So if I am getting it right I can’t use CSS to edit a single image size?

    Thanks for 1. This will come in handy!

    For 2 is there any documentation I can refer to? Any forum that nudges me in the direction will be brilliant. Thanks !!

    #139008

    binarymoon
    Theme Author

    CSS can tweak the scale of images, but it can’t change the width and height ratio. At least not easily. Perhaps we can work something out.

    What exactly did you want to do with the images? How did you want them to be different?

    For 2 – there was a typo I’m afraid. Javascript is not allowed on wordpress.com. However – I have just remembered something that may help.

    The theme has a built in function for smooth scrolling between anchors, so you could make use of that (since the javascript already exists).

    To make it work what you would need to do is add class=”scroll-to” to the links you are targeting at the anchors.

    So based on the page jumps tutorial, a link that looks like this:

    <a href="#unique-identifier">Click me!</a>

    Should look like this:

    <a href="#unique-identifier" class="scroll-to">Click me!</a>

    The themes code will then do a smooth scroll from the link to the #unique-identifier target.

    #139048

    So basically I’d like to edit my image sizes in such a way that they are straight lined at the bottom- which I’ve tried to do somehow for now by cropping image sizes / adding an extra image.

    Secondly, I will be adding more images in the next section called our services ( have 5 services and I’d want three in one horizontal line if possible – saw a post that can make three columns, wanted to check if its possible for a set of three images instead of the whole column)

    Next, I have a portfolio grid ( a mosaic structure with just a bunch of 40-50 photos).

    In the end, I want a contact us section

    The idea is to have each section ends with a straight line for the new section to begin. This was the basic draft I had but I am open to experimenting and seeing what looks good, so far I’ve got what I have on the website. I had photos to share for a better understanding but dont think I can upload them here.

    Also, sorry for troubling so much, I really have no clue how much effort this might be in the backend or figuring this out for me. I know that I am struggling with all the CSS selectors. Let me know what’s the best possible I can do here.

    Also, just tested number 2, works great for me! Thanks, I will add them as I add pages now.

    #139224

    binarymoon
    Theme Author

    I think what you have done so far may be the best way to do it. The articles are different sizes based on the content, so even if you made all the images the same size the one without the image will always be shorter.

    The best I can come up with is using object-fit to crop the images. You would need something like this:

    .content-posts article .thumbnail img {
    object-fit: cover;
    height: 100px;
    }

    You can tweak the 100px to fit your needs.

    This makes all the images the same height, but the text may still push things out of line.

    For the 3 images in a line, you can set the width of .content-posts article to whatever you like, so if you target it with nth-child like you have other elements you can set the width for just the three items you want and they should fit automatically.

    However – having said all this. Might it be easier to create a static homepage using the new editor? It will give you a lot more control and create the straight lines automatically.

    #139300

    Aah, you know what static page would indeed have been the best option now that I think of it, I was way too new to figure this then two weeks back. But I think I am pretty happy with what I am getting to now.
    Plus the little hear and there of posts is actually something different from the regular straight cuts I see in most websites.

    I am building this for my dad’s firm and he likes it, so I am good with it.

    I got one of the lazy load plugins and it has some basic animations of fade in that I was looking for, so I even got that figured out.

    One last thing. I have added a contact form to one of my blogs and am struggling with getting the header size and content size fixed using the css. Can you help me with the selector? I didn’t know whether to create a new thread for this and mark this as resolved or continue, sorry if I went wrong!

    #139345

    binarymoon
    Theme Author

    I think what you have done is really clever. I’ve not seen anyone manipulate a series of blog posts quite the way you have :)

    I see the contact form at the bottom of the homepage. I’m happy to answer questions about it here if that’s easier. Whatever you prefer.

    #139346

    Thanks, I am really enjoying building this too :)

    Ok great, simply I need all the boxes to be of uniform width. The send button to be center aligned.

    Our services header padding to be as big as contact us header and the overall layout spacing between headers and the subsequent posts to be a little reduced.

    #139347

    Ohh, and Id also like to reduce the box heights in the form if that’s possible. Currently its taking too much space.

    #139392

    Hi Ben,

    I seemed to have encountered another issue, I tried using my navigation bar (items from menu) to add page jumps sections and the css class “scroll-to” in additional css class, but for some reason it doesnt work when i add the css class. Additionally, since my navigation bar is sticky, it always partially cuts of the top header when i click that button on the navigation bar.

    The third thing is, if i click on a link outside the page (like project highlights in my case, the about us and our service buttons do not work to bring me back to the old page.

    Any ideas on how i can fix this ?

    PS regarding the earlier posts, I somehow fixed them, so you can ignore them. Thanks in advance.

    This is the last bit, after I manage this, I am done with it! Sorry for bothering so much!

The topic ‘Edit the size of one image, add animation and anchors’ is closed to new replies.