Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 17, 2018 at 9:15 pm #943252
    dcpatoday

    Hi,
    I am trying to customize the Tab Section layout element in Enfold. I wanted to make the image on the tab 400×100 px. I have adjusted it to that size but the image is getting stretched.

    I noticed the name of the image is getting changed at some point -180x100 is getting added to the end of the image name. I think this is added when you select the size of the image to use from the Media directory. But when I add the image through the WYSIWYG I don’t have an option to select the size. I still have this option when setting other images.

    April 19, 2018 at 2:28 am #943844
    Basilis

    Hey dcpatoday,

    Why you make that with CSS and you do not make sure the size you are using for the image is 400×100 so the image not getting resized?

    Best regards,
    Basilis

    April 19, 2018 at 5:17 pm #944192
    dcpatoday

    Hi Basilis,
    I used css to make the container the correct size
    The image is 400×100
    I am trying to use this image (private link)
    But when I publish the image name gets changed so it resizes and then stretches, here is a screenshot of what I see when inspecting the element
    https://storage.googleapis.com/dcpa-email-images/Screen%20Shot%202018-04-19%20at%209.08.16%20AM.png

    Here is a screenshot of the 2, the top one in dark blue is the way I want it. The bottom in lighter blue is how it is, not the way I want it.
    https://storage.googleapis.com/dcpa-email-images/Screen%20Shot%202018-04-19%20at%209.15.20%20AM.png

    I hope this helps clarify the issue I am seeing.

    Thanks!

    • This reply was modified 6 years, 7 months ago by dcpatoday.
    April 23, 2018 at 4:57 am #945225
    Ismael

    Hi,

    Thank you for the update.

    The tab section uses the “square” *(180x180px) thumbnail by default. Use this plugin to adjust the default size of the “square” thumbnail then regenerate the images.

    // https://wordpress.org/plugins/simple-image-sizes/

    Or edit the config-templatebuilder > tab_sub_section.php file. Look for this code around line 410:

    $src = wp_get_attachment_image_src($atts['tab_image'], 'square');

    Replace “square” with a custom thumbnail size.

    Best regards,
    Ismael

    May 2, 2018 at 7:07 pm #950217
    dcpatoday

    Thanks Ismael!
    What can I put in that spot? I have tried a class name that I put in the CSS and I tried ‘400×100’.
    Is this a file i can drop into my child theme? This is what I tried. Either this or my parameter is wrong.

    for anyone looking for this in the future, I found the file at wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/tab_section/tab_sub_section.php

    May 4, 2018 at 5:20 am #951277
    Ismael

    Hi,

    You can create your own custom thumbnail or use the ones generated by the theme.

    $avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		 	    = array('width'=>180, 'height'=>180);		                 // small image for blogs
$avia_config['imgSize']['featured'] 		 	= array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] 		= array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 		 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		 	= array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] 		= array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 		= array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 		 	= array('width'=>710, 'height'=>375 );						// images for magazines
$avia_config['imgSize']['masonry'] 		 		= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize'] = apply_filters('avf_modify_thumb_size', $avia_config['imgSize']);

    // https://developer.wordpress.org/reference/functions/add_image_size/

    Again, you can use the suggested plugin above to adjust the size of the existing thumbnails or to create your own. :)

    Best regards,
    Ismael

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