Git Product home page Git Product logo

adler's People

Contributors

danieldudzic avatar

Watchers

 avatar

adler's Issues

Conditional styling based on the presence and absence of a featured image

The ( first ) post Featured Images in Adler act as full-width Headers

Adler header

Adler includes some styling which is determined by the presence or absence of a featured image for the post ( or the first post in a loop ):

.page .has-thumbnail .hero__content {
    margin-bottom: 40px;
}

.single .no-thumbnail .header-content .hero__meta {
    display: none;
}
.single .has-thumbnail .post,
.single .no-thumbnail .post {
    background-color: transparent;
}

.page.no-thumbnail .site-branding .site-title {
    color: #0e364f;
}

.single .has-thumbnail .post,
.single .no-thumbnail .post {
    background-color: transparent;
}

.single .no-thumbnail .header-content .hero__meta {
    display: none;
}

.no-thumbnail .site-header {
    position: relative;

    border-bottom: none;
    background-color: transparent;
}

.no-thumbnail .site-header a {
    border-bottom: none;
}

Originally Adler has the logic for this in the header.php file

<div id="page" class="site <?php echo ( has_post_thumbnail() ) ? 'has-thumbnail' : 'no-thumbnail'; ?>">

I strongly suspect this won't fly on WordPress.com.

Temporary solution

For now, I have removed the logic from the header.php file and moved it to the file inc/extras.php:

function adler_body_classes( $classes ) {

	// Adds a class of has-post-thumbnail if the featured image is set ( or the first post in the loop has the featured image set ) and a class of no-post-thumbnail if the featured image is missing.
	if ( has_post_thumbnail() ) {
		$classes[] = 'has-post-thumbnail';
	} else {
		$classes[] = 'no-post-thumbnail';
	}

	return $classes;
}
add_filter( 'body_class', 'adler_body_classes' );

Feedback request

I need to confirm whether:

  • The usage of has_post_thumbnail() check is valid ( and appropriate outside of the loop )
  • has-post-thumbnail and no-post-thumbnail are acceptable for class names ( I am aware that WordPress adds the has-post-thumbnail class to the .post - so there might be a potential conflict )
  • Removing those conditional classes and styling all together is a better solution.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.