- This topic has 13 replies, 3 voices, and was last updated 3 years, 1 month ago by Elvin.
-
AuthorPosts
-
February 8, 2021 at 3:25 pm #1650978William
Hi there,
For this page, its great – love it.
For this page, there is not an image for the outlined section:
I tried to do something, such as:
.page-hero #category_image:not(:empty) { width: 160px; height: 160px; overflow: hidden; border-radius: 100%; box-shadow: 0px 0px 8px rgba(0,0,0,0.3); }
But it does not seem to work – the CSS for the div element does not need to exist if there is no image inside it – how do I make the header element achieve this?
February 8, 2021 at 4:21 pm #1651018ElvinStaffCustomer SupportHi there,
That’s not possible with just CSS. You may have to change how the code you’re using for the image behaves.
Can you share us the code on what’s displaying the image? Let us know.
February 8, 2021 at 5:46 pm #1651074WilliamI have an ACF custom field with outputs an image array. I then created the shortcode using the below snippet so I can add
[category_image]
within the div element on the header element:add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); $category_image_html = '<img src="' . $category_image['url'] . '">'; return $category_image_html; } );
I feel if the element is empty, that is a conditional statement that would potentially work (when the image is not there i.e. element is empty), just not sure how to do this with the header element.
February 8, 2021 at 8:55 pm #1651128ElvinStaffCustomer SupportWe can modify your code a bit so nothing renders if its empty.
Try using this PHP snippet instead.
add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); $category_image_html = ''; if( !empty($category_image) ){ $category_image_html = '<img src="' . $category_image['url'] . '">'; } return $category_image_html; } );
February 9, 2021 at 4:48 am #1651513WilliamHi there,
I added that code and have the following CSS, but still the CSS appears when that is empty.
.page-hero #category_image:not(:empty) { width: 160px; height: 160px; overflow: hidden; border-radius: 100%; box-shadow: 0px 0px 8px rgba(0,0,0,0.3); }
Just to provide some extra info, my div element in question I don’t want the above CSS to apply to, when the image is not there, is:
<div id="category_image" class="category-image-style"> [category_image_for_cat_page] </div>
February 9, 2021 at 5:41 am #1651576DavidStaffCustomer SupportHi there,
few optioms:
1. Style the
<img>
not its container.2. Return the content in the shortcode condition to stop any empty HTML string being output ( which results in a ‘space’ in the HTML and therefore is NOT empty ):
add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); if( !empty($category_image) ){ $category_image_html = '<img src="' . $category_image['url'] . '">'; return $category_image_html; } } );
3. If the
#category_image
wrapper element is required when an image is being displayed then include that HTML in your shortcode. Then if theres no Image theres no wrapper.February 9, 2021 at 9:43 am #1652051WilliamThank you for that – I changed the snippet so the shortcode outputs an image URL and simply add a with a class etc.
Is this what you were referring to? Just on this page, it does not disappear.
I’m quite open to whatever of the above options is easiest and quickest to implement.
February 9, 2021 at 2:13 pm #1652287DavidStaffCustomer SupportThis is what i meant:
add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); if( !empty($category_image) ){ $category_image_html = '<div id="category_image" class="category-image-style"><img src="' . $category_image['url'] . '"></div>'; return $category_image_html; } } );
Then you just need the shortcode which will output the #category-image div and the iamge
February 9, 2021 at 5:21 pm #1652386WilliamThat’s amazing thank you – all looks for the look now!
It might not be possible, but is it possible to use the {{post_title}} or something similar to add an alt tag for such an image in the above snippet?
February 9, 2021 at 7:18 pm #1652451ElvinStaffCustomer SupportWe can modify David’s code a bit to add the alt attribute.
add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); $parent_title = get_the_title(); if( !empty($category_image) ){ $category_image_html = '<img src="' . $category_image['url'] . '" alt="' . esc_attr( $parent_title ) . '">'; return $category_image_html; } } );
February 11, 2021 at 12:25 pm #1654978WilliamThat seems to work, although the alt/title (I added title) is for the first post on the page, not the title of the page?
See here.
February 11, 2021 at 5:37 pm #1655166ElvinStaffCustomer SupportLet’s modify the code abit:
Try this:
add_shortcode( 'category_image_for_cat_page', function() { $term = get_queried_object(); $category_image = get_field( 'category_image', $term ); if( is_archive() || is_home() || is_search() ){ $image_alt = $term->name; } if( is_singular() ){ $image_alt = $term->post_title; } if( !empty($category_image) ){ $category_image_html = '<img src="' . $category_image['url'] . '" alt="' . $image_alt . '">'; return $category_image_html; } } );
February 11, 2021 at 5:55 pm #1655177WilliamThat’s great! Thank you ๐
February 11, 2021 at 7:18 pm #1655213ElvinStaffCustomer SupportNo problem. Glad you got it sorted. ๐
-
AuthorPosts
- You must be logged in to reply to this topic.