0
Welcome Guest! Login
0 items Join Now

SOLVED imagegrid in Helium Gantry 5 theme

Last Post
Search Topic

  • SOLVED imagegrid in Helium Gantry 5 theme

    Posted 7 years 11 months ago
    • Hi guys,

      I'm using the gantry5 helium theme to create a basic site but I want to use image grid in it. Imagegrid dpesn't come as part of helium so I'm trying to add it in by taking file from the proton template I use on another site.

      I've copied over files imagegrid.html.twig & imagegrid.yaml to the /particles/ folder in the template and I've copied over _imagegrid.scss to /scss/helium/particles/

      I can create the imagegid modual fine now by going to modules > new selecting 'Gantry5 Particle' and picking 'Image Grid'> I can add my images and configure it as I normal would in other sites that it came with. Proble is that when i look at the module on the frontend is just shows the images fullsize in a column with now effect (hover over etc.) When I click the images they open in a Rokbox as I would expect.

      I have recopiled the css on my template but it just doesn't want to apply the styles to the images ont he fronend even though in the HTML I can see the relevant classes are all there. I've done all I can think of including clearing caches etc. but it makes no difference.

      Can someone please tell if if I'm missing sonething.

      Thanks,

      Aran


      WHAT I SEE INTHE HTML:
      <div class="g-imagegrid ">

		
		<div class="g-imagegrid-wrapper g-imagegrid-2cols">
						    <div class="g-imagegrid-item">
			        <a class="g-imagegrid-link" href="/images/elite-wakes-ext.jpg" data-rokbox="" data-rokbox-album="Test" data-rokbox-caption="Entry Hall"><img src="/images/elite-wakes-ext.jpg" alt="Entry Hall" class="">
              <div class="indicator"><div>+</div></div>
              </a>
			    </div>
						    <div class="g-imagegrid-item">
			        <a class="g-imagegrid-link" href="/images/elite-wakes-hall.jpg" data-rokbox="" data-rokbox-album="Test" data-rokbox-caption="Outside"><img src="/images/elite-wakes-hall.jpg" alt="Outside">
              <div class="indicator"><div>+</div></div>
              </a>
			    </div>
					</div>

	</div>


      WHAT I SEE ON THE SITE:
      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 7 years 11 months ago by Aran Gibbs.
    #1350552
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED imagegrid in Helium Gantry 5 theme

    Posted 7 years 11 months ago
    • If you want to know how to copy a Gantry 5 particle from one template to another please read my tutorial here in Gantry 5 Official Documentation here .


      the scss file should go in the "custom/scss" folder and it should be imported in your custom.scss file...
      @import "dependencies";
@import "imagegrid";

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1350570

  • Re: SOLVED imagegrid in Helium Gantry 5 theme

    Posted 7 years 11 months ago
    • Hi Mark,

      I had followed your guide and I had done the @includes already and the recompiled base just hadn't put it in above.
      I have since noticed that I'm getting this error when I look at it in inspector:

      Did not parse stylesheet at '/templates/g5_helium/custom/css-compiled/imagegrid' because non CSS MIME types are not allowed in strict mode.

      I've checked the server config in controlpanel and MIME type for css does seem to be setup correctly as text/css

      Aran
    • Last Edit: 7 years 11 months ago by Aran Gibbs.
    #1350592

  • Re: SOLVED imagegrid in Helium Gantry 5 theme

    Posted 7 years 11 months ago
    • Nevermind Mark I figured it out. For some reason the css file had a space at the end of the name so it could find it... remove space.. all works!... Thanks.
    #1350597

Time to create page: 0.068 seconds