Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #20664


    I have couple of questions regarding images,

    1. How to display preview image on the home page (like demo site)? We can do this by adding image to slideshow / putting image at the start of the page/blog, but is there any other way to do the same?

    2. How to fix the height of the slideshow images (full width slider)? I get different sizes for different pages.

    3. How to add texts / buttons on the images like demo site?




    1) Please describe which image you are refering to . The huge images on top are part of a fade slider. You can also insert a slider into page-y by creating a slider on page-x with nothing but a slider on it and then using dynamic template on page-y to pull the slider from page-x into page-y. That would be a 3rd way of adding images, so you can have 5 huge sliders on same page if you wanted.

    2) Sorry, but your question is too abstract since there are many sizes, pages and types of sliders. Please show me a page and give me a size and I can give you css code.

    3) .. this is a snapshot of the Add New Page or (Edit Page) where each of the slideshow images are. If you notice there is a small link to right of each image called ‘Show’ which opens up a panel with tabs. 2 tabs are for one type of slider and the other 2 tabs are for a different type of slider.




    Thanks Nick for reply.

    1. I am referring following images on (Home Page)

    – Preview Images of Sermons, About Us, and Contact as well as preview images of blog entries

    2. What should be the height for fade slider images (full width). Height of those images is changing on different pages for my website.

    3. I added the caption and button on image, but width of button is very large (width of frame).




    You can set the height , width and whether each image you upload should be cropped or not. the pre-set. The images you see at the link you pasted are 1400 x 450px, though I remember someone saying that there is room for 1500 x 450. If you open us functions.php at the base of the theme , lines 76 89 contain all the constraits for images at various parts of the theme. The fullsize slider is on line 79 and the small full size slider is on line 80. You asked why some sliders are different, and here is the answer.

    Please be aware that when you upload images, the images must be proportional to the constraint sizes in functions.php and they images must be bigger or equal to the constraint but never smaller. Smaller images cause blurring and stretching 100% of the time.




    Thanks Nick. Can you please answer question 1 and 3?




    Contact page doesn’t have any images as far as I know though of course you can add them via css or editing the theme templates. The instructions I’ve posted above apply to all the pages you mentioned.

    Please read the instructions which came with the theme which explain the process of adding images to sliders on the home page. The demo data import is another great way to learn how each individual slider is made. Since the process of adding images to a slider is identical whether it’s a page, a post or a custom post type all you need to do is to understand but one , and repeat the process for the other pages. I described a process of how you can add a slideshow from one page to a different page , which was your second part of the first question. I am afraid that now the ball is in your court and you need to get some images and start making slide shows to quickly see for yourself how intuitive the process is.

    Your 3rd question asks me to provide code for a button that is too big on one of the sliders somewhere on a site I never saw that has many different buttons , page types and slider variations. :) I don’t want to waste your time with trying to guess at the answer and providing an abstract solution Please provide (a) URL to the page containing the button and I will happily provide you with the CSS to shrink it.





    Let me ask my questions again, and this time I’ve examples for each question on my website –

    Q 1. Please check the button width on slider image of Home tab ? I can decrease the width in following css (default it is set to 94%)

    #top #wrap_all .button_wrap_1 .caption-slideshow-button {

    width: 94%;

    margin: 0;


    What is best way to achieve this?

    Q 2. On ISKCON Youth Services (IYS) tab, please check the slider image. We can’t see the full image, also I want to decrease the height (height of the image should be same as slider image on Home tab OR slider images on demo site –

    Q 3. On Home tab in the middle of page, you can see I’ve displayed 3 columns and contents for each column is one page. (Column 1: ISKCON Youth Services IYS, Column2: Srila Prabhupada, Column 3: Contact

    If we have slider on a page then we see preview image on Home like “ISKCON Youth Services” (Column 1). If we don’t have slider but we have image as first part of the contents of that page and then we see that image as preview image on Home page like “Srila Prabhupada” (Column 2), and if we don’t have slider as well as image as first part of the content then we don’t see any preview image on Home like “Contact” (Column 3).

    I don’t want to add slider on every page but for few pages I can add image as first part of the contents of that page. In such case I want preview image in the format of “ISKCON Youth Services” (Column 1) on Home. Also sequence should be Preview Image -> Page Tile -> Contents. Is there any way to do this?

    Q 4: Contact page: we see first text field and then name of that field. How to change it to, first Name and text field?



    I want to change it to





    Thanks for the url, makes a world of difference

    1. Best way would be if you were using a child theme to add the css so that when an update comes out you do not have to backup and replace the custom.css file of the parent.

    If you are not using a child theme, the next best way to make the change is by adding the css below to /css/custom.css file. You should adjust the percentage based on how wide you want the button to be.

    #top.home #wrap_all .button_wrap_1 .caption-slideshow-button {
    width: 20% !important;

    2. The image is cropped during the upload, so its not that the top part of the image is hidden ‘under’ the menu, it just doesn’t exist (×450.jpg ) . What size image are you uploading? Because there is a constraint in the code that crops it at 1200×450. Please give me the dimensions of the original image so based on its aspect ratio we change the constraint.

    The image on the home page is cropped at 1400×450 while the one on youth page is cropped at 1200×450. What size is original image on homepage that you upload vs. size of image on youth page that you upload? Have you changed any settings in functions.php .. is your line 75 of functions.php look like this?

    $avia_config['imgSize']['featured'] = array('width'=>1400, 'height'=>450 ); // images for fullsize pages and fullsize slider

    In order for the youth image to look the same as image on home page, they must have the same aspect ratio. Most likely they do not, because what happens is that wordpress takes the aspect ratio of the image you are uploading, and scales it down until either the width or the height hits the constraint (1400x450). Please provide a link to the full image, I will see if I can resize it in photoshop without losing quality.

    3. How are you building this site? Which page is the blog home as defined in Inacrnations > Theme Options ? You are using dynamic templates, so what are you adding , element columns, and what are you placing in the first column? You can make another template and change it so that not every page looks the same. I see that only your home page is a template while the others aren’t. You should make more templates and add them to pages to get greater control over the type of content you are showing.

    4. Please open up /framework/php/class-form-generator.php and find line 163 which looks like

    $this->elements_html .= '    <input name="'.$id.'" class="text_input '.$element_class.'" type="text" id="'.$id.'" value="'.$value.'"/><label for="'.$id.'">'.$element['label'].$required.'</label>';

    and change it to

    $this->elements_html .= '   <label for="'.$id.'">'.$element['label'].': &nbsp;</label><input name="'.$id.'" class="text_input '.$element_class.'" type="text" id="'.$id.'" value="'.$value.'"/>';

    then find line 190 which looks like

    $this->elements_html .= '    <input '.$checked.' name="'.$id.'" class="input_checkbox '.$element_class.'" type="checkbox" id="'.$id.'" value="true"/><label for="'.$id.'">'.$element['label'].$required.'</label>';

    and change to

    $this->elements_html .= '    <label for="'.$id.'">'.$element['label'].': &nbsp;</label><input '.$checked.' name="'.$id.'" class="input_checkbox '.$element_class.'" type="checkbox" id="'.$id.'" value="true"/>';

    then find line 237 which looks like

    $this->elements_html .= '    <select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select><label for="'.$id.'">'.$element['label'].$required.'</label>';

    and change to

    $this->elements_html .= '    <label for="'.$id.'">'.$element['label'].': &nbsp;</label><select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select>';

    and please add this to your /css/custom.css file . If you change the names of the fields you may have to adjust these values.

    #top .ajax_form .text_area {
    position: relative;
    left: 70px;
    #top .ajax_form .text_input{
    position: relative;
    right: -25px;



Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Full width slider’ is closed to new replies.