Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 22, 2014 at 11:00 am #241568
    Labhanshi

    Hello Team,

    I am trying to set Grid Layout of images on home page. I have tried 3 different elements and settings to achieve that effect.
    You can see on home page – http://www.labhanshicreations.com
    1. Using Fullwidth Masonry Gallery (Media Element)
    2. Using Gallery Element
    3. Using Image Element inside Layout Elements (2/3 and 1/3)

    I want to show images as close as they appears similarly in both Masonry or Gallery Element but they are not showing as close in Image Element.
    And they don’t allow me to arrange as per my needs, that is i want them to display in almost like Grid layout of my choice which i want to link each one to their related category, page or post.

    1. (2/3 + 1/3) to first row with two columns
    2.(1/1) in one row
    and so on.
    But, without such huge gap. Is this padding between Layout Elements, that is making them apart. How to decrease the padding in between layout elements also.

    Also, Galley Element don’t allow us to add Hyperlinks to images (linking of image to other location)

    Kindly suggest how can i achieve such effect with any existing element.
    If currently, there is no such feature available, then i request you to kindly add any such feature in upcoming update, so as to arrange images in Grid Layout. Just like few other themes also have added such feature.

    Thanks

    March 25, 2014 at 9:56 am #242598
    Dude

    Hey Labhanshi!

    You can use the Gallery Element and this plugin: http://wordpress.org/plugins/wp-gallery-custom-links/ to apply custom image links to your gallery images. You just need to install the plugin, then use the url field to apply a custom link. To use the plugin insert this code into your child theme functions.php (at the very bottom):

    
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta)
{
    $custom_url = get_post_meta($attachment->ID, '_gallery_link_url', true);
    if(!empty($custom_url))
    {
        $link[0] = $custom_url;
        $link['custom_link_class'] = 'aviaopeninbrowser';
    }
    return $link;
}

    If you need help with the gallery paddings please post a link to the final layout which you want to use and give us more details about the styling adjustments.

    Cheers!
    Peter

    March 26, 2014 at 1:05 pm #243309
    Labhanshi

    Hello Peter,

    Thanks for helping me out by providing the link for 3rd Party plugin. I hope it won’t interfere or create any problem with the theme.
    I would like to know-
    1.I am not using child theme, so what should i do and how should i proceed.
    2. Do you mean to say, after installing the plugin, do i still need to add the code, or i can either install plugin or add the code, whichever convenient.

    3. My query regarding Grid Layout still exists.
    As apart from using Gallery Elements, i still want to use Grid Layout somewhere else (may be other pages), for my images. How can i achieve that. You can have certain idea from this below link, i want to use somewhat like these-
    Grid Layout Preview

    Kindly help me.

    Thanks

    • This reply was modified 10 years, 7 months ago by Labhanshi.
    March 28, 2014 at 9:29 am #244261
    Dude

    Hi!

    1) In this case I recommend to place the code into enfold/functions.php. However a child theme would be a better solution because you don’t need to modify the (parent) theme files. When you update Enfold you also must modify the functions.php file.

    2) No, the code is required to use the theme with the plugin (integration).

    3) You can reduce the gaps between the columns with some custom css code. I suggest to use the “custom css class” feature (see: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) to reduce the space between your columns with a custom css class.E.g. if you want to reduce the margins of the “3 column” grid use the class “small-margin-columns” and then insert this code into the quick css field:

    
