add this to your child-theme functions.php:

function custom_avf_post_css_create_file( $create ){
  return true;
}
add_filter( 'avf_post_css_create_file', 'custom_avf_post_css_create_file', 10, 1 );

if this is what you need: https://www.11-76.com/themes/giant/index-SINGLE-IMAGE.html#

and you like to style the new content like a page – why not use a page? – those “pages” should be only set to template blank – no header – no footer.

or – if you like to use it with a portfolio grid ( or a masonry with portfolios ) – you can change that opening behavior to show the linked portfolio in a lightbox ( modal window ) and not to open a new page. The trick is then to not make the look and feel like a lightbox ( but to show as white full overlay ) with just a close button on that.

I have to honestly confess here that I haven’t read the entire content of the topic, but if with a little thinking you don’t give the team member element, but a color-section (or grid-row) an ID and give it the class mfp-hide, the color-section should be able to appear as similar in a lightbox.

if this is not enough – why don’t you open a page in a lightbox from your site.
Place that button and insert a manual link with the url of your wanted pages with addendum: ?iframe=true

see here https://webers-testseite.de/my-website/

PS: If it is an external page link – you must have allowed on that external link to be running in an iframe.
for that i allowed it via htaccess by: Header set X-Frame-Options "ALLOW-FROM https://webers-testseite.de/"

but on internal pages ( X-Frame-Options “sameorigin” ) this is not needed

try using that little snippet in your child theme functions.php:

function show_date_with_shortcode() { 
  date_default_timezone_set('Europe/Berlin');
  setlocale(LC_TIME, 'de_DE.UTF-8');
  $date = date_i18n( 'l \d\e\n ' . get_option( 'date_format' ) . ' ' . get_option( 'time_format' ). ' \U\h\r'  );
  return $date ;
}
add_shortcode( 'show_date', 'show_date_with_shortcode' );

use it as shortcode in your text : [show_date]

this is for my german language a binding word \d \e \n will end in Freitag den 17.04.1968
the rest will be corresponding to your lang settings – but if you like to have that binding word f.e. the then use \t\h\e
if you don’t like the time in this shortcode – just remove that part:
$date = date_i18n( 'l \d\e\n ' . get_option( 'date_format' ) );

___________

or style a kind of calendar sheet:

function datum_shortcode() {
  date_default_timezone_set("Europe/Berlin");
  setlocale(LC_TIME, 'de_DE.UTF8');
  $year = date_i18n('Y');
  $day = date_i18n('d');
  $month = date_i18n('F');
  $weekday = date_i18n('l');
  $weekdaycolor = date_i18n('l') == 'Sonntag' ? 'red': 'gray' ;
  $uhrzeit = date_i18n( get_option( 'time_format' ) );

  $datum = '<div id="calendar_sheet"><div class="month-year"><span class="month">'.$month.'</span><span class="year">' .$year.'</span></div><div class="day ' .$weekdaycolor.'">'.$day.'</div><div class="weekday">'.$weekday.'</div><div class="time">'.$uhrzeit.'</div></div>';
  return $datum;
}
add_shortcode('calendar_sheet', 'datum_shortcode');

here use it as shortcode in your text: [calendar_sheet]

some css for it:

#calendar_sheet{
text-align:center;
display: inline-block;
border:1px solid #eee;
border-top:15px solid #0076ba;
-webkit-box-shadow: 5px 5px 2px #ccc;
-moz-box-shadow: 5px 5px 2px #ccc;
box-shadow: 5px 5px 2px #ccc;
background:#fafafa;
padding: 5px;
min-width: 150px;
}

.month-year .month,
.month-year .year {
  padding: 0 5px
}

.day {
  font-size:48px;
  font-weight: bold;
  font-family: times;
  padding: 10px 0 0;
}

.day.red {
    color: red;
}

#calendar_sheet .time {
  font-size: 24px;
}

see both shortcodes in action on: https://enfold.webers-webdesign.de/3-columns/

again adjust to your language: so for red Sundays change that Sonntag to Sunday in weekday color ;)
and change to your local time in these lines:

date_default_timezone_set("Europe/Berlin");
  setlocale(LC_TIME, 'de_DE.UTF8');

• This reply was modified 2 years, 1 month ago by Yigit.

ok – allready posted to include a priority. Sorry did not read again.

you see the code above – that is only my test environment. – just change to your needs:

10 Washington Avenue in San Rafael front exterior<br><br><img class="aligncenter size-square" src="https://www.thomashenthorne.com/wp-content/uploads/2023/03/10-Washington-Ave-San-Rafael-78-of-78-HERO-cropped-180x180.jpg" alt="10 Washington Avenue in San Rafael front exterior" width="180" height="180" />

guess that will work – but i think that the size on the link will determine the image used ( in this case 180×180 )

As mentioned above why don’t you use: /%category%/%postname%/
one disadvantage – if you got 2 or more Categories for one Post the first category name will be inserted in that permalink.

the point is that even if the images are within your media gallery, they will not be used on the blog or single page. Images recalculated by Enfold are used there. Thats what i wrote above. Only if you are using the portfolio element or blog element on a page there is on the second tab of the element editor the option to choose the image used ( that is the custom setting ) – and on that custom setting you can have original image. But is it advisable to use original sizes of the images in a 3 or 4 grid display where the image widths can hardly exceed 300px? 20 or more featured images on a page with 900px ( and more ) – what would that do to performance?

And on blog and archive pages ( category pages) these options are not available.
In the blog it is by default : portfolio (‘width’ => 495, ‘height’ => 400)
In the single post, depending on whether with sidebar or without :
entry_without_sidebar ( ‘width’ => 1210, ‘height’ => 423 ) or entry_with_sidebar ( ‘width’ => 845, ‘height’ => 321 ) are used.

The second solution above not to take the nearby aspect ratio of magazine is to have your own image size registered – but then a recalculation of the thumbnails has to be done.

but what you are showing in your screenshot seems to be no accordion ! ;)
is it a tab container? – yes it is.

A Tab Element is exactly to save space and to make content more compact.

if your nick belongs to your page – i think i know what you like to go for.

Enfold uses different sources for the images on different elements. For example on a single post it uses the entry_with_sidebar size!
This is a ratio at : 2.6
the magazine ratio is nearby: 1.89 – so try this one if it is ok for you
On a blog in grid view – it uses the portfolio image size. – But you can change that by child-theme functions.php snippet:

try:

add_filter("avf_post_slider_args", function($atts, $context) {
	if( $context == "archive" ) {
		$atts['type']  = 'grid'; 
		$atts['columns']  = 3;
		$atts['preview_mode'] = 'custom';
		$atts['image_size'] = 'magazine';
	}
	return $atts;
}, 10, 2);

_______
now : if it has to be that 16:9 aspect-ratio:
you can either redefine the entry_with_sidebar size to that ratio or set your own image-size in that ratio.
Both solutions need a recalculation of your thumbnails.

just a little question – did you activate the advanced layout builder for your custom post type – via filter: avf_alb_supported_post_types ?
and is it a CPT or do we have here a custom template – based on archive ?