Bigger Mobile Images en-US

Installations 17 Likes 1

Do you look at your Kanka campaign on mobile? Do you have to squint to look at the entity images? Well, no longer! Embiggen your images on mobile! This little plugin will turn your pictures from TINY to LARGE. Both regular entity images and banner images are transformed to take up more space so you don't have to put on your fancy monocle any more.

You can adjust the size of the images using CSS variables in your campaign theme:

.entity-grid { --image-width: 100%; --padding-height: 85%; }

By default, images are set to take up the full width of the screen. Change --image-width if you want them to appear smaller (or even bigger). If you want more space between the image and the header text, increase the variable --padding-height. To match colors, this theme uses Kanka's own variables: --breadcrumb-text, --header-text and --link-text.

Works for device width up to 576px.

Latest version 1.1 View content

Released 1 year ago

Version 1.1 - Updates to Kanka replaced the normal image with a tiny 100x100 thumbnail on smaller viewscreens, which doesn't look so good resized with this plugin. So it's been updated to use the regularly sized image instead.

Plugin CSS for 1.1


.entity-grid  { 
  --image-width: 100%;
  --padding-height: 85%;
}

@media (max-width: 576px) {
  .entity-grid .entity-header:has( > .entity-header-image ), .entity-grid>.entity-header.with-entity-banner { grid-template-columns: 100%;grid-template-rows: auto; }
  .entity-header:before { content: '';width: 0;padding-bottom: var(--padding-height);grid-row: 1 / 1;grid-column: 1 / 1; }
  .entity-header .entity-name-header { align-items: center; }
  .entity-grid .entity-header .entity-header-image { width: calc( var(--image-width) - 5px); justify-self: center; padding-left: 0; padding-right: 0; height: calc( var(--image-width) - 5px); }
  .entity-grid .entity-header .entity-header-image > a.entity-image.visible-xs {display: none!important;}
  .entity-grid .entity-header .entity-header-image > .dropdown-toggle.hidden-xs {display: grid!important;width: var(--image-width);}	
  .entity-grid .entity-header .entity-header-image .entity-image { height: var(--image-width); width: var(--image-width);justify-self: center;padding-left:0;padding-right:0;}
  .entity-grid .entity-header .entity-header-image+.entity-header-text { padding-left: 10px; grid-row-start: 2; grid-column-start: 1; }  
  .entity-grid>.entity-header.with-entity-banner .entity-header-text {padding-top: calc( var(--image-width) * 1.2 - 100% );}
  .entity-grid>.entity-header.with-entity-banner .entity-header-image > .dropdown-toggle.hidden-xs { display: none!important; }    
  .entity-header.with-entity-banner > .entity-banner { width: var(--image-width); justify-self: center; height: calc( var(--image-width) * 1.2 ); }
  .entity-header.with-entity-banner > .entity-header-text { grid-row-start: 2; grid-column-start: 1; color: var(--header-text); }
  .entity-header.with-entity-banner .entity-name-header > h1.entity-name { color:  var(--header-text); text-shadow: none; }
  .entity-header.with-entity-banner > .entity-header-text > .entity-texts > ol > li { color:  var(--breadcrumb-text); text-shadow: none; }
  .entity-header.with-entity-banner > .entity-header-text > .entity-texts > ol > li > a {color:  var(--breadcrumb-text);text-shadow: none; }
  .entity-grid>.entity-header.with-entity-banner .entity-icons { color:  var(--header-text); text-shadow: none; }
  .entity-header.with-entity-banner > .entity-header-text .entity-header-sub.pull-left { color:  var(--header-text); text-shadow: none; }
  .entity-header.with-entity-banner > .entity-header-text .entity-header-sub.pull-left a { color: var(--link-text); text-shadow: none; text-decoration: none; }
  .entity-header .entity-image + div > picture > img { width: 100%!important;justify-self: center; padding-left: 0; padding-right: 0;}
  body.entity-with-banner .content-wrapper>.content { padding-top: 15px; }
}