Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    Styling single blog posts feature image not possible?

    General Discussion
    3
    12
    660
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Linda MacDonald
      Linda MacDonald last edited by Linda MacDonald

      Hey there guys hope you are all well☺️☺️ i played with the pagebuilder the other Day and wanted to style a single blog post. Specifically wanted to set the feature image to cover so set the container, column and image element to cover. That didnt work.... Checked the code editor and it Said cover too. I also deleted the preconfigured styling. Is it not possible to do?
      Thanks in advance

      1 Reply Last reply Reply Quote 0
      • Daniel Mulroy
        Daniel Mulroy last edited by

        Hey Linda,

        Great question!

        A 'hack' i've used before is to add an h6 (for example, but it could be any element as long as it's not used for anything else on the page.

        Then in your article template, use jQuery to test for the existence of an h6. If it exists, run the code to style your elements. If not, do nothing.

        Hope that works! Personally, I used it to add anything that was in a blog post labeled as an <address> (which is selectable from the built-in text-type selector in the blog HTML editor), remove it from the blog body, and append to the image as a caption.

        Cheers !

        1 Reply Last reply Reply Quote 0
        • Linda MacDonald
          Linda MacDonald last edited by

          hey there @Daniel-Mulroy thanks for getting back to me on this 🙂 unfortunately you lost me 🙂 ...so in order to resize the feature image from the blog I can use the jquery block?

          1 Reply Last reply Reply Quote 0
          • Wassim
            Wassim last edited by

            Hey Linda,

            Can you share a screenshot of what you currently have and detail what you would like to do?

            Linda MacDonald 1 Reply Last reply Reply Quote 0
            • Linda MacDonald
              Linda MacDonald @Wassim last edited by

              @Wassim Hi Wassim 🙂

              so I am getting contained images, please find screenshot attached and what I would like to do is 100vh x100vm - the image takes up the full viewport on every device. In the Mode section of the editor I set the image to cover and it would be super cool if you guys could perhaps add a slider for VH VM in there? I cannot seem to be able to attach a screenshot here so here is the link
              http://community-ec7307.appdrag.site/preview/blog/7-this-is-a-test.html?from-preview=1&from=appdrag-blog-detail-article-config&timestamp=1609234998993

              Linda MacDonald 1 Reply Last reply Reply Quote 0
              • Wassim
                Wassim last edited by

                @Linda-MacDonald said in Styling single blog posts feature image not possible?:

                so I am getting contained images, please find screenshot attached and what I would like to do is 100vh x100vm - the image takes up the full viewport on every device. In the Mode section of the editor I set the image to cover and it would be super cool if you guys could perhaps add a slider for VH VM in there? I cannot seem to be able to attach a screenshot here so here is the link

                Hi,

                I just tried with the chrome inspector but is it something like that that you would like to have ?

                screenlinda.jpg

                Linda MacDonald 1 Reply Last reply Reply Quote 0
                • Linda MacDonald
                  Linda MacDonald @Wassim last edited by Linda MacDonald

                  @Wassim aaaaaaw yeah, pray tell which good magic you came up with this time to get it to work??????? 🤓 and might I be able to use VH and VW values? when you use this instead of px the image scales nicely according to different devices...if using px you typically get cut-off images - half of someones head goes missing on mobile😆

                  1 Reply Last reply Reply Quote 0
                  • Wassim
                    Wassim last edited by

                    Hi,
                    To do that you would need to :

                    • define your section as fullwidth (Position > Fullwidth)
                    • add a class to your image let's say 'fullscreen-images' (Advanced > Class)
                    • add a CSS code source onto your page, and in the style define :
                    .fullscreen-images {
                      width:100vw;
                      height:100vh;
                    }
                    
                    Linda MacDonald 1 Reply Last reply Reply Quote 0
                    • Linda MacDonald
                      Linda MacDonald @Wassim last edited by Linda MacDonald

                      @Wassim ahh I thought I had it but I cannot seem to get the edits to stick. I have set a new class in the "identification advanced" and I can see my css taking effect immediately, but no matter how many times I save it doesn't stick . when I go to preview, it changes back to contained. could you please let me know if I should do this differently?

                      UPDATE:
                      ok this was my bad - there was some column padding that I overlooked 🙂
                      but also for it to wotk we need to target the section itself not the image 🙂

                      1 Reply Last reply Reply Quote 0
                      • Wassim
                        Wassim last edited by

                        You should add the class to the image yes. Please update it in this way and I'll check with you what doesn't work as expected.

                        1 Reply Last reply Reply Quote 0
                        • Linda MacDonald
                          Linda MacDonald @Linda MacDonald last edited by

                          @Wassim hi again 🙂
                          I can get it to go full width but not full height. I think it's because the feature image has some sort of custom padding. If I take that away the image disappears. would you mind publishing a full width blog article so we can all use it? Problem is also that its not possible to target the image without affecting the text too which doesn't look so hot 😕

                          thanks in advance Linda

                          1 Reply Last reply Reply Quote 0
                          • Wassim
                            Wassim last edited by

                            Hi, do you have the link to your page (the previous link doesn't work anymore)? I will write you the exact css to perform it.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post