#top .av_one_third.small-padding-columns{
margin-left: 1%;
width: 32%;
}

    Best regards,
    Peter

    March 28, 2014 at 6:41 pm #244524
    Labhanshi

    Hello Peter,

    1. Even i would also like to use child theme. But when i first install it, i found the menus were breaking on main navigation bar. So at that time i skip and then use the parent theme. As i want to change the theme name from Enfold to our Site name in source code and has already working with changed name. I may create another ticket to take help on using child theme, if using child theme creates any problem that time.

    3. I read the information from the link provided by you. Looks very much helpful. But just wanted to know what this 2nd point refers –
    “Add Custom Classes to your Elements”. I mean how and where to add custom class. And how will it correlate with the quick css code you provided.

    Can you help me with any example or video.

    Thanks

    March 29, 2014 at 8:08 am #244711
    Ismael

    Hey!

    1.) Please watch this video to learn more about how to set up a child theme: http://vimeo.com/channels/aviathemes/67221517

    2.) After you added the theme support for custom css class on functions.php, you’ll see a new field option on every elements within the Advance Layout Builder. If you edit a Text Block, you can scroll below then look for “Custom Css Class”. This is true for every elements within the builder except for the column layouts.

    Refer to Dude’s example above. :)

    Cheers!
    Ismael

    March 29, 2014 at 9:10 am #244726
    Labhanshi

    Hello Ismael,

    I have already gone through that video. Thereafter i tried, but Menu bar didn’t worked properly that time. I will try again. Just wanted to know further, I have only few quick css and home page with one more page. Rest nothing. So if i activate child theme. Will everything be exactly like the Parent theme including theme options too.
    Thanks for sharing the link though :)

    3. I will try that option. Thanks for clarifying more. This additional tip helped me a lot. Wish the team could add this tip also in the link posted above by Peter.

    Thanks again

    March 29, 2014 at 9:39 am #244732
    Ismael

    Hey!

    Will you mind posting a screenshot of the menu after installing the child theme? In order to correctly switch your theme to a child theme, make sure that you imported the parent theme settings on Enfold > Import/Export panel. Click the button saying “Import Parent Theme Settings”.

    I hope this helps. :)

    Best regards,
    Ismael

    March 31, 2014 at 10:23 am #245337
    Labhanshi

    Hello Ismael,

    As per your suggestion, I again switch to child theme. Did imported the parent theme settings. And found that again only the Menu Bar was breaking. Then I just realised and figured out one basic thing. I have to switch and add the Menu bar to the proper location from Appearance > Menu > Menu Settings > and set from there.
    Surprisingly, it is now working perfectly as of now. I am amazed to find out that, it even copies the quick css from the parent theme. Did those settings intentionally made to work like that also, if so then perfect.

    Now just have one thing to ask-
    When any new updates comes, and I want to upload / update the Parent theme via WordPress dashboard only, then how should i actually proceed, in order to not to break the child theme.
    Putting this into consideration, that i have already changed the name of theme in style.css and its respective folder name.
    How and what i did is –
    For Parent theme –
    Folder name set to = labhanshi
    under style.css = Theme name: labhanshi

    For Child theme –
    folder name set to = labhanshi Child
    inside style.css = Theme name: labhanshi Child
    and Template: labhanshi

    So, how actually do i have to proceed if i want to update / upload via WordPress dashboard only, so as to retain “labhanshi” word when anybody views it from “Source Code” of any page of my site and in Dashboard itself it is reflecting “labhanshi” (for theme options) instead of Enfold (as currently also it is reflecting the word labhanshi which i have set)

    Thanks

    • This reply was modified 10 years, 7 months ago by Labhanshi.
    March 31, 2014 at 3:59 pm #245486
    Ismael

    Hi!

    Thank you for the explanation, greatly appreciated.

    In order to update the theme properly, you only need to update it via FTP. Since you change the name of the theme folder, override the actual theme files but leave the style.css from the parent theme folder. Don’t forget to make a backup of the database and your theme files before updating for security purposes. :)

    Best regards,
    Ismael

    March 31, 2014 at 6:23 pm #245596
    Labhanshi

    Hello Ismael,

    Thanks for appreciation.
    While i will follow your suggestion with next update. But do you mean to say, that i should overwrite all files except style.css
    But what would happen, if the file style.css also gets updated with any update of theme. Means if Kriesi and team also updates style.css with any of the coming update.

    In that case, should I also overwrite style.css and then just change the following lines from file manager inside cPanel (or first change the below lines on my computer and then upload that file)-

    For Parent theme –
    under style.css = Theme name: labhanshi
    (means changing the name from Enfold to labhanshi)

    Or is there some another way or procedure to follow the update process in order to overwrite the style.css also.
    Kindly suggest.
    Another thing-
    One of my query asked above (in my 2nd response) still remains unanswered for point 3.
    That is, My query regarding Grid Layout. Is there any way i can use Grid Layout using images.
    For your kind reference, i wanted to have this sort of Grid Layout

    Thanks

    • This reply was modified 10 years, 7 months ago by Labhanshi.
    April 1, 2014 at 3:36 pm #246080
    Ismael

    Hey!

    1.) Yes, that’s correct. If you update the theme via FTP and you don’t exclude the style.css, it will be overwritten and the child theme might not work. In that case, you’ll need to change the line that you mentioned above.

    2.) Please open a new thread about the grid layout question to prevent this thread from getting off the topic. Just a quick suggestion, you can use the full width masonry element.

    Regards,
    Ismael

    April 2, 2014 at 10:33 am #246460
    Labhanshi

    Hello Ismael,

    But i wanted to make myself clear, that does style.css also gets updated often with theme update and In that case, should I also have to overwrite style.css file and then just change the above lines. Is this the only option left.
    Or there is some other workaround too.

    2. I could have open it, but i started the thread for this query itself, i don’t want to start all over for this one again.
    You can see with the title of the thread and my first post i submitted in this thread is related to Grid layout question only.
    I keep asking it couple of times, but never received reply even once for this query.
    I wanted to know somewhat this sort of Grid Layout. How can i achieve this with Gallery and Image Media elements individually.

    Hence, i request you to kindly reply over here only

    Thanks

    April 7, 2014 at 3:33 am #248003
    Devin

    Hey!

    2) The theme has a masonry element in the Avia Layout Builder which you can use to create that kind of layout but it doesn’t allow for the buttons on images like that.

    You will also not be able to control the exact order or how it responds on individual screen sizes so if that is exactly what you are looking for the theme doesn’t have any function to work for you and you would need to use a plugin or custom code it.

    Cheers!
    Devin

    April 8, 2014 at 10:50 am #248722
    Labhanshi

    Hello,

    Thanks for your response. Although Masonry layout didn’t solve my problem and is not the solution for which i want to achieve. Even if i don’t want buttons on images. I am looking for something else.

    Anyway thanks a lot for your kind help.
    The ticket can now be closed.

    Thanks

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘How can i set Grid layout of images on Home page’ is closed to new replies